将导航管理功能集成到已安装的 PWA 中

Demián Renzulli
Demián Renzulli
X GitHub
Dan Murphy
Dan Murphy
X LinkedIn
Dibyajyoti Pal
Dibyajyoti Pal
LinkedIn
Vincent Scheib
Vincent Scheib
LinkedIn

发布时间：2025 年 8 月 19 日

导航管理包含用于控制渐进式 Web 应用 (PWA) 如何处理用户导航的方法。其中一个关键组件是导航捕获，即浏览器进程，用于确定点击链接后是应启动已安装的 PWA 还是打开新的浏览器标签页。

本指南介绍了从 Chrome 139 开始提供的新版导航捕获功能。 虽然浏览器默认行为适用于大多数情况，但如果您想为用户打造最流畅的体验，就必须深入了解这些内存管理技巧及其相关 API。

开发者控制部分介绍了如何自定义导航，以便为 PWA 提供尽可能出色的启动体验。

新版默认行为

为了与用户偏好保持一致并减少阻力，Chrome 正在标准化其处理链接的方式。之前，各平台上的行为不一致。 移动设备通常优先启动已安装的应用，而桌面浏览器会先在标签页中打开链接，然后再发出信号表明应用可以处理该链接。

新的统一导航捕获方法会自动在相应已安装的 PWA 中打开链接。仅当 PWA 未安装或用户已选择停用时，链接才会回退到浏览器标签页。此新行为已在 Chrome 139 中推出，适用于 Windows、Mac 和 Linux，ChromeOS 支持将在未来的版本中推出。

点击链接会选择已安装的 PWA（如果有），否则会在浏览器标签页中打开目标网页。
从 Chrome 139 开始，新的导航捕获行为会优先启动已安装的 PWA。

导航捕获是导航管理流程的一部分。此流程涵盖了整个流程，从用户的初始操作到浏览器的决策，再到开发者配置的最终行为：

  • 用户操作：包括点击或点按链接等互动。
  • 浏览器决策：包括由浏览器管理的任务和决策，例如默认行为（如导航捕获）。
  • 开发者控件：包含 Web API，可让开发者指示浏览器如何处理特定任务。

这些元素的相互作用决定了 PWA 是在独立窗口中打开还是在浏览器标签页中打开。

导航管理是用户操作、浏览器决策和开发者控制的结果。

一个基本的导航管理使用情形是，当用户在浏览器中从另一个网页点击或点按指向已安装 PWA 的链接时。以下示例演示了用户安装 Google Chat PWA 后，点击 Google 日历邀请中的相应链接的情况。

用户从 calendar.google.com 点击指向 chat.google.com（作为 PWA 安装）的链接。

用户操作

每项用户操作都包含三个关键要素：事件（例如点击或点按）、发生事件的界面（例如网页或桌面快捷方式）以及正在激活的链接类型（例如 HTTPS 网址）。例如，用户在 calendar.google.com 上的网页中点击链接，在 Google Chat PWA 的范围内执行 https://chat.google.com/meeting_room_id 操作。

浏览器决策

当用户执行操作（例如点击上一步中的内容）时，浏览器会运行导航捕获流程，以确定链接应在浏览器标签页中打开还是在已安装的 PWA 中打开。它包含以下步骤：

  1. 确定导航是否可捕获：一般来说，如果导航会创建新框架，但不会在辅助浏览会话中打开，则视为可捕获。
  2. 确定控制 PWA：如果导航可捕获，浏览器会尝试查找“控制”相应网址的 PWA（位于其 Web 应用清单中定义的范围内）。
  3. 验证用户偏好设置：如果找到控制 PWA，浏览器会检查用户偏好设置。如果用户未在应用设置中选择停用，系统会启动 PWA；否则，链接会在新的浏览器标签页中打开。
  4. 启动 PWA：浏览器使用启动处理算法启动 PWA。您可以使用下一部分介绍的 Launch Handler API 来影响此行为。

下图总结了此流程：

