pwa

渐进式网络开发应用程序（离线可访问）

1. npm i -D workbox-webpack-plugin

const WorkboxPlugin = require('workbox-webpack-plugin');
......
plugins:[
    new WorkboxPlugin.GenerateSW({
      // 这些选项帮助快速启用 ServiceWorkers
      // 不允许遗留任何“旧的” ServiceWorkers
      clientsClaim: true,
      skipWaiting: true,
    }),
]

3. index.js文件，注册serviceWorker

   //处理兼容性问题
   if ('serviceWorker' in navigator) {
     window.addEventListener('load', () => {
       navigator.serviceWorker.register('/service-worker.js').then((registration) => {
         console.log('SW registered: ', registration);
       }).catch((registrationError) => {
         console.log('SW registration failed: ', registrationError);
       });
     });
   }
   

   问题：

   1）eslint不认识window、navigator的变量

   解决：添加package.json配置

   "eslintConfig": {
       "env": {
         "browser": true
       }
     },
   

   2）sw代码必须运行在服务器上

   快速构建服务器

   ①npm i serve -g

   ②serve -s build

   启动服务，将build目录（webpack打包输出后的文件夹）下所有资源作为静态资源暴露出去。