PWA 的网址协议处理程序注册

让已安装的 PWA 处理使用特定协议的链接，以提供更完整的体验。

Thomas Steiner

架构（也称为协议）背景

统一资源标识符 (URI) 是标识 抽象资源或物理资源每个 URI 都以 scheme 名称，用于指代 分配标识符。因此，URI 语法是一种联合的可扩展语法， 其中每个架构的规范都可以进一步限制 标识符。协议也称为协议。您可以看到一些 架构。

tel:+1-816-555-1212
mailto:Jane.Doe@example.com
news:comp.infosystems.www.servers.unix
https://web.dev/

术语统一资源定位符 (网址) 是指除了 识别资源，提供通过描述资源主要访问权限来查找资源的方法 （例如其网络位置）。

registerProtocolHandler() 方法的背景

Secure-content-only Navigator 方法 registerProtocolHandler() 允许网站注册其打开或处理特定网址协议的能力。因此，网站需要 按如下方式调用该方法：navigator.registerProtocolHandler(scheme, url)。这两个参数为 定义如下：

  • scheme：一个字符串，其中包含网站希望处理的协议。
  • url：包含处理程序网址的字符串。此网址必须包含作为占位符的 %s 将被替换为要处理的转义网址。

架构必须是 已列入安全名单的方案 （例如 mailto、bitcoin 或 magnet），或者以 web+ 开头，后跟至少一个或 web+ 前缀后面更多小写的 ASCII 字母，例如 web+coffee。

为便于您理解，下面给出了一个具体的流程示例：

  1. 用户访问位于 https://coffeeshop.example.com/ 的网站，该网站会进行以下调用： navigator.registerProtocolHandler('web+coffee', 'coffee?type=%s')。
  2. 稍后，在访问 https://randomsite.example.com/ 时，用户点击了某个链接 例如 <a href="web+coffee:latte-macchiato">All about latte macchiato</a>。
  3. 这会使浏览器转到以下网址： https://coffeeshop.example.com/coffee?type=web%2Bcoffee%3A%2F%2Flatte-macchiato。搜索 字符串经过网址解码后读取，然后读取 ?type=web+coffee://latte-macchiato。

什么是协议处理

目前 PWA 的网址协议处理程序注册机制是关于提供协议处理程序的。 通过其清单注册为 PWA 安装的一部分。将 PWA 注册为 协议处理程序的情况下，当用户点击具有特定架构（例如 mailto）的超链接时， bitcoin 或 web+music，则已注册的 PWA 将打开 并接收网址需要注意的是，提议的基于清单的注册和 传统的 registerProtocolHandler() 在实践中扮演着非常相似的角色， 从而实现相辅相成的用户体验：

  • 相似之处包括关于允许注册的方案列表的要求，以及 参数的名称和格式等
  • 基于清单的注册存在细微差别，但可能有助于增强 为 PWA 用户提供更优质的体验。例如，基于清单的 PWA 注册可能不需要 除用户发起的 PWA 安装之外的额外用户操作。

使用场景

  • 在文字处理 PWA 中，用户在文档中会看到指向演示文稿的链接，例如 web+presentations://deck2378465。当用户点击链接时，演示文稿 PWA 会自动在正确的范围内打开并显示幻灯片。
  • 在平台专用的聊天应用中，聊天消息中的用户会收到指向 magnet 网址的链接。 点击链接后，系统会启动已安装的 Torrent PWA，并开始下载。
  • 用户安装了音乐在线播放 PWA。当朋友分享如下歌曲的链接时 web+music://songid=1234&time=0:13 且用户点击它时，音乐在线播放 PWA 将 以便在一个独立窗口中自动启动

如何为 PWA 使用网址协议处理程序注册

用于网址协议处理程序注册的 API 紧密模拟于 navigator.registerProtocolHandler()。这一次，信息通过 名为 "protocol_handlers" 的新属性中的 Web 应用清单，该属性接受一个 具有两个必需键 "protocol" 和 "url" 的对象。以下代码段展示了如何 注册 web+tea 和 web+coffee。值是包含带有 转义网址所需的 %s 占位符。

{
  "protocol_handlers": [
    {
      "protocol": "web+tea",
      "url": "/tea?type=%s"
    },
    {
      "protocol": "web+coffee",
      "url": "/coffee?type=%s"
    }
  ]
}

多个应用注册相同的协议

例如，如果多个应用将自己注册为同一架构的处理程序， mailto 协议，操作系统将向用户显示一个选择器，并让用户决定 需要使用的已注册处理程序

