Workbox5+Webpack4构建离线应用

将应用中的静态资源缓存是目前最主流的性能优化方法，甚至能让应用秒开！目前常见的缓存方式有http缓存、memory cache、disk cahce、localstorage、Service worker缓存等方式，本文介绍的Workbox就是实现Service worker离线缓存的一个工具。
那么问题来了，Service worker离线缓存和传统的缓存方式对比，有什么优势和劣势呢，service worker之所以越来越流行，是因为它让前端缓存脱离了服务端，不需要服务端再额外做些什么，前端工程师自己就可以实现缓存，而且缓存内容完全可控，下面是我搜索的几条主流缓存方式的介绍和对比。

上图从深入理解浏览器缓存处参考
http缓存依赖于服务端配置，memory cache和disk cache缓存内容不可控，而且只缓存一些静态资源，push cache是临时缓存，localstorage适用于缓存一些全局的数据，对于静态资源很少用它。
service worker缓存的优缺点：
优点：

非侵入式缓存
缓存内容开发者完全可控
持续性缓存
独立于主线程之外，不堵塞进程

缺点：

权限太大，能拦截所有fetch请求，需要控制一下
发版更新处理比较麻烦

Workbox简介
Workbox 是 Google Chrome 团队推出的一套 PWA 的解决方案，这套解决方案当中包含了核心库和构建工具，因此我们可以利用 Workbox 实现 Service Worker 的快速开发。
引入方式
有两种方式可以引入workbox：
第一种最为方便，就是通过importScripts()方法从谷歌官方CDN中引入。
importScripts(‘https://storage.googleapis.com/workbox-cdn/releases/5.0.0/workbox-sw.js’);
if (workbox) {
console.log(Yay! Workbox is loaded 🎉);
} else {
console.log(Boo! Workbox didn't load 😬);
}
复制代码第二种方式就是从本地引入，本地需要从npm库中下载相应的workbox包，然后通过import按需导入，本文的例子就是这种方式。
import {precaching} from ‘workbox-precaching’;
import {registerRoute} from ‘workbox-routing’;
import {BackgroundSyncPlugin} from ‘workbox-background-sync’;

// 按需引入，然后使用对应模块…
复制代码详细介绍请查阅官方文档
配置
Workbox可以修改缓存名称，可以用setCacheNameDetails设置预缓存和运行时缓存的名称，还可以通过workbox.core.cacheNames.precache 和 workbox.core.cacheNames.runtime 获取当前定义的预缓存和动态缓存名称。
// 修改默认配置
workbox.core.setCacheNameDetails({
prefix: ‘app’,
suffix: ‘v1’,
precache: ‘precache’,
runtime: ‘runtime’
})

// 打印修改结果

// 将打印 ‘app-precache-v1’
console.log(worbox.core.cacheNames.precache)
// 将打印 ‘app-runtime-v1’
console.log(workbox.core.cacheNames.runtime)
复制代码更多配置下信息请参考官方文配置文档
预缓存功能
预缓存功能可以在service worker安装前将一些静态文件提前缓存下来，这样就能保证service worker安装后可以直接存缓存中获取这些静态资源，可以通过以下代码实现。
import {precac