webpack 之(20) 优化配置 之 PWA

PWA:渐进式网络开发应用程序(离线可访问)

  workbox  ---> workbox-webpack-plugin

操作步骤

第一步:

npm i workbox-webpack-plugin

第二步:在webpack.config.js中使用

const WorkboxWebpackPlugin = require('workbox-webpack-plugin')

module.exports = {
  plugins:[

     new WorkboxWebpackPlugin.GenerateSW({
       //1.帮助serviceworker快速启动
       //2.删除旧的serviceworker
       
       //生成一个 serviceworker 配置文件
        clientsClaim:true,
        skipWaiting:true
     })
  ]

}    

第三步: 在index.js(入口文件)

分析:判断'serviceworker' 是否在navigator全局变量中,当load全局加载完之后,就去注册构建好的'service-worker.js'

//注册serviceWorker

//处理兼容性问题
if('serviceWorker' in navigator)
{
  window.addEventListener('load',() => {
      navigator.serviceWorker.register('/service-worker.js')
        .then(()=>{
            console.log('sw注册成功了~')
         }).catch(()=>{
            console.log('sw注册失败了')
         })
  })
}

第四步: 会有一点小问题

分析:

1/但是eslint 不认识 window, navigator全局变量

 解决:需要修改package.json中eslintConfig配置

"env":{
  "browser":true  //支持浏览器全局变量
}

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

    --> nodejs

    -->npm i serve -g

   server -s build 启动服务器,将build目录下所有资源作为静态资源暴露出去