webpack pwa技术

1. webpack.config.js

const GenerateSW = require('workbox-webpack-plugin');
...
// 插件
module.exports = {
...
    plugins: [
      	...
        new GenerateSW.GenerateSW({
            // 帮助 serviceworker 快速启动
            // 删除旧的 serviceworker
            // 生成一个 serviceworker 配置文件
            clientsClaim: true,
            skipWaiting: true
        })
    ],
    // 模式 development 开发， production 生产自动压缩js代码
    mode: 'production',
    devtool: 'source-map'
}

2. package.json

"eslintConfig": {
    "extends": "airbnb-base",
    "env": {
      "browser": true
    }
  },

3. index.js

/**
 * eslint 不认识 window， navigator 全局变量
 * 解决： 需要修改 package.json中eslintConfig配置
 * "env": {
 *    "browser": true
 * }
 *
 * sw 代码必须运行在服务器上
 * --> nodejs
 * --> npm i serve -g
 *     serve -s build  // 启动服务器，将build目录下所有资源作为静态资源暴露出去
 *
 * */
// 注册 serviceworker
// 处理兼容性问题
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('service-worker.js').then(() => {
      console.log('sw注册成功了');
    }).catch(() => {
      console.log('sw注册失败了');
    });
  });
}