前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Service Worker 缓存文件处理

Service Worker 缓存文件处理

作者头像
从今若
发布2019-09-19 14:58:33
1.4K0
发布2019-09-19 14:58:33
举报
文章被收录于专栏:家劲

交代背景

前段时间升级了一波Google Chrome,发现我的JulyNovel站点Ctrl+F5也刷新不了,后来发现是新的Chrome已经支持Service Worker,而我的JulyNovel也满足https这个硬性条件。 之前加载过的css和js都被缓存了。 所以这里是有点小问题的,毕竟我服务器更新了,你service worker 没给我更新缓存,就说不过去了。

生命周期

特地跑到Google Develop去看了下究竟是怎么运转的。

Service Worker生命周期的意义

1.实现离线优先(这个不谈,没网也能搞事?这妥妥的Native的能力啊) 2.允许新服务工作线程自行做好运行准备,无需中断当前的服务工作线程。(准备替换旧的service woker) 3.确保整个过程中作用域页面由同一个服务工作线程(或者没有服务工作线程)控制。 4.确保每次只运行网站的一个版本。

install

根据我的理解,这个环节只在第一次打开网站时加载,一系列操作保证其原子性(要么可用,要么废弃)

Activate

service worker被激活,某些请求就会变成 from ServiceWorker

更新service worker

这里就是解决问题的关键了。

首先,会触发更新的情况如下 1.导航到一个作用域内的页面。 2.更新 push 和 sync 等功能事件,除非在前 24 小时内进行了更新检查。 3.调用 .register(),仅在ServiceWorker网址已发生变化时。 4.在获取更新时遵循(长达 24 小时)服务工作线程脚本上的缓存标头。 我们将创建此选择加入行为,因为它可以发现问题。 在您的服务工作线程脚本上,您可能需要 max-age 为 0。 更新流程 1.install 装载新的工作线程(根据我的理解,就是把css和js换个版本号,则会触发install的事件) 2.waiting 等待更新动作被触发 3.Activate 新的serviceworker替换老的 4.skipWaiting 跳过waiting 5.手动更新

代码语言:javascript
复制
navigator.serviceWorker.register('/sw.js').then(reg => {
  // sometime later…
  reg.update();
});
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-03-17 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 交代背景
  • 生命周期
    • Service Worker生命周期的意义
      • install
        • Activate
          • 更新service worker
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档