PWA 用作网址处理程序

让已安装的 PWA 处理网址,以提供更完整的体验。

什么是 PWA 作为网址处理程序?

假设您正在使用即时通讯应用(如 macOS 上的“信息”)与朋友聊天 而且谈论的是音乐进一步假设,你们都安装了 music.example.com PWA 。如果您想分享自己喜爱的曲目以供好友欣赏,则可以将 为他们提供深层链接,例如 https://music.example.com/rick-astley/never-gonna-give-you-up。由于 链接太长,music.example.com 的开发者可能决定在 每首曲目的短链接,例如 https://🎵.example.com/r-a/n-g-g-y-u

PWA 作为网址处理程序可让 music.example.com 等应用自行注册为 与 https://music.example.comhttps://*.music.example.comhttps://🎵.example.com,因此 从 PWA 外部(例如,从即时通讯应用或电子邮件)链接到的 客户端,请在已安装的 PWA 中打开,而不是在浏览器标签页中打开。

PWA 作为网址处理程序由两项新增功能组成:

  1. "url_handlers" Web 应用清单成员。
  2. web-app-origin-association 文件格式,用于验证范围内和范围外网址关联。

推荐将 PWA 用作网址处理程序的应用场景

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

  • 音乐或视频流媒体网站,因此您可以在 Google Play 音乐的播放器界面中打开曲目链接或播放列表链接, 应用。
  • 关注或订阅的网站会在应用的阅读器模式下打开的新闻或 RSS 阅读器。

如何将 PWA 用作网址处理程序

通过 about://flags 启用

如需在没有源试用令牌的情况下在本地试用 PWA 作为网址处理程序,请启用 about://flags 中的 #enable-desktop-pwas-url-handling 标志。

"url_handlers" Web 应用清单成员

如需将已安装的 PWA 与网址格式相关联,需要在 Web 应用中指定这些格式 清单。这通过 "url_handlers" 成员实现。它接受带有 origin 属性,这是必需的 string,是用于匹配源的模式。这些 格式可以使用通配符 (*) 前缀,以便包含多个子网域(例如 https://*.example.com)。与这些源匹配的网址可由此 Web 应用处理。架构为 始终假定为 https://,但需要明确提及。

以下 Web 应用清单摘录展示了入门版中的音乐 PWA 示例 可以对此进行设置。第二个带有通配符 ("https://*.music.example.com") 的条目可确保 或者会因为https://www.music.example.com或可能还有其他一些示例(例如 https://marketing-activity.music.example.com

{
  "url_handlers": [
    {
      "origin": "https://music.example.com"
    },
    {
      "origin": "https://*.music.example.com"
    },
    {
      "origin": "https://🎵.example.com"
    }
  ]
}

web-app-origin-association 文件

由于 PWA 与它需要的部分网址位于不同的源 (music.example.com) 上 标识名(例如https://🎵.example.com),则应用需要验证对这些其他源的所有权。这个 发生在其他源上托管的 web-app-origin-association 文件中。

此文件必须包含有效的 JSON。顶层结构是一个对象,拥有一个名为 "web_apps"。该成员是对象的数组,每个对象都表示唯一 Web 应用。每个对象均包含:

字段 说明 类型 默认
"manifest" (必填)所关联 PWA 的 Web 应用清单的网址字符串 string 不适用
"details" (可选)一个对象,包含由已包含和排除的网址格式构成的数组 object 不适用

每个 "details" 对象都包含:

字段 说明 类型 默认
"paths" (可选)允许的路径字符串数组 string[] []
"exclude_paths" (可选)不允许的路径字符串数组 string[] []

下面给出了上述音乐 PWA 示例的示例 web-app-origin-association 文件。它 会托管在源 🎵.example.com 上,并与 music.example.com PWA,由其 Web 应用清单网址标识。

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

网址何时匹配?

如果同时满足以下两个条件,PWA 会匹配网址进行处理:

  • 该网址与 "url_handlers" 中的某个来源字符串匹配。
  • 浏览器能够通过相应的 web-app-origin-association 文件验证每个文件是否 来源同意让此应用处理此类网址。

关于 web-app-origin-association 文件发现

为了让浏览器能够发现 web-app-origin-association 文件,开发者需要 将 web-app-origin-association 文件放在 应用根目录下的 /.well-known/ 文件夹中。 要实现此功能,文件名必须正好为 web-app-origin-association

演示

如需将 PWA 作为网址处理程序进行测试,请务必将浏览器标志设置为 然后在以下位置安装 PWA: https://mandymsft.github.io/pwa/.通过观察 Web 应用清单中构建的应用,您会看到它 会处理采用以下网址格式的网址:https://mandymsft.github.iohttps://luhuangmsft.github.io。由于后者位于不同的源 (luhuangmsft.github.io) 相较于 PWA,mandymsft.github.io 上的 PWA 需要证明所有权,这通过 web-app-origin-association 文件托管于 https://luhuangmsft.github.io/.well-known/web-app-origin-association.

要测试它是否确实能正常运行,请使用 您选择的电子邮件或在 macOS 上的“邮件”并非基于 Web 的电子邮件客户端中查看的电子邮件。通过 电子邮件或短信应包含 https://mandymsft.github.iohttps://luhuangmsft.github.io。两者都应在已安装的 PWA 中打开。

Windows Skype 即时通讯应用与已安装的演示版 PWA 相邻,点击 Skype 聊天消息中由其处理的链接后,该应用会以独立模式打开。

安全与权限

Chromium 团队按照核心原则设计并实施了 PWA 作为网址处理程序 (如控制对强大的 Web 平台功能的访问权限中所述),包括 透明度和人体工学设计。

用户控制

如果有多个 PWA 注册为给定网址格式的网址处理程序,系统会提示用户 选择要使用的 PWA 来处理该模式(如果有)。以 此方案不处理浏览器标签页,它明确针对从开始 浏览器外部

透明度

如果在 PWA 安装期间无法成功完成必要的关联验证,请执行以下操作: 浏览器不会将该应用注册为受影响网址的有效网址处理程序。 如果实现不当,网址处理程序可能会用于劫持网站的流量。正因如此, 应用关联机制是 scheme 的重要组成部分。

针对具体平台的应用已经可以使用操作系统 API 来枚举已安装的 用户系统上的应用例如,Windows 上的应用可以使用 FindAppUriHandlersAsync 用于枚举网址处理程序的 API。如果 PWA 在 Windows 中注册为操作系统级网址处理程序,它们是否存在 对其他应用可见

权限保留

来源可以随时修改其与 PWA 的关联。浏览器会定期尝试 重新验证已安装的 Web 应用之间的关联。如果网址处理程序注册未能重新验证 因为关联数据已更改或不再可用,浏览器将删除 注册。

反馈

Chromium 团队希望了解您使用 PWA 作为网址处理程序的体验。

向我们介绍 API 设计

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

报告实现存在的问题

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

表示对 API 的支持

您打算使用 PWA 作为网址处理程序吗?您的公开支持可帮助 Chromium 团队确定各项工作的轻重缓急 并向其他浏览器供应商展示支持这些功能有多么重要。

使用 # 标签向 @ChromiumDev 发送推文 #URLHandlers,然后让 我们都会知道您在何处使用它

实用链接

致谢

将 PWA 作为网址处理程序由 Microsoft Edge 团队的 Lu HuangMandy Chen 指定并实现。 本文由以下人员审核: Joe Medley。 主打图片,作者:Bryson Hammer 不启动