webpack--PWA（网站离线访问技术）

webpack.config.js

const WorkboxWebpackPlugin=require('workbox-webpack-plugin');
//终端下载npm i workbox-webpack-plugin -D

plugins:[
new WorkboxWebpackPlugin.GenerateSW({
//1.帮助serviceworker快速启动
//2.删除旧的serviceworker
clientsClaim:true,
skipWaiting:true
})
]

index.js

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

1.eslit不认识window,navigator全局变量
2.serviceworker代码必须运行在服务器上
--->nodejs 
    npm i serve -g //serve可以帮我们快速创建一个静态资源服务器
    serve -s build 启动服务器，将build目录下所有资源作为静态资源暴露出去

package.json

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