使用声明式链接捕获功能,选择报告范围内的链接如何打开 PWA

什么是声明式链接捕获?

点击网页上的链接有时会带来惊喜。例如,在移动设备上点击指向 YouTube 的网页链接会打开 YouTube iOS 或 Android 应用(如果已安装)。不过,如果您在桌面设备上安装 YouTube PWA 并点击链接,链接会在浏览器标签页中打开。

但情况会变得更复杂。如果链接不是出现在网站上,而是出现在您在 Google 的某款聊天应用中收到的聊天消息中,该怎么办?在具有单独应用窗口概念的桌面操作系统中,如果应用已打开,是否应针对每次点击链接创建一个新窗口或标签页?仔细想想,您会发现可以通过多种方式捕获链接和导航,包括但不限于:

声明式链接捕获是对名为 "capture_links" 的 Web 应用清单属性的提案,可让开发者以声明方式确定在浏览器从导航范围之外的上下文中被要求导航到应用导航范围内的网址时,应发生的情况。如果用户已位于导航范围内(例如,如果用户打开了一个位于范围内的浏览器标签页,然后点击了内部链接),则此提案不适用。

某些特殊情况(例如中键点击链接,或右键点击后选择“在新标签页中打开”)通常不会触发链接捕获行为。链接是 target=_self 还是 target=_blank 无关紧要,因此,在浏览器窗口(或其他 PWA 的窗口)中点击的链接会在 PWA 中打开,即使它们通常会在同一标签页中进行导航也是如此。

建议的使用场景

可能使用此 API 的网站示例包括:

  • 当用户点击指向其的链接时,希望打开窗口(而非浏览器标签页)的 PWA。在桌面环境中,同时打开多个应用窗口通常很有用。
  • 单窗口 PWA:开发者希望应用在任何时候都只打开一个实例,并且新的导航会将焦点集中在现有实例上。子用例包括:
    • 仅应运行一个实例的应用(例如音乐播放器、游戏)。
    • 在单个实例中包含多文档管理功能的应用(例如,使用 HTML 实现的标签页条)。

通过 about://flags 启用

如需在本地实验声明式链接捕获(无需来源试用令牌),请在 about://flags 中启用 #enable-desktop-pwas-link-capturing 标志。

如何使用声明式链接捕获?

开发者可以利用额外的 Web 应用清单字段 "capture_links" 以声明方式确定应如何捕获链接。它接受字符串或字符串数组作为值。如果指定字符串数组,则用户代理会选择列表中第一个受支持的项,默认为 "none"。支持使用以下值:

  • "none"(默认):不捕获链接;点击的链接会照常导航到此 PWA 范围,而不会打开 PWA 窗口。
  • "new-client":点击的每个链接都会在该网址打开一个新的 PWA 窗口。
  • "existing-client-navigate":点击的链接会在新窗口中打开(如果有),或在现有 PWA 窗口中打开(如果没有)。如果存在多个 PWA 窗口,浏览器可能会任意选择一个。如果当前没有打开任何窗口,则此值的行为类似于 "new-client"。🚨 注意!此选项可能会导致数据丢失,因为用户可以随意离开网页。网站应注意,选择此选项即表示他们选择启用此类行为。此选项最适合不会在内存中存储用户数据的“只读”网站,例如音乐播放器。如果要离开的页面包含 beforeunload 事件,用户会在导航完成之前看到提示。

演示

声明式链接捕获演示实际上由两个相互交互的演示组成:

  1. https://continuous-harvest-tomato.glitch.me/
  2. https://hill-glitter-tree.glitch.me/

以下屏幕录制内容展示了这两者之间的交互方式。它们会显示两种不同的行为,即 "new-client""existing-client-navigate"。请务必在不同状态(在标签页中运行或作为已安装的 PWA 运行)下测试应用,以了解行为差异。

安全与权限

