scope 仅定义 PWA 作用域边界，影响安装提示、start_url 解析和 SW 控制范围，不拦截导航；错误写法会导致安装失败或 SW 失效；限制导航需 JS + SW 配合前端路由实现。
manifest.json 的 scope 不限制导航，只影响安装上下文和 URL 匹配逻辑 —— 试图靠它“禁止跳转到 /admin”这类需求注定失败。
什么是 scope 的真实作用
scope 是一个 URL 路径前缀，用于定义 PWA 的「作用域边界」，它决定：
- 哪些页面能触发「添加到主屏幕」提示（仅当当前 URL 在
scope内时） - 用户从主屏幕启动 PWA 后，
start_url相对解析的基准路径 - Service Worker 控制页面的默认范围（若 SW 注册时未显式传
scope，则以 manifest 中的scope为 fallback）
它不拦截、不重定向、不阻止 location.href = '/admin' 或点击外部链接 —— 浏览器根本不检查这个字段做运行时导航控制。
scope 的常见错误写法与后果
写错 scope 值会导致 PWA 安装失败或 SW 失效，典型问题：
立即学习“前端免费学习笔记（深入）”；
-
"scope": "/app/"→ 实际访问https://example.com/app（无尾斜杠）时，可能不被识别为 scope 内 —— 必须确保 URL 路径严格匹配前缀 -
"scope": "/user"→ 会意外覆盖/users和/user-profile，因为前缀匹配不校验路径边界 -
"scope": "./"或"scope": ""→ 大多数浏览器拒绝解析，manifest 加载失败，PWA 退化为普通网页 - scope 超出 Service Worker 注册路径（如 SW 在
/sw.js注册，但scope: "/admin"）→ 浏览器直接报错Failed to register a ServiceWorker: The path of the provided scope ('/admin/') is not under the max scope allowed ('/')
想真正限制导航？得靠 JavaScript + Service Worker 配合
如果业务要求「用户从主屏幕打开后，不能离开 /shop 路径」，必须主动干预：
- 在页面 JS 中监听
beforeunload或popstate，检测location.pathname是否越界，越界则history.pushState回退或alert提示（注意：不能阻止所有跳转，比如新窗口或外链） - Service Worker 中拦截
fetch事件，对非/shop/*的导航请求返回Response.redirect('/shop')（仅对 fetch API 有效，对直接地址栏输入或 a 标签跳转无效） - 最关键的：把入口 HTML（
start_url指向的页面）本身做成单页应用（SPA），路由完全由前端控制，避免服务端返回跨 scope 的 HTML
例如，在 start_url: "/shop/index.html" 页面中，用 history.replaceState 确保初始 URL 就是 /shop/，后续所有跳转都走前端路由，不触发完整页面加载。
验证 scope 是否生效的实操方法
别只看 manifest 文件，要观察三处实际行为：
- 打开开发者工具 → Application → Manifest → 检查
Scope字段是否显示为预期值（注意：这里显示的是解析后的绝对 URL，不是原始字符串） - 访问
https://yoursite.com/some/path，看「添加到主屏幕」按钮是否出现 —— 仅当该 URL 在scope前缀内才显示 - 注册 Service Worker 后，访问
chrome://serviceworker-internals/，查看其Scope列是否与 manifest 中一致；如果不一致，说明注册时传了别的scope参数，manifest 被忽略
scope 是个静默的元数据字段，它不拦人，也不报错，只在安装和注册环节悄悄起效 —— 很多时候你以为它没用，其实是你没在对的地方观察它。
