离线访问--PWA渐进式网络应用程序

PWA渐进式网络应用程序，是一种可以提供类似于native app（原生应用程序）体验的web app（网络应用程序）

就是离线可访问

需要使用workbox --> workbox-webpack-plugin

安装 workbox-webpack-plugin -D

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

-->要么使用 nodejs 启动服务器

-->或者使用 npm i serve -g

serve -s build 启动服务器，将build目录下左右资源作为静态资源暴露出去

const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
module.exprots={
    ...,
    plugins:[
        ...,
        new WorkboxWebpackPlugin.GenerateSW({
            /*
                1.帮助serviceworker快速启动
                2.删除旧的serviceworke
                
                生成一个servicework 配置文件（需要在入口文件中注册）
            */
            clientsClaim:true,
            skipWaiting:true        
        })  
    ]  
}

需要到 入口文件中 注册servicework

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

编译时eslint不认识 navigtor，window等全局变量

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

{
    ...,
    "eslintConfig":{
        "extends": "airbnb-base"
        "evn":{
            "browser": true //支持浏览器端全局变量
        }
    }
}