如何为ServiceWorker注册方法新增作用域（原单作用域扩展）

嘿，这个场景我之前做项目时碰到过，给你分享两种靠谱的解决方案，完全避开用./的坑：

首先得记住：Service Worker的作用域受它本身文件位置的限制——默认情况下，SW文件所在的目录就是它能控制的最大作用域。比如你的原SW如果在/src/目录下，那它最多只能管/src/及其子路径的资源，没法直接覆盖/resource/（除非你改服务器配置，不过不推荐）。所以先根据你的文件结构选方案：

方案一：用同一个根目录SW注册多个作用域 #

如果愿意把SW文件移到站点根目录（比如/sw.js），那它的最大作用域就是整个站点，这时你可以直接注册两个不同的作用域：

// 保留原有的/src/作用域注册
navigator.serviceWorker.register('/sw.js', { scope: '/src/' })
  .then(registration => {
    console.log('管理/src/的SW注册成功:', registration);
  });

// 新增/resource/作用域的注册
navigator.serviceWorker.register('/sw.js', { scope: '/resource/' })
  .then(registration => {
    console.log('管理/resource/的SW注册成功:', registration);
  });

这样同一个SW会分别以两个作用域运行，各自处理对应路径下的资源请求，完全不会生成庞大的资源集合。

方案二：为新作用域单独部署SW文件 #

如果不想移动原有的SW（比如/src/sw.js），那可以在/resource/目录下新建一个专门的SW文件（比如/resource/resource-sw.js），然后单独注册它：

// 原有的/src/作用域注册不变
navigator.serviceWorker.register('/src/sw.js', { scope: '/src/' })
  .then(reg => console.log('原SW注册成功'));

// 注册新的/resource/作用域SW
navigator.serviceWorker.register('/resource/resource-sw.js', { scope: '/resource/' })
  .then(reg => console.log('/resource/专属SW注册成功'));

这个方案的好处是两个SW完全独立，各自管理自己的作用域，不会互相干扰，也不需要改动服务器配置。

• 绝对不要用./作为作用域，正如你担心的，它会把SW所在目录下的所有资源都纳入控制范围，资源量会爆炸。明确指定/src/、/resource/这种具体路径才是正确做法。
• 如果实在不想移动原SW又想让它控制/resource/，可以在服务器上配置Service-Worker-Allowed HTTP头，允许/src/sw.js的作用域扩展到/resource/，但这属于突破默认安全限制，一般不建议这么做。

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