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.com、https://*.music.example.com 或 https://🎵.example.com 等格式匹配的网址,以便 PWA 外部(例如即时通讯应用或电子邮件客户端)的链接在已安装的 PWA 中打开,而不是在浏览器标签页中打开。

PWA 作为网址处理程序包含两项新增功能:

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

PWA 作为网址处理程序的建议应用场景

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

  • 音乐或视频流媒体网站,以便在应用的播放器体验中打开曲目链接或播放列表链接。
  • 新闻或 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 位于与它需要处理的某些网址(例如 https://🎵.example.com)不同的来源 (music.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 作为网址处理程序进行测试,请务必按照说明设置浏览器标志,然后在 https://mandymsft.github.io/pwa/ 上安装 PWA。通过查看其 Web 应用清单,您可以看到它会处理具有以下网址格式的网址:https://mandymsft.github.io 和 https://luhuangmsft.github.io。由于后者的来源 (luhuangmsft.github.io) 与 PWA 不同,因此 mandymsft.github.io 上的 PWA 需要证明所有权,这可以通过托管在 https://luhuangmsft.github.io/.well-known/web-app-origin-association 的 web-app-origin-association 文件来实现。

如需测试该功能是否确实有效,请使用您选择的即时通讯应用向自己发送一条测试消息,或在非基于 Web 的邮件客户端(例如 macOS 上的“邮件”应用)中查看电子邮件。电子邮件或短信应包含链接 https://mandymsft.github.io 或 https://luhuangmsft.github.io。两者都应在已安装的 PWA 中打开。

Windows Skype 即时通讯应用旁边是已安装的演示 PWA,在 Skype 聊天消息中点击由该 PWA 处理的链接后,该 PWA 会在独立模式下打开。

安全与权限

Chromium 团队根据控制对强大 Web 平台功能的访问权限中定义的核心原则(包括用户控制、透明度和人体工程学),设计并实现了 PWA 作为网址处理程序。

用户控制

如果多个 PWA 注册为给定网址格式的网址处理程序,系统会提示用户选择要使用哪个 PWA 来处理该格式(如果有)。此提案不处理在浏览器标签页中启动的导航,而是明确针对在浏览器外部启动的导航。

透明度

如果由于任何原因,在 PWA 安装期间无法成功完成必要的关联验证,浏览器将不会将该应用注册为受影响网址的有效网址处理程序。如果网址处理程序实现不当,可能会被用来劫持网站流量。这就是应用关联机制成为该方案重要组成部分的原因。

平台专用应用已经可以使用操作系统 API 来枚举用户系统上安装的应用。例如,Windows 上的应用可以使用 FindAppUriHandlersAsync API 枚举网址处理程序。如果 PWA 在 Windows 中注册为操作系统级网址处理程序,则其他应用可以看到它们的存在。

权限持久性

源可随时修改其与 PWA 的关联。浏览器会定期尝试重新验证已安装 Web 应用的关联。如果网址处理程序注册因关联数据发生更改或不再可用而无法重新验证,浏览器将移除注册。

反馈

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

请向我们介绍 API 设计

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

报告实现方面的问题

您是否发现了 Chromium 实现中的 bug?还是实现与规范不同? 在 new.crbug.com 上提交 bug。请务必尽可能多地提供详细信息和重现说明,并在组件框中输入 UI>Browser>WebAppInstalls。

显示对 API 的支持

您是否计划将 PWA 用作网址处理程序?您的公开支持有助于 Chromium 团队确定功能的优先级,并向其他浏览器供应商展示支持这些功能的重要性。

使用 #URLHandlers 标签向 @ChromiumDev 发送推文,让我们知道您在何处以及如何使用它。

实用链接

致谢

“PWA 作为网址处理程序”由 Microsoft Edge 团队的 Lu Huang 和 Mandy Chen 指定和实现。 本文档由 Joe Medley 审核。