scope 定义 pwa 的生效路径前缀，必须为合法相对 url 且不越级；需与 start_url 构成父子路径关系，并与 service worker 注册 scope 一致，否则导致离线失效或安装失败。
scope 配置决定 PWA 能“管到”哪些页面
scope 是 manifest.json 中一个关键字段，它不是控制安装行为的开关，而是定义这个 PWA 在浏览器中“生效边界”的路径前缀。只要用户访问的 URL 路径以 scope 值为前缀，PWA 的 Service Worker 就有机会接管该页面（前提是 SW 已注册且匹配该路径）。如果路径超出 scope，即使页面在同一个域名下，SW 也不会被触发，也就不会离线缓存、不会显示添加提示、不会使用 manifest 中的图标和名称。
scope 必须是相对路径，且不能向上越级
scope 值必须是合法的相对 URL（不带协议、不带域名），且不能包含 ../ 这类向上跳转的段。浏览器会直接拒绝解析含非法 scope 的 manifest，并忽略整个文件。
-
"scope": "/"—— 允许接管整个站点（最常用，也最安全） -
"scope": "/app/"—— 只对/app/xxx、/app/sub/page.html等路径生效 -
"scope": "/blog"—— 注意：不带尾部/时，/blog-post也会被错误匹配（这是常见陷阱） -
"scope": "../"或"scope": "https://example.com/"—— 直接无效，manifest 加载失败
scope 和 start_url 必须同域且 scope 是 start_url 的父路径
这两个字段必须满足路径包含关系：start_url 的路径必须落在 scope 定义的范围内。否则 Chrome 会报错 The provided start_url '/login' is outside the scope of the current service worker ('/app/')，导致 PWA 无法安装。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 若
scope: "/app/"，则start_url: "/app/index.html"✅ - 若
scope: "/app/"，则start_url: "/index.html"❌（超 scope） - 若
scope: "/"，则start_url: "/login"✅（推荐新手从这个组合起步）
Service Worker 注册路径影响 scope 实际生效范围
scope 的最终作用范围，还受 navigator.serviceWorker.register() 时传入的 scope 参数或脚本路径隐式推导的影响。如果 JS 文件放在 /sw.js，但你在 /app/index.html 中执行 navigator.serviceWorker.register('/sw.js')，浏览器默认将 scope 设为 /app/ —— 这会覆盖 manifest 中的 scope！
- 显式指定更安全：
navigator.serviceWorker.register('/sw.js', { scope: '/' }) - 确保 SW 文件可被 scope 路径下的所有页面 fetch 到（比如
scope: "/app/"时，/sw.js必须能被/app/下页面访问，否则注册失败） - 开发时用
localhost测试没问题，但上线后若部署在子路径（如https://site.com/my-pwa/），必须同步调整scope和sw.js路径，否则白屏或离线失效
scope 看似只是个字符串，但它实际划定了 PWA 的“管辖地界”。写错一个斜杠、漏掉一个尾部 /、或没对齐 SW 注册路径，都可能让整个离线能力静默失效——而这种问题往往没有明显报错，只表现为“点了添加却没反应”或“断网后页面空白”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
