关于 Service Worker 的实现，大家有什么比较好的参考代码可以分享么？

[Livid]

[sleepm]

https://github.com/NekR/offline-plugin
在 stackedit 里看到过

[yilingersier]

= =我们组的某个 repo，虽然写的有点烂，但是你可以。。好像不可以了，你去搜搜 Pinterest，到 source 里看看 sw.js 文件，它们的没 encrypted，或者就是 Google 家的 workbox, 只不过它们 version 其实有 4.0 了但网页给的是 3.0 版本的

[huxiaoxi1992]

https://developers.google.com/web/tools/workbox
react, vue 现在官方 cli 生成的默认 PWA webpack 插件用的都是 workbox，一般都走配置文件去指定需要缓存的文件。vue 生成的模板中有个 registerServiceWorker.js 文件提供了几个生命周期的钩子，可以在这里面写相关的逻辑。
vue-cli 提供的文档 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli-plugin-pwa/README.md
react-create-app 文档 https://create-react-app.dev/docs/making-a-progressive-web-app

[Mutoo]

上面提到的这些 plugin 基本只是做了静态资源的缓存，远没有发挥 service worker 的优势。
推荐一本动物书《 Building Progressive Web Apps 》
里面讲的 Service Worker 生命周期与缓存管理非常值得一读，尤其是缓存的版本控制。
里面对动态数据的缓存控制策略也是非常值得学习。

[int64ago]

所以 V 站要支持 PWA 了么

[int64ago]

一定控制好缓存！最好加个降级开关。

别搞得用户更新不了，特别是手机浏览器 😄

[Tomotoes]

我的网站用的是 workbox, 代码在 https://tomotoes.com/sw.js ，具体可以看楼上发的官方文档

我的 workbox 是结合我的打包脚本的和 jsDriver。

每次修改了静态资源，静态资源的链接都会变，版本控制就不必做了。

[morethansean]

哈哈哈超简单版（单纯的 cache 资源 + api 请求失败时直接用缓存；请求的错误重试做在应用层了，没丢在 sw 里）： https://github.com/7nights/bv2ex/blob/master/service-worker-tpl.js

[Livid]

@morethansean 非常感谢。这个很接近我目前在做的需求。

[yuxizhe]

workbox

[hantsy]

Angular 项目自己可以添加一个文件。