Egg + Vue/React SSR 使用 service worker
easywebpack 默认生成的 service-worker.js 是在 ${app_root}/public/service-worker.js这里. 这样 service-worker.js 访问路径是 http://127.0.0.1:7001/public/service-worker.js。
将 service worker 文件注册为 /public/service-worker.js，那么，service worker 只能收到 /public/ 路径下的 fetch 事件（例如： /public/page1/, /public/page2/), 但我们的页面访问是没有 /public/ 这一层路径的。正常情况下, service-worker.js 文件被放在这个域的根目录下，和网站同源。这个 service worker 将会收到这个域下的所有 fetch 事件。
这个问题可以通过 egg-serviceworker 解决。通过 egg-serviceworker 插件, 我们可以这样访问 http://127.0.0.1:7001/service-worker.js
- 启用
egg-serviceworker
// ${app_root}/config/plugin.js
exports.serviceworker = {
enable: true,
package: 'egg-serviceworker'
};- 注册
service worker
const serviceWorkerRegister = require('service-worker-register');
// The service-worker.js name will get really url address by sw-mapping.json file
serviceWorkerRegister.default.register('service-worker.js');- 自动打开 localhost 域名地址
配置本地开发启动自动打开 localhost 域名地址
// ${app_root}/config/config.local.js
exports.webpack = {
browser: 'http://localhost:7001'
};- 本地测试
注意：因开发环境构建的文件在内存中，sw-precache 获取不到文件列表，目前开发环境是不会注册的。可以通过 发布模式 在本地查看
service worker注册情况。
npm run build:test
npm run start:test或
npm run build
npm run start
