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 讲解完毕!!

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20171221G0EAWJ00?refer=cp_1026

扫码关注云+社区