webpack优化系列(8)-PWA

PWA是什么？

(Progress web apps) 渐进式网络开发应用程序(离线可访问，比如淘宝)。

那么webpack中怎么配置实现PWA功能呢？

一般使用workbox来实现（谷歌开源的项目）==>  workbox --> workbox-webpack-plugin一般设置eslint后构建后会有问题：eslint不认识window、navigator全局变量

解决办法：

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

整体实现如下：
  1. 下载：npm install workbox-webpack-plugin --save
  2. webpack配置：(webpack.config.js文件)

const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
plugins: {
    new WorkboxWebpackPlugin.GenerateSW({
        // 帮助serviceworker快速启动；删除旧的serviceworker；生成一个serviceworker配置文件
        clientsClaim: true,
        skipWaiting: true
    })
}

  3. 注册serviceworker、处理兼容问题(index.js文件)

if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        // service-worker.js这个文件是通过workbox-webpack-plugin生成这个文件
        navigator.serviceWorker
            .register('/service-worker.js')
            .then(() => {
                console.log('sw注册成功!')
            }).catch(() => {
                console.log('sw注册失败!')
            })
        })
}

  4. serviceworker代码必须运行在服务器上
      有两种实现方式：
      (1) nodeJS
      (2) npm install serve -g
            serve -s build 启动服务器，将build目录下的所有资源作为静态资源暴露出去

系列相关

• webpack优化 - HMR
• webpack优化 - sourceMap
• webpack优化 - oneof
• webpack优化 - 缓存
• webpack优化 - tree-shaking
• webpack优化 - code-split
• webpack优化 - 懒加载&预加载
• webpack优化 - 多进程打包
• webpack优化 - externals
• webpack优化 - dll