如何在不修改Service Worker脚本URL的情况下向其传递参数？

你提到的带动态版本参数的注册方式确实存在弊端：浏览器会将不同参数的sw.js视为独立资源，既不利于缓存复用，也会增加更新管理的复杂度。以下是几种更合理的静态URL版本控制方案，能覆盖所有事件场景：

1. 在Service Worker内部嵌入版本标识 #

直接在sw.js中定义版本常量（可通过构建工具自动注入，或手动更新），结合安装/激活事件完成缓存的版本管理：

// sw.js
const CACHE_VERSION = 'v2';
const CACHE_NAME = `app-cache-${CACHE_VERSION}`;

// 安装阶段：缓存新资源并跳过等待
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll([
        '/index.html',
        '/styles.css',
        '/script.js'
      ]))
      .then(() => self.skipWaiting())
  );
});

// 激活阶段：清理旧版本缓存并接管所有客户端
self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.filter(name => !name.includes(CACHE_VERSION))
          .map(oldCache => caches.delete(oldCache))
      );
    }).then(() => self.clients.claim())
  );
});

这种方案下，sw.js的URL始终是静态的/sw.js。当需要更新时，只需修改CACHE_VERSION的值，浏览器检测到sw.js内容变化后，会自动触发安装→激活的更新流程，确保所有后续事件使用最新缓存策略。

2. 利用构建工具生成哈希文件名 #

通过Webpack、Vite等构建工具，为sw.js生成带内容哈希的文件名（如sw.7f9d2a.js），同时在注册脚本中自动引用该哈希文件名。每次sw.js内容变更，哈希值就会更新，浏览器会自动识别为新资源并触发更新。

注册脚本示例（构建后自动替换文件名）：

const registration = await navigator.serviceWorker.register("/sw.7f9d2a.js", {
  scope: '/',
  type: 'module',
});

构建工具会自动维护哈希与文件引用的一致性，还能配合静态资源的长期缓存策略，提升加载效率。

3. 主动触发Service Worker更新 #

如果坚持使用静态/sw.js，可以在客户端主动检查更新，比如页面初始化时或用户触发更新操作时调用：

async function checkSWUpdate() {
  const registration = await navigator.serviceWorker.getRegistration();
  if (registration) {
    const hasUpdate = await registration.update();
    if (hasUpdate) {
      console.log('检测到新版本Service Worker，正在更新');
      // 可选：提示用户刷新页面以启用新版本
    }
  }
}

// 页面加载时检查更新
window.addEventListener('load', checkSWUpdate);

配合sw.js内部的版本缓存清理逻辑（方案1），可以在不修改URL的情况下触发更新。同时建议在服务器端为sw.js设置缓存头：Cache-Control: no-cache，确保浏览器每次都检查最新的sw.js内容，避免因缓存导致更新延迟。

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