图片
导航捕获：浏览器执行的步骤，用于确定在用户操作后是在浏览器标签页中打开链接还是启动 PWA。

开发者控制

虽然导航过程主要依赖于浏览器默认设置和用户设置，但您可以使用各种 API 来管理该过程的特定方面。在最近的导航捕获更新之后，一些长期存在的 Web API 变得更加相关。

启动处理程序 API

当浏览器决定启动 PWA 时，此 API 会发挥作用，让您控制 PWA 的启动方式，例如在新窗口或现有窗口中启动。

PWA 可以通过聚焦现有窗口或打开新窗口来启动。
启动处理程序 API：可用于确定 PWA 的启动方式。

通过 Web 应用清单中的 launch_handler 成员定义 PWA 的启动方式，该成员包含一个名为 client_mode 的子字段。此子字段用于确定应使用新窗口还是现有窗口，以及是否应进行导航。允许的 client_mode 值包括：

  • focus-existing：在现有应用窗口中处理链接，例如已在独立模式下运行的 PWA。
  • navigate-existing：在此选项中，系统会将网页应用窗口中最近一次互动过的浏览上下文导航到启动的目标网址。
  • navigate-new：使用此选项可在 Web 应用窗口中创建一个新的浏览上下文，以加载启动的目标网址。

使用 launchQueue API 提供其他参数并处理特殊情况。 Launch Handler API 可从 Chrome 110 开始使用，但在导航捕获更新后变得更加有用。如需了解详情，请参阅 Launch Handler API 文档。

其他相关 API

除了启动处理之外，其他 API 也可以在此过程中发挥作用，具体取决于应用的特定需求。其中包括 网址 协议处理程序，该处理程序允许 Web 应用注册其处理标准 http 和 https 以外的网址方案（例如，mailto: 等标准协议或 web+music 等自定义协议）的能力。此外，Web 应用范围扩展 API（目前正在开发中）可让您扩展 PWA 的范围，以捕获来自其他来源（包括子网域）的链接，以便在用户点击相关来源的链接时启动 PWA。深入介绍这些主题超出了本文的范围，但您可以查看相应链接了解详情。

最后，我们来看一个示例，了解各个部分如何协同工作：用户点击指向 Google Chat 室的 Google 日历链接，前提是该用户已安装 Google Chat PWA。

导航捕获之前

在以下视频中，用户创建了 Google 日历会议并邀请了三位嘉宾。日历应用会自动生成包含所有参与者的 Google Chat 链接。当用户点击此链接时，聊天室会在新的浏览器标签页中打开。地址栏中的图标随后会指示已安装相应的 PWA，但需要用户手动启动该 PWA。这是在导航捕获更新之前的行为：

导航捕获后

以下视频展示了相同的用户工作流，但现在采用了新的导航捕获行为。在此版本中，如果从 Google 日历中点击 Google Chat 链接，系统会直接在已安装的 PWA 中打开相应的聊天室。此外，Google Chat 团队还通过向 Web 应用清单添加 launch_handler 属性实现了启动处理。通过将其 client_mode 设置为 focus-existing，他们可以确保链接在 PWA 的现有实例中打开（如果该实例已在运行）。通过消除打开新浏览器标签页然后触发网页加载所涉及的延迟，有效“用户互动时间”可以更快。事实上，Google Chat 通过无需启动新应用，显著缩短了导航延迟时间。

总结和后续行动

本文探讨了 Chrome 139 中提供的新默认导航捕获行为，重点介绍了用户点击已安装 PWA 范围内的 HTTPS 链接这一常见用例。如需了解更多信息和使用情形，请参阅将导航管理纳入已安装的 PWA。下图显示了用例的完整细分，包括用户事件、界面和协议，以及它们对应的结果：

文章中介绍了不同的步骤。
导航捕获图（完整版）

导航管理是应用用户体验中至关重要但经常被忽视的一个方面，因为它控制着应用的入口点。本文中介绍的功能和链接可帮助您为 PWA 实现尽可能出色的类应用体验。