URL含查询参数时如何将Service Worker注册到站点根路径

核心是显式指定不带查询参数、无末尾多余斜杠的绝对路径作为Service Worker作用域，同时动态适配不同部署环境的基路径，不要依赖默认作用域逻辑。

具体实现代码 #

// 动态计算部署基路径，优先用构建工具注入的基路径（比如Vite的import.meta.env.BASE_URL、webpack的publicPath）
// 没有构建注入的话用以下逻辑适配生产/本地staging场景
const getBasePath = () => {
  const { pathname } = window.location;
  // 本地开发匹配/Staged前缀，生产环境返回空字符串
  if (pathname.startsWith('/Staged')) return '/Staged';
  return '';
};

const initServiceWorker = async () => {
  if (!('serviceWorker' in navigator)) return;

  const basePath = getBasePath();
  // 构造SW脚本地址，适配不同部署路径
  const swUrl = `${basePath}/PWA/sw.js`;
  // 构造精确的scope：origin + 基路径，不带末尾斜杠、不带任何查询参数
  const expectedScope = `${window.location.origin}${basePath}`;

  // 先清理已注册的、scope不符合预期的旧SW
  const registrations = await navigator.serviceWorker.getRegistrations();
  for (const reg of registrations) {
    if (reg.scope !== expectedScope) {
      await reg.unregister();
    }
  }

  // 注册新SW，显式传入正确scope
  await navigator.serviceWorker.register(swUrl, {
    scope: expectedScope
  });
};

initServiceWorker();

关键说明 #

• 不要留空scope参数：空值会让SW默认继承当前注册页面的路径+查询参数，这就是URL带?isSearch=true时scope被串改的根本原因。
• 不要传相对路径/作为scope：相对路径/会被解析为带末尾斜杠的根路径（比如https://mypage.com/），不符合PWA安装的scope要求，直接传入完整绝对路径可以精确控制最终scope值，不带多余末尾斜杠。
• 基路径计算逻辑可以根据自己的项目调整：如果后续部署到其他子路径，只需要修改getBasePath逻辑即可，不需要改动其他注册代码；如果项目是Vite/Webpack构建的，优先用构建工具自动注入的基路径变量（比如Vite的import.meta.env.BASE_URL），适配性更强。
• 你已经配置了Service-Worker-Allowed响应头允许SW作用域超出/PWA/目录，上述代码不会触发跨作用域注册的权限报错。

注册完成后可以打开浏览器开发者工具，在「应用 - Service Worker」面板核对scope值，确认是预期的根路径即可。

内容的提问来源于stack exchange，提问作者Sammy I.