11.webpack^4.42.1文档学习

1 上一节学习了老库的优化，这一节学习一个当前比较流线的前端技术应用-------Progressive Web Application - PWA。

1.1PWA是什么？

从它的英文全称大致可以看出两点：1、它符合渐进增强的特性(首先保证基本功能实现，后面再考虑新功能的适配)。2、它是一个web应用（js+html写的）。
除此之外，它还具有以下特点：
1、浏览器的Service Worker支持其离线可用。
2、消息通知
3、无需更新
4、https下安全性高
咋们在使用浏览器的时候应该遇到浏览器建议你将某个网页加入到桌面快捷方式。这种应用咋们就可以称它为pwa。实际上它还是一个网页，只是它能够提供接近于native app的ui体验，如果是要和操作系统通信，恐怕相对于用原生语言（java =>Android，ios=>swift、objective-c）就不是那么容易了。它依赖于浏览器环境，等于说浏览器本身是一个原生外壳，需要浏览器对网页暴露它的原生能力，比如做过wx公众号开发的，应该知道wxjssdk有暴露出一些微信的原生能力给微信网页（如扫码），此处涉及到大前端的东西我就不说了（其实我还没涉及到哈哈）。

1.2 实现pwa得离线可用

此处咋们要用 workbox-webpack-plugin插件。
1、安装

npm install workbox-webpack-plugin --save-dev

webpack中进行相关配置
// webpack.config.js

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

注意: 不要在production环境下使用contenthash或chunkhash时同时使用热替换插件，不然终端会报错。
// src/index.js

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);
        });
    });
}

运行npm run build ，然后npm run serve(之前咋们通过webpack-dev-server搭建的本地服务器，你也可以使用官方推荐http-server，本质是一样的)，然后浏览器控制台如图1-1：

图1-1

然后我们关掉本地起的服务器：刷新页面，查看network如图1-2：

图1-2 发现资源依然可以访问，至于其中info?xxx文件为啥加载不出来了，是因为这个文件涉及到我们之前学的热更新(热替换)提到的ws通信，实际作用是在我们代码修改后，能够及时通知浏览器刷新。此文件不受serviceWorker控制。