V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
Livid
V2EX  ›  JavaScript

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

  •  
  •   Livid · 2020-03-03 02:13:05 +08:00 · 4198 次点击
    这是一个创建于 1708 天前的主题,其中的信息可能已经有所发展或是发生改变。
    11 条回复    2020-03-03 15:37:38 +08:00
    sleepm
        1
    sleepm  
       2020-03-03 02:42:58 +08:00 via Android   ❤️ 1
    https://github.com/NekR/offline-plugin
    在 stackedit 里看到过
    yilingersier
        2
    yilingersier  
       2020-03-03 03:03:22 +08:00   ❤️ 1
    = =我们组的某个 repo,虽然写的有点烂,但是你可以。。好像不可以了,你去搜搜 Pinterest,到 source 里看看 sw.js 文件,它们的没 encrypted,或者就是 Google 家的 workbox, 只不过它们 version 其实有 4.0 了但网页给的是 3.0 版本的
    huxiaoxi1992
        3
    huxiaoxi1992  
       2020-03-03 03:13:22 +08:00 via Android   ❤️ 1
    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
        4
    Mutoo  
       2020-03-03 08:09:52 +08:00   ❤️ 1
    上面提到的这些 plugin 基本只是做了静态资源的缓存,远没有发挥 service worker 的优势。
    推荐一本动物书《 Building Progressive Web Apps 》
    里面讲的 Service Worker 生命周期与缓存管理非常值得一读,尤其是缓存的版本控制。
    里面对动态数据的缓存控制策略也是非常值得学习。
    int64ago
        5
    int64ago  
       2020-03-03 08:09:54 +08:00 via Android
    所以 V 站要支持 PWA 了么
    int64ago
        6
    int64ago  
       2020-03-03 08:16:30 +08:00 via Android   ❤️ 2
    一定控制好缓存!最好加个降级开关。

    别搞得用户更新不了,特别是手机浏览器 😄
    Tomotoes
        7
    Tomotoes  
       2020-03-03 08:18:43 +08:00 via Android   ❤️ 1
    我的网站用的是 workbox, 代码在 https://tomotoes.com/sw.js ,具体可以看楼上发的官方文档

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

    每次修改了静态资源,静态资源的链接都会变,版本控制就不必做了。
    morethansean
        8
    morethansean  
       2020-03-03 09:50:03 +08:00   ❤️ 1
    哈哈哈超简单版(单纯的 cache 资源 + api 请求失败时直接用缓存;请求的错误重试做在应用层了,没丢在 sw 里): https://github.com/7nights/bv2ex/blob/master/service-worker-tpl.js
    Livid
        9
    Livid  
    MOD
    OP
       2020-03-03 09:52:38 +08:00
    @morethansean 非常感谢。这个很接近我目前在做的需求。
    yuxizhe
        10
    yuxizhe  
       2020-03-03 14:10:56 +08:00
    workbox
    hantsy
        11
    hantsy  
       2020-03-03 15:37:38 +08:00
    Angular 项目自己可以添加一个文件。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3423 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 04:50 · PVG 12:50 · LAX 20:50 · JFK 23:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.