【前-workbox-网络摘要】WorkBox缓存策略

1、概述

workerBox是基于ServiceWorker的一个构建工具，说到底就是让你更方便快捷地使用ServiceWorker。WorkerBox主要有三种使用方式：
（1）使用WorkerBox的命令行，通过配置文件生成最终的sw.js
（2）使用work-build的npm包，借助自动化构建工具（例如gulp）来完成sw.js文件的输出
（3）使用webPack插件，通过配置文件生成最终的sw.js

workerBox在笔者理解就是对ServiceWork的封装，简化开发者流程

2、五种缓存策略

workerBox自身集成了五套缓存策略，便于开发者在实际开发过程中直接使用

2.1 Cache Only

只从缓存中读取，当缓存中没有数据时，读取失败。

2.2 NetWork Only

只通过网络请求进行资源请求，若请求失败，则返回失败响应。

2.3 NetWork First

• 优先网络请求
• 网络请求成功时，将结果写入缓存，并将结果直接返回。
• 网络请求失败时，从缓存中读取结果，若读取结果，则返回，若未读取到，则请求失败。

不难看出，这种策略是为了保证在第一次请求成功之后，后面多次的请求始终都能返回结果。

2.4 Cache First

• 优先从缓存中读取结果
• 若缓存中不存在结果，则进行网络请求
• 网络请求成功时，将结果写入缓存并返回
• 网络请求失败时，返回失败响应

2.5

• 优先查缓存，并同时发起网络请求
• 若缓存命中且网络请求成功，返回缓存结果，并更新缓存（下次从缓存中读取的数据就是最新的了）
• 若缓存未命中，则看网络请求是否成功，成功则更新缓存并返回结果，失败则返回失败响应。

2.6使用思考

参考：Workbox3 - ServiceWorker可以如此简单
神奇的 Workbox 3.0

笔者个人订阅号~欢迎小伙伴们关注

微信公众号-感谢关注

若有疑问可以QQ联系笔者，虽然不一定100%解决你的问题，但是可以交流探讨一波：2276604211

顺便打个广告：如果有想入职中国银联上海技术开发的童鞋，也可以加上面的QQ资讯，笔者可以帮你回答一些相关问题~~