Service Worker的缓存时机与缓存策略

Posted 2021-04-14 一个小前端的学习笔记

Service Worker提供了丰富的离线体验。但是技术的发展从来都不是孤立的。在SW出现之前，html5也提供了页面缓存方案，开发者们使用 Application Cache (AppCache)[1]接口缓存资源，不过已经不推荐使用了

知乎上面也有关于AppCache的缺点的讨论[2]，想必SW已经解决了这些个问题

ServiceWorker 提供了控制缓存和处理请求的方式

SW的生命周期[3]缓存的时机

•install时•用户交互时•网络响应时

缓存策略

无论您缓存多少内容 ServiceWorker 都不会使用缓存，除非您指示它在何时使用缓存以及如何使用

页面上的内容有两种来源，缓存和网络，然后就排列组合吧

•全部来自缓存•全部来自网络•取缓存的内容失败了再去请求网络•请求网络失败了去请求缓存•两个一起请求看谁快•先去取缓存，然后再去请求网络•两个都失败了，就只好做一个错误处理，叫Generic fallback

---

先了解一下理论，明天准备给自己的站正式上SW[4]

References

[1] Application Cache (AppCache): https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache
[2] AppCache的缺点的讨论: https://www.zhihu.com/question/29876535
[3] SW的生命周期: https://blog.bitsrc.io/understanding-service-workers-and-caching-strategies-a6c1e1cbde03
[4] 自己的站正式上SW: https://www.so-easy.cc/wechat-editor/