Service Worker文件如何更新？

参考资料
  1. Nginx基本介绍
  2. Nginx作为反向代理的功能
  3. 如何结合WAF使用Nginx提高安全性？
  4. Nginx的负载均衡能力
  5. nginx 配置方式
  6. nginx 配置反向代理
  7. Nginxtry_files 文件判断指令详细说明以及案例
  8. NginxHTTPS服务器搭建详细说明以及案例
  9. 文件更新触发条件
    • 浏览器检测到Service Worker文件（sw.js）的字节级变化（即使内容不同但字节相同不会触发）。
  10. 更新流程
    • 下载新文件：浏览器在后台下载新Service Worker文件。
    • 安装阶段：触发install事件，新旧Worker共存。
    • 等待阶段：新Worker处于waiting状态，直到旧Worker控制的页面全部关闭。
    • 激活阶段：触发activate事件，新Worker接管控制。
  11. 强制立即更新方法
    1. if ('serviceWorker' in navigator) {
    2. navigator.serviceWorker.register('/sw.js').then(reg => {
    3. reg.update();
    4. });
    5. }
  12. 跳过等待阶段 在install事件中调用self.skipWaiting()：
    1. self.addEventListener('install', () => {
    2. self.skipWaiting();
    3. });
  13. 清理旧缓存 在activate事件中清理旧缓存：
    1. self.addEventListener('activate', event => {
    2. event.waitUntil(
    3. caches.keys().then(keys => {
    4. return Promise.all(keys.map(key => {
    5. if (key !== CURRENT_CACHE) {
    6. return caches.delete(key);
    7. }
    8. }));
    9. })
    10. );
    11. });
  14. 客户端刷新控制 通过postMessage通知客户端刷新：
    1. self.addEventListener('activate', event => {
    2. self.clients.matchAll().then(clients => {
    3. clients.forEach(client => client.postMessage('sw-updated'));
    4. });
    5. });
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：2025-04-20，如有侵权请联系 cloudcommunity@tencent 删除事件serviceworker反向代理客户端