离线缓存优化
将应用中的静态资源缓存是目前最主流的性能优化方法，甚至能让应用秒开！目前常见的缓存方式有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
