技术问询：Service Worker能否在离线状态下完成自我更新？

核心结论：无法通过修改updateViaCache关联缓存实现更新 #

• updateViaCache仅控制浏览器在Service Worker更新检查时是否使用HTTP缓存获取脚本，但浏览器判断更新的核心是新脚本内容哈希与已注册Worker是否不同。
• Service Worker没有权限修改浏览器的HTTP缓存（仅能操作自身管理的Cache Storage），无法篡改缓存内容让浏览器误判存在更新。
• 离线状态下，浏览器不会主动触发更新检查；即使手动调用registration.update()，无网络时请求会失败，不会使用缓存内的旧脚本完成更新。

可行的离线更新方案 #

1. 本地导入新Worker脚本，通过Blob URL注册 #

将加密签名后的新Service Worker脚本通过sneakernet（如U盘）导入设备后，按以下流程更新：

• 应用提供导入界面读取脚本内容，转为Blob生成临时URL。
• 用临时URL重新注册Service Worker，手动触发更新与激活：

// 假设已从导入文件中获取新SW脚本内容newSwCode
const blob = new Blob([newSwCode], { type: 'application/javascript' });
const swUrl = URL.createObjectURL(blob);

navigator.serviceWorker.register(swUrl, { updateViaCache: 'none' })
  .then(async (registration) => {
    // 触发更新检查
    await registration.update();
    // 若有等待激活的Worker，通知其跳过等待直接激活
    if (registration.waiting) {
      registration.waiting.postMessage({ type: 'SKIP_WAITING' });
    }
    // 释放临时URL
    URL.revokeObjectURL(swUrl);
  });

• 注意：Blob URL与页面同源，现代浏览器均支持此注册方式；新Worker激活后需清理旧缓存，确保逻辑切换生效。

2. 动态加载可更新逻辑，避免更新Worker本体 #

将核心业务逻辑抽离为独立脚本，存储在Cache Storage或IndexedDB，原Service Worker仅作为加载器：

• 原Worker启动时从存储加载最新逻辑脚本，通过importScripts()动态导入。
• 导入新逻辑脚本后，通过postMessage通知Worker重新加载：

// 原Service Worker代码
self.addEventListener('install', (event) => {
  event.waitUntil(loadLatestLogic());
});

self.addEventListener('message', (event) => {
  if (event.data.type === 'UPDATE_LOGIC') {
    loadLatestLogic().then(() => {
      event.source.postMessage({ type: 'LOGIC_UPDATED' });
    });
  }
});

async function loadLatestLogic() {
  const cache = await caches.open('logic-cache');
  const response = await cache.match('latest-logic.js');
  if (response) {
    const blob = await response.blob();
    const url = URL.createObjectURL(blob);
    importScripts(url);
    URL.revokeObjectURL(url);
  }
}

• 此方式无需处理Worker注册更新流程，仅需替换逻辑脚本，适合长期离线场景的轻量化更新。

3. 直接修改已注册Worker脚本不可行 #

浏览器会严格校验已注册Service Worker的脚本哈希，一旦注册完成，无法直接修改已激活Worker的代码（出于安全防篡改考虑），必须通过注册新Worker完成替换。

内容的提问来源于stack exchange，提问作者JamesTheAwesomeDude