同一应用注册了多种协议

如上述代码示例所示，同一应用可以自行注册多个协议。

应用更新和处理程序注册

处理程序注册与应用提供的最新清单版本同步。那里 是两种情况：

  • 添加新处理程序的更新会触发处理程序注册（独立于应用安装）。
  • 移除处理程序的更新会触发处理程序取消注册（与应用分开） 卸载）。

在开发者工具中调试协议处理程序

前往 Application > Protocol Handlers（协议处理程序）部分Manifest 窗格。您可以 在此处查看和测试所有可用的协议

例如，安装此演示版 PWA。在 协议处理程序部分中，输入“americano”然后点击测试协议以打开咖啡页 在 PWA 中使用。

“Manifest”（清单）窗格中的协议处理程序

演示

您可以在 Glitch 上查看 PWA 的网址协议处理程序注册演示。

  1. 前往 https://protocol-handler.glitch.me/，安装 PWA，并在安装后重新加载应用。现在，浏览器已将 PWA 注册为 web+coffee 协议的处理程序。
  2. 在已安装的 PWA 窗口中，点击链接 https://protocol-handler-link.glitch.me/.这将 打开包含三个链接的新浏览器标签页。点击第一个或第二个（拿铁玛奇朵，或 americano）。现在，浏览器将显示提示，并询问您是否同意该应用 协议处理程序。web+coffee如果您同意，PWA 将打开并显示 选择咖啡。
  3. 如要与使用 navigator.registerProtocolHandler() 的传统流程进行比较，请点击 PWA 中的注册协议处理程序按钮。然后在浏览器标签页中点击第三个链接 （印度奶茶）。它同样会显示提示，但会在标签页（而不是浏览器窗口）中打开 PWA。
  4. 在特定于平台的应用（例如 Windows 上的 Skype）上向自己发送一条消息，其中包含如下链接： <a href="web+coffee://americano">Americano</a>，然后点击该按钮。它同样应打开 PWA。

网址协议处理程序演示，其中左侧带有链接的浏览器标签页，右侧是独立的 PWA 窗口。

安全注意事项

由于 PWA 安装要求上下文是安全的，因此协议处理功能继承了 限制条件。已注册协议处理程序的列表不会以任何方式向网络公开，因此它 不能用作数字“指纹”收集矢量。

非用户启动的导航尝试

非用户启动的程序化导航尝试可能无法打开 。自定义协议网址只能用在顶级浏览环境中，但不能用于多种操作，例如 作为 iframe 的网址。

协议许可名单

与 registerProtocolHandler() 一样，也有可供应用注册的协议许可名单 处理。

因调用的协议而首次启动 PWA 时，系统将向用户显示 权限对话框。此对话框将显示应用的名称和来源，并询问用户是否 允许应用处理来自该协议的链接。如果用户拒绝了权限对话框， 将会被操作系统忽略。取消注册协议 处理程序，用户需要卸载注册它的 PWA。浏览器也会取消注册 协议处理程序；如果用户选择“记住我的选择”然后选择“Disallow”。

反馈

Chromium 团队希望了解您对以下项注册网址协议处理程序的体验： PWA。

向我们介绍 API 设计

API 是否有什么无法按预期运行？或者是否缺少方法 需要哪些资源或属性来实现您的想法？对安全性有疑问或意见 模型？在相应的 GitHub 代码库中提交规范问题，或将您的想法添加到 现有问题。

报告实现存在的问题

您是否发现了 Chromium 实现方面的错误？或者，实现是否与规范不同？ 在 new.crbug.com 上提交 bug。请务必提供尽可能多的细节信息 简单的重现说明，并在 Components 中输入 UI>Browser>WebAppInstalls 方框。Glitch 非常适用于分享轻松快速的重现问题。

表示对 API 的支持

您是否打算为 PWA 使用网址协议处理程序注册？你的公开支持将帮助 Chromium 团队会优先处理各项功能，并向其他浏览器供应商展示提供支持的重要性 。

请在 WICG Discourse 会话中说明您打算如何使用它。向 @ChromiumDev（使用 # 标签） #ProtocolHandler 并告诉我们您使用它的地点和方式。

致谢

PWA 的网址协议处理程序注册由 Fabio Rocha， Diego González、 Connor Moody 和 Microsoft Edge 团队的 Samuel Tang。本文 由 Joe Medley 和 Fabio Rocha 审核。主打图片提供方 JJ Ying 的 Un 创立网站。