WorkBox 緩存功能

一,什么是 WorkBox ?

workbox这个库和构建工具的集合使用了servicework 的 fetch event 和cache API，可以很容易地在用户的设备上本地存储您的网站文件。

让您的网站离线访问。

提高重复访问的负载性能，即使您不想完全离线，也可以使用 workbox 在本地存储和提供常用文件，而不是从网络中存储和提供。

二,WorkBox 的作用是什么?

案例一：使用页面加载时间的计算公式来查看使用了workbox缓存前和缓存后的速度。

第一次进入页面网络请求后 workbox 会把你需要缓存的资源存储在cacheStorage 里面

第一次完全加载 3.3秒，我们再刷新一次.

缓存后页面加载时间 0.82秒。

案例二： 也在完全脱离网络情况下也访问网络。

三，如何注册ServiceWorker

workbox是依赖 serviceWorker的 fetch event工作，所以我们先要注册 serviceWorker

目前，service worker已经作为草案被提出，可以实现消息推动、地理围栏、离线应用等功能，相当于在浏览器端建立了一个代理服务，实现一些现在看来逆天的功能。

1. Service worker介绍

目前原生App跟HTML5相比具有如下优势:富离线体验、消息推送、定时默认更行等功能，这些优势决定了HTML5无法取代native。service worker(后面简称sw)就是在这样的背景下提出来的。

sw是一段运行在浏览器后端的脚本，独立于页面，是一个worker，也可以理解为一个网络代理服务器。因此sw是无法与DOM进行交互的，但是可以与js主线程进行通信。

2. 实现的功能

目前sw还是一个草案，各个浏览器支持程度还不是很高，除了chrome 40、firefox以外，其他浏览器均不支持该功能，但是sw提供的逆天功能还是非常值得期待:

1，后台数据的同步

2，从其他域获取资源请求

3，接受计算密集型数据的更新，多页面共享该数据

4，客户端编译与依赖管理

5，后端服务的hook机制

6，根据URL模式，自定义模板

7，性能优化

8，消息推送

9，定时默认更新

10，地理围栏

其中最期待的还是通过HTTP请求的拦截，进而实现离线应用，提升页面的性能体验。

我们在页面加载时引入创建的JS文件。

firebase-messaging-sw.js 是创建后用来编写 workbox 缓存。

注意: firebase-messaging-sw.js文件必须在根目录下否则父級目錄無法緩存。

或則firebase-messaging-sw.js 加上指向更目錄。

如何判断是否注册成功打 chrome 调试工具 Application->Service Workers 亮起绿灯就表示注册成功。

三，如何搭建 workbox

workbox 提供一下几种搭建方法.官网:https://developers.google.com/web/tools/workbox/

我们下载workbox-sw

注册成功后 我们引入workbox-sw.vX.X.X.prod.js

在我们创建workbox.js的引入官方提供的JS文件

创建 workboxsw 对象

workbox提供 5 种缓存策略

1，只取缓存不請求網絡----cacheOnly

2，首先取缓存，回落到网络----staleWhileRevalidate

3，缓存，网络更新 ---cacheFirst

4，只有网络----networkOnly

5，网络首先回落到缓存---- networkFirst

配置成功后刷新页面记得需要刷新两次，第一次请求网络缓存到本地。

打开调试工具 network 查看 文件从for sericeWork 缓存就成功了同时不会请求网络也可以在Application->cacheStorage下查看文件是否缓存成功。

cacheFirst方法 优先取本地缓存如果没有才请求网络

我们把 cacheFirst 修改成 staleWhileRevalidate 测试下.

可以看到 network 下有两个请求文件一个来自网络另外一个来自本地缓存

staleWhileRevalidate 方法 先取本地然后请求网络更新本地缓存。

剩下几种方法 我就不一一讲解。

同学们大家可以看到缓存的效果整体缩短了三分之二页面加载时间。

注意:

这功能IOS暂时不支持.

只能在安卓手机和PC端

详细的流量器支持 servicework 查看URL

https://jakearchibald.github.io/isserviceworkerready/index.html

workbox 讲解完毕!!