如何利用HTML的manifest.json的scope限制PWA的导航范围到指定路径-html教程-PHP中文网

scope 仅定义 pwa 作用域边界，影响安装提示、start_url 解析和 sw 控制范围，不拦截导航；错误写法会导致安装失败或 sw 失效；限制导航需 js + sw 配合前端路由实现。

如何利用html的manifest.json的scope限制pwa的导航范围到指定路径

manifest.json 的 scope 不限制导航，只影响安装上下文和 URL 匹配逻辑 —— 试图靠它“禁止跳转到 /admin”这类需求注定失败。

scope 是一个 URL 路径前缀，用于定义 PWA 的「作用域边界」，它决定：

哪些页面能触发「添加到主屏幕」提示（仅当当前 URL 在 scope 内时）
用户从主屏幕启动 PWA 后，start_url 相对解析的基准路径
Service Worker 控制页面的默认范围（若 SW 注册时未显式传 scope，则以 manifest 中的 scope 为 fallback）

它不拦截、不重定向、不阻止 location.href = '/admin' 或点击外部链接 —— 浏览器根本不检查这个字段做运行时导航控制。

写错 scope 值会导致 PWA 安装失败或 SW 失效，典型问题：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

"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 ('/')

如果业务要求「用户从主屏幕打开后，不能离开 /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/，后续所有跳转都走前端路由，不触发完整页面加载。

别只看 manifest 文件，要观察三处实际行为：

打开开发者工具 → Application → Manifest → 检查 Scope 字段是否显示为预期值（注意：这里显示的是解析后的绝对 URL，不是原始字符串）
访问 https://yoursite.com/some/path，看「添加到主屏幕」按钮是否出现 —— 仅当该 URL 在 scope 前缀内才显示
注册 Service Worker 后，访问 chrome://serviceworker-internals/，查看其 Scope 列是否与 manifest 中一致；如果不一致，说明注册时传了别的 scope 参数，manifest 被忽略

scope 是个静默的元数据字段，它不拦人，也不报错，只在安装和注册环节悄悄起效 —— 很多时候你以为它没用，其实是你没在对的地方观察它。