Flutter Web中如何配置Scope以同时激活多个Service Worker？

首先明确核心规则：同一作用域下只能存在一个活跃的Service Worker。你当前把自定义sw的作用域设为"/"，和Flutter默认生成的flutter_service_worker的默认作用域（根目录）完全重叠，浏览器必然会用新注册的sw覆盖旧的。

要让两者同时活跃，关键是给自定义Service Worker指定一个与根作用域不重叠的子路径作用域，具体操作如下：

• 给自定义sw创建专属子目录，比如/custom-sw/，将你的sw.js放入该目录（最终路径为/custom-sw/sw.js）。
• 修改注册代码，将作用域指定为这个子路径：

  navigator.serviceWorker.register("/custom-sw/sw.js", { scope: "/custom-sw/" });
  

设置完成后：

• flutter_service_worker会继续控制根目录"/"下的所有Flutter应用资源，保障原有PWA功能正常运行。
• 你的自定义sw仅会控制/custom-sw/路径下的请求，两者作用域完全分离，即可同时处于活跃状态。

如果不想移动sw.js的位置（仍放在根目录），也可以通过服务器配置给sw.js添加Service-Worker-Allowed: /custom-sw/响应头，告知浏览器允许根目录的sw控制指定子路径，但这种方式需要额外配置服务器，不如直接将sw放入子目录简单可靠。

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