scope 必须匹配 start_url 的路径前缀，即 start_url 必须位于 scope 所定义的路径范围内；scope 决定 pwa 安装边界、fetch 拦截范围及相对 url 解析基准，不匹配将导致 service worker 注册失败或功能异常。
scope 配置必须匹配 start_url 路径前缀
scope 的作用不是“限制页面能访问哪些资源”，而是划定 PWA 的「安装边界」——浏览器只会在该路径下触发安装提示，且所有相对 URL（比如导航、fetch 请求）都以 scope 为基准解析。如果 scope 和 start_url 不匹配，Chrome 会直接拒绝注册 Service Worker，控制台报错：The provided scope ('/') does not match the current page location ('/app/')。
常见错误是把 scope 设成 /app 却把 start_url 写成 /app/index.html。正确做法是让 start_url 落在 scope 路径内，且两者同级目录结构一致：
-
scope: "/app/"→start_url: "/app/"或"/app/index.html"（合法） -
scope: "/app"（缺尾部斜杠）→start_url: "/app/index.html"（Chrome 会自动补斜杠，但行为不稳定，不推荐） -
scope: "/"→start_url: "/app/"（非法：/app/ 不在 / 的子路径下？等等，其实是合法的 —— /app/ 是 / 的子路径；但反过来说，scope: "/app"就不能配start_url: "/"）
scope 决定 fetch 事件拦截范围
Service Worker 的 fetch 事件只对 scope 范围内的请求生效。比如你注册时写 navigator.serviceWorker.register('/sw.js', { scope: '/app/' })，那么只有以 /app/ 开头的请求（如 /app/api/data、/app/assets/logo.png）才会进你的 fetch 监听器；而 /api/ 或 /assets/ 就不会。
这意味着：如果你希望缓存全局 API，又不想把 scope 设太宽（比如设成 / 可能影响其他子应用），就得要么调整 scope，要么用 importScripts 在 SW 里主动 fetch 外部域名，但后者绕过了 scope 机制，不被 install/activate 流程管理。
- scope 越窄，SW 控制力越局部，越安全
- scope 越宽（比如
/），越容易和同域其他 PWA 冲突，尤其当它们各自有独立的sw.js - 修改 scope 后必须彻底卸载旧 SW：调用
registration.unregister()，否则新 scope 不生效
manifest.json 中的 scope 必须与 register 时一致
Manifest 里的 scope 字段只是声明，真正起作用的是 JS 注册时传入的 scope 参数。两者不一致时，Chrome 以 JS 注册为准，但 Lighthouse 等工具会警告「manifest scope doesn’t match registration scope」。
manifest 示例（注意字符串结尾斜杠）：
{
"name": "My PWA",
"start_url": "/app/",
"scope": "/app/",
"display": "standalone"
}
对应注册代码必须同步：
navigator.serviceWorker.register('/app/sw.js', {
scope: '/app/'
});
- manifest 中
scope缺少结尾斜杠（如"/app"）会导致 Lighthouse 报 warning，尽管运行时可能不报错 - 若站点部署在子路径（如
https://example.com/my-pwa/），则scope应为/my-pwa/，start_url为/my-pwa/，sw.js路径也要相应改为/my-pwa/sw.js
本地开发时 scope 容易因端口/路径错配失效
用 http://localhost:3000 开发时，如果 scope: "/app/"，那你的页面必须在 http://localhost:3000/app/ 下打开，否则注册失败。很多人直接开 http://localhost:3000/，结果 SW 根本没注册成功，还以为代码有问题。
调试建议：
- 打开
chrome://serviceworker-internals/，看是否显示 “Waiting for update”, “Active”, 或 “Redundant” - 检查 Application → Service Workers 面板，确认 scope 列显示的值是否符合预期
- 在页面中执行
navigator.serviceWorker.getRegistration()，打印返回对象的scope属性，比看 manifest 更可靠
scope 看似简单，实际是 PWA 安装、路由拦截、缓存策略的隐性开关；一旦设错，问题往往不报错，只表现为“不弹安装按钮”或“离线白屏”，排查起来反而更耗时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
