一,什么是 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 讲解完毕!!
领取专属 10元无门槛券
私享最新 技术干货