Chromium 团队使用控制对强大 Web 平台功能的访问权限中定义的核心原则(包括用户控制、透明度和人体工学)设计和实现了声明式链接捕获。此 API 为网站提供了新的控制选项。首先,能够在窗口中自动打开已安装的应用。这会使用现有界面,但可让网站自动触发该界面。第二,能够将现有窗口的焦点放在自己的网域上,并触发包含点击的网址的事件。这是为了允许网站将现有窗口导航到新页面,从而替换默认的 HTML 导航流程。

迁移到 Launch Handler API

Declarative Link Capturing API 源试用已于 2022 年 3 月 30 日过期,适用于 Chromium 97 及更低版本。在 Chromium 98 及更高版本中,它将被一组新功能和 API 取代,其中包括用户启用的链接捕获和 Launch Handler API

在 Chromium 98 中,自动捕获链接现在是用户选择启用的行为,而不是在安装时向 Web 应用授予的权限。如需启用链接捕获功能,用户需要使用打开方式从浏览器启动已安装的应用,然后选择记住我的选择

已安装应用的“打开方式”设置示例,其中启用了“记住我的选择”选项。

或者,用户可以在应用管理设置页面中为特定 Web 应用开启或关闭链接捕获功能。

已安装应用的设置页面示例。

链接截取功能目前仅适用于 ChromeOS;我们正在开发适用于 Windows、macOS 和 Linux 的版本。

Launch Handler API

传入导航的控制已迁移到 Launch Handler API,这让 Web 应用能够决定 Web 应用在各种情况下(例如链接捕获、共享目标或文件处理等)的启动方式。如需从声明式链接捕获 API 迁移到 Launch Handler API,请执行以下操作:

  1. 为您的网站注册启动处理程序源试用,并将源试用密钥放入您的 Web 应用中。
  2. "launch_handler" 条目添加到您网站的清单中。

    • 如需使用 "capture_links": "new-client",请添加:"launch_handler": { "route_to": "new-client" }
    • 如需使用 "capture_links": "existing-client-navigate",请添加:"launch_handler": { "route_to": "existing-client-navigate" }
    • 如需使用 "capture_links": "existing-client-event"(从未在声明式链接捕获来源试用版中实现),请添加:"launch_handler": { "route_to": "existing-client-retain" }。启用此选项后,在捕获链接导航时,应用范围内的页面将不再自动导航。您必须通过调用 window.launchQueue.setConsumer() 在 JavaScript 中处理 LaunchParams,才能启用导航。

capture_links 字段和声明式链接捕获来源试用注册有效期为 2022 年 3 月 30 日。这将确保使用 Chromium 97 及更低版本的用户仍可通过捕获的链接启动 Web 应用。

如需了解详情,请参阅控制应用的启动方式

反馈

Chromium 团队希望了解您使用声明式链接捕获的体验。

请向我们说明 API 设计

API 是否有某些方面未按预期运行?或者,您是否缺少实现想法所需的方法或属性?对安全模型有疑问或意见?在相应的 GitHub 代码库中提交规范问题,或在现有问题中添加您的想法。

报告实现方面的问题

您是否发现了 Chromium 实现中的 bug?或者实现方式是否与规范不同? 请访问 new.crbug.com 提交 bug。请务必提供尽可能详细的信息、简单的重现说明,并在 Components 框中输入 UI>Browser>WebAppInstalls故障非常适合分享快速简便的重现步骤。

显示对该 API 的支持

您是否打算使用声明式链接捕获?您的公开支持有助于 Chromium 团队确定功能的优先级,并向其他浏览器供应商表明支持这些功能的重要性。

使用 ##DeclarativeLinkCapturing 标签向 @ChromiumDev 发送推文,告诉我们您在哪里使用该工具以及使用方式。

实用链接

致谢

Matt Giuca 在 Alan Cutter 和 Dominick Ng 的协助下,指定了声明式链接捕获。该 API 由 Alan Cutter 实现。本文由 Joe Medley、Matt Giuca、Alan Cutter 和 Shunya Shishido 审核。主打图片:Unsplash 上的 Zulmaury Saavedra