目录
先来看看基础Service Worker
注册阶段
安装和激活
workbox
workbox-webpack-plugin
来看看结果
这次再做组件的库模式打包之后想着优化js加载，于是想到了大家用的并不是很多的Service Worker技术，这个技术类似于原生的离线包能力
先来看看基础Service Worker
注册阶段
if ('serviceWorker' in navigator) {navigator.serviceWorker.register('/service-worker.js').then(registration => {console.log('ServiceWorker registration successful with scope: ',registration.scope)}).catch(err => {console.log('ServiceWorker registration failed: ', err)})
}来看看registration信息
需要注意的是，Service Worker 脚本除了域名为 localhost 时能运行在 http 协议下以外，只能运行 https 协议下。
注册了一个 service worker，它工作在 worker 上下文，所以没有访问 DOM 的权限。
安装和激活
const addResourcesToCache = async (resources) => {const cache = await caches.open("v1");await cache.addAll(resources);
};self.addEventListener("install", (event) => {event.waitUntil(addResourcesToCache(["/","/index.html","/style.css","/app.js","/image-list.js","/star-wars-logo.jpg","/gallery/bountyHunters.jpg","/gallery/myLittleVader.jpg","/gallery/snowTroopers.jpg",]),);
});
在安装的时候预缓存网站的静态资源
还有一些涉及service work的工作可以参考MDN文档，里面涉及的一些基本用法也有写。只是很多时候我们不会去直接使用，而是用成熟的框架来达到我们的目的！！
workbox
既然如此，我们最好是站在巨人的肩膀上，这个巨人就是谷歌。workbox 是由谷歌浏览器团队发布，用来协助创建 PWA 应用的 JavaScript 库。当然直接用 workbox 还是太复杂了，谷歌还很贴心的发布了一个 webpack 插件，能够自动生成 Service Worker 和 静态资源列表
workbox-webpack-plugin
添加 workbox-webpack-plugin 插件，然后调整 vue.config.js 文件（具体看自己工程配置）：
npm install workbox-webpack-plugin --save-dev
这样就可以直接达到我们的目的
来看看结果
看起来就是和localStroage的显示形式差不多，也可以理解成一种缓存策略，只不过是运用多线程的技术，让js更优雅
如果觉得有收获，麻烦给个赞和关注。你的鼓励是我写作的动力，大家一起学习一起进步。
