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

Author: sky
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source sky !
 Previous
社区作品 社区作品
游戏中心小米游戏中心easy-team https://github.com/zhqlol/edgarserverhttps://www.jianshu.com/p/71fe6197d358https://github.com/MaleWeb/FullStack_Cli
2019-12-23 sky
Next 
从零开始 从零开始
从零开始搭建 Egg + Vue + Webpack 服务端渲染项目1. 初始化环境安装 Node LST (8.x.x) 环境: https://nodejs.org/zh-cn2. 初始化 egg 项目https://github.com/eggjs/egg-init/blob/maste...
2019-12-23 sky