service worker 缓存网站的原理是什么？有什么潜在的缺陷？

[LeeReamond]

如题，最近个人博客挂了个别人写的主题里面有个选项是开启 service worker 缓存，我试了试开启了之后效果确实很好，除了/目录的 html 是经过网络传输的，剩下几乎所有内容都是本地缓存的，基本打开页面 0.01 秒渲染，体验确实不错。

很好奇这东西的技术原理。传统的缓存一般都是 localstorage 或者 sessionstorage/cookie 这一类东西，空间容量还有限制，这个 serviceworker 是依托于这些传统规范实现的缓存吗？如果是的话它的整个生命周期仍然符合之前的浏览器规范吗？或者说这是个完全新的做的东西，不受传统缓存规范约束

作为用户角度（我注意到从服务器角度似乎开启这个缓存功能只需引入一个 js 文件），我是否需要担心我的本地储存空间被挤占？比如登录 A 网站，A 网站就什么都不和用户说就在本地存下几 MB 的东西，访问 B 网站又存了一些，并且如果不再次访问网站触发代码的话他们又不会被自动清除。。是否会产生这样的问题？

有没有懂行老哥讲讲，这东西生产实践有啥坑么，如果能提高用户体验的话（所有网页都是秒开），为啥大商业公司的网站好像没见过用这个的呢？淘宝，B 站之类的

[ai277014717]

猜测是反向代理。

[okakuyang]

service worker 出来有几年了。油管、推特之类的网站，有时候当你网络出现故障，但是还能加载出基本的网页框架，那大概就是使用了 service worker 。
service worker 使用需要注册，也就是浏览器会弹窗问你要不要安装。安装之后就相当于浏览器在本地运行你写的一串代码，无论连网与否。这串代码负责代理这个站点发出的所有请求，如果请求匹配你写的规则就会从存储里取数据回来当作响应。
service worker 内可以调用 indexDB 作为存储，chrome 浏览器下，indexDB 的最大使用量为硬盘空闲容量的一半。
浏览器会定期将 service worker 过期。
部分对实时性要求不高的网站可以做，比如一些工具网站。

[3dwelcome]

在我眼里就是一个 http 代理。

大网站不用的原因，就是不想让你离线用吧。

我工具网站没用，是因为 HTML 页面频繁更新，每次都希望向服务器检测一下，看有没有最新数据。

只要不下载资源，返回 304 速度很快的，和 service worker 离线几乎没多大差别了。

[LeeReamond]

@okakuyang 感谢，提纲挈领，比看资料有用多了。一个问题是我在后端确实只是在 html 里引入了一个同源的 js 文件，也并没有提示我要安装啥的，之后就开启了，是否我没有成功开启这个功能，全缓存只是我对浏览器本身缓存机制的错觉？

时效性的问题，比如我在博客这种环境，感觉 html 本身是动态内容的话，似乎也不会有什么时效性的影响

[LeeReamond]

我 F12 看网络信息的话，除了 html 是 500 毫秒加载，其他的所有 js/css/图片全都是 0ms 内存缓存，感觉就是开启成功了啊，印象里原先的 cdn+几小时缓存机制不是这样的

[L1shen]

service worker 缓存资源一般使用的是 CacheStorage 具体可以参考

https://developer.mozilla.org/zh-CN/docs/Web/API/CacheStorage

[3dwelcome]

@LeeReamond "其他的所有 js/css/图片全都是 0ms 内存缓存，感觉就是开启成功了啊"

正常 http 缓存，也是先内存加载的。内存没有才找磁盘加载。

至于过期时间，一般资源设置的时间，还是挺长的。

[LeeReamond]

@3dwelcome 后来看了一下，F12 里会显式提示由 serviceworker 提供，浏览器本身的缓存则写成内存或硬盘提供。所以我这个确实是 serviceworker 的拦截和缓存正常工作了，但我未像 2L 所说在客户端见到任何确认，是自动就这样了