概述
PWA（渐进式网络开发应用程序） 主要由两部分组成：ServiceWorker & disk cache，它让我们的应用程序可以像 APP 一样，离线也能访问，性能也更好。但是由于兼容性问题，现在还没有大面积推广开来（但是大厂有使用，比如说淘宝）。要在项目中真正使用PWA，我们需要借助 workbox 这个库，而在 webpack 中，我们还需要引入 workbox-webpack-plugin 这个插件。
方案应用细节
第一步：在 webpack 配置文件中引入 workbox-webpack-plugin 插件
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
第二步：在 webpack 的 plugin 配置中添加 workbox-webpack-plugin 插件的实例
new WorkboxWebpackPlugin.GenerateSW({
/**
* 下面两个参数的作用：
* 1、帮助serviceWorker快速启动
* 2、删除旧的 serviceWorker
*/
clientsClaim:true,
skipWaiting:true
})
这个插件会自动生成 serviceworker 的配置文件和 workbox 库相关的文件，我们后面需要使用生成的配置文件去注册我们的 serviceworker 。接下来我们用 webpack 打包一下：
第三步：注册 serviceWorker
if ('serviceWorker' in navigator) { // 兼容性判断
window.addEventListener('load', () => {// 等所有资源加载完，再注册serviceWorker
navigator.serviceWorker.register('../dist/service-worker.js')// service-worker.js 这个文件由 workbox-webpack-plugin 插件生成
.then(() => {
console.log("serviceworker 注册成功");
})
.catch((e) => {
console.error("serviceworker 注册失败");
});
});
}
注册完 serviceWorker 以后，我们就可以在开发者工具的 application tab中找到我们注册的 serviceWorker 了：
我们还可以在 application 中看到使用 service-worker 和 workbox 缓存的文件：
这时候你把网络状态调整为 offline 以后，刷新页面还是能正常访问页面，因为我们已经做了文件缓存！当然即使在有网络的状态下刷新页面，浏览器也会优先使用缓存文件：
结语
我们已经对PWA 技术进行了一次简单而完整的尝试，有兴趣的小伙伴可以去查阅更多的资料，以便对 PWA 有更深入的了解。
