Declarative Link Capturing 是 Chrome 128+ 为 PWA 提供的原生链接接管能力，需同时满足 manifest 中正确配置 scope 和 capture_links、链接符合 same-origin 且无 target/rel 绕过、Service Worker 已激活并控制页面。
Declarative Link Capturing 是 Chrome 128+（2024 年中起稳定支持）为 PWA 引入的原生能力，它能让已安装的 PWA 在用户点击符合规则的链接时，**自动接管导航、避免跳转到浏览器标签页**。但它的生效有明确前提：不是加个属性就管用，必须同时满足清单配置、作用域约束和声明规则三者。
manifest.json 中必须启用 scope 且匹配链接路径
PWA 的 scope 决定了它“有权捕获哪些链接”。如果 scope: "/app/"，那只有 href 以 /app/ 开头的链接才可能被捕获；scope: "/" 才能覆盖全站（但需确保 service worker 控制整个 origin）。常见错误是 scope 写成相对路径如 "./" 或遗漏结尾斜杠，导致匹配失败。
检查方式：打开 DevTools → Application → Manifest，确认 Scope 字段显示为绝对路径（如 https://example.com/app/），且与你要捕获的链接前缀一致。
-
scope必须是当前 origin 下的路径前缀，不能跨域 - 若
start_url是/app/index.html，scope至少应为/app/（注意末尾斜杠） - 不设
scope时默认为start_url所在目录，但行为不可靠，显式声明更安全
capture_links 声明必须写在 manifest.json 根级
不是 HTML 标签属性，也不是 JS 配置项——它只存在于 Web App Manifest 文件中，且是布尔值或对象形式：
基础写法（捕获所有同 scope 内链接）：
{
"capture_links": true
}
精细控制（推荐）：
{
"capture_links": {
"include": ["same-origin"],
"exclude": ["/external/", "/blog/"]
}
}
include 支持 "same-origin"（默认）、"cross-origin"（需额外权限）；exclude 是路径前缀数组，优先级高于 include。漏写 "capture_links" 或拼错字段名（比如写成 "captureLinks"）都会让功能静默失效。
链接本身需满足 same-origin 且未被 target 或 rel 显式绕过
即使 manifest 配置正确，以下情况仍会强制走浏览器默认行为：
- 链接带
target="_blank"、target="_new"等非_self值 - 链接含
rel="external"、rel="noreferrer"（部分 UA 会据此跳过捕获） - href 是 mailto:、tel:、blob:、data: 等非 HTTP(S) 协议
- 用户按住 Ctrl / Cmd 键点击（系统级 bypass）
特别注意：rel="noopener" 本身不阻止捕获，但若和 target="_blank" 同时出现，则因 target 规则失效；PWA 捕获只对 target="_self"（或省略 target）生效。
Service Worker 必须已激活并控制页面
Declarative Link Capturing 依赖 service worker 的生命周期。如果 SW 注册成功但未激活（例如旧版本还在控制页面），或页面未被 SW 控制（navigator.serviceWorker.controller 为 null），链接仍会回退到浏览器打开。
验证方法：
console.log(navigator.serviceWorker.controller); // 应返回 ServiceWorker 对象
容易被忽略的点：本地开发时若用 http://localhost 但 SW 注册在 https:// 上，或使用文件协议（file://），均不满足 PWA 安装条件，capture_links 直接不加载。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
