此页面由 Cloud Translation API 翻译。

Web 应用范围扩展

在 Chrome 122 中，您可以订阅 scope_extensions 的源试用应用清单成员，允许网站控制多个子网域和顶级以单个 Web 应用的形式呈现。本文档介绍了。

Demián Renzulli

Thomas Steiner

概览

某些 Web 应用具有多种 origins，用于例如，使用 example.com 作为主应用，然后用 space_1.example.com... space_n.example.com，有时与 special-example.com 结合使用，如子体验，全部位于主应用之下。这类网站架构对渐进式 Web 应用的影响。限制包括无法共享 Service Worker、任何类型的设备、本地存储空间和各种源的权限。此外，Google Cloud 中的跨源导航独立的 PWA 会显示一个窗口界面（“不在范围内”栏），指明用户已退出 PWA 体验。你可以了解如何解决文章中提到的多源网站中的渐进式 Web 应用和在同一网域中构建多个渐进式 Web 应用。

利用 Scope Extensions API，Web 应用可以解决一些该同源政策对这类网站架构的限制。它使 Web 应用能够扩展其 scope 到其他源帮助实现统一的体验，前提是 Web 应用的主要来源及相关联的源站。

目标

Scope Extensions API 的主要目标是允许网站控制将多个子网域和顶级网域作为一个连续的 Web 应用运行 Web 应用界面和链接捕获功能例如，让网站跨 example.com.co.uk 和 support.example.com 的 example.com 的行为方式与作为单个 Web 应用的一部分。

显示主 PWA 和关联子体验的图表。

借助范围扩展，当出现以下情况时，多源 PWA 可以像连续的 Web 应用一样运行 Web 应用界面

在实践中，这可以转化为两个更具体的目标：

跨源导航：允许用户跨关联的源站导航而不会影响用户体验告知用户他们正在逐步弃用 PWA。
跨域链接捕获：允许 Web 应用捕获用户访问与其相关联的网站。

跨域范围内导航

默认情况下，当用户在独立 PWA 中跨源导航时，用户显示了一个窗口界面，表明用户正在离开 PWA 体验。在 Chrome 中，此界面包含一个“范围外”栏，其中包含新来源。这会破坏用户体验，因为用户希望继续在同一应用环境中导航，就会被带走

独立 PWA 顶部的“超出范围”栏。

“不在范围内”用户跨不同源导航时 Chrome 中显示的栏独立 PWA 中的应用。

使用范围扩展后，当用户导航到任何关联源，从而为 PWA 提供统一的体验。

跨源链接捕获

“链接捕获”是指应用捕获其自身内部的范围。实现此实现的方式因浏览器和操作系统系统。例如，在 ChromeOS 上的 Chrome 中，已安装默认情况下，PWA 会打开一个浏览器标签页，并在地址栏中显示指示有一款应用能够处理这些链接选择启用自动从该时间点开始捕获链接的功能。

针对已安装 PWA 的多功能栏提示。

ChromeOS 中某个标签页的 Chrome 地址栏片段，其中显示了一个视觉指示链接可以由 PWA 处理，以及用于记住相应决定的选项。

如果用户点击的链接超出 PWA 范围（包括子网域或顶级网域的链接）不会被识别为属于。例如，链接将在浏览器标签页中打开，没有任何提示通知用户有能够处理该链接的应用。范围 Extensions API 可用来扩展 PWA 的范围，系统会将源站视为范围内的链接。

实现

实现范围扩展需要在以及相关的源站

声明关联源站的列表

将 scope_extensions Web 应用清单成员添加到主 PWA 源，以便使 Web 应用能够将其范围扩展到其他源。

网络应用清单 (https://example.com)

{
  "name": "Example",
  "display": "standalone",
  "start_url": "/index.html",
  "scope_extensions": [
    { "origin": "https://*.example.com" },
    { "origin": "https://example.co.uk" },
    { "origin": "https://*.example.co.uk" }
  ]
}

确认关联

列出的每个源均使用 /.well-known/web-app-origin-association 配置文件。此文件需要并将其命名为 web-app-origin-association，并在此确切位置投放，因为这是一个众所周知的 URI。

/.well-known/web-app-origin-association（关联的来源）

{
  "web_apps": [{ "web_app_identity": "https://example.com" }]
}

演示

该演示包括两个网站：

主 PWA：应用显示通过 scope_extensions 成员声明关联源站的列表（位于 Web 应用清单中）。
扩展范围内的来源：来源在主 PWA 范围之外，但在列出后与其关联作为关联来源，并确认两者之间的关系通过其 web-app-origin-association 文件。

如需执行以下测试，您必须启用 about://flags/#enable-desktop-pwas-scope-extensions 标志（从 Chrome v115 及更高版本）。

测试跨源导航

作为这些测试的前提条件，请打开在浏览器中使用主 PWA，请将其作为 PWA 安装然后将其打开，以便在独立模式下运行。PWA 包含指向来源在扩展范围内的，并且指向某个源不在扩展范围内。

包含范围和扩展范围链接的主 PWA 窗口。

演示 PWA，其中来源在扩展范围内的链接，来源不在扩展范围内范围。

默认跨源导航（不在扩展范围内）

点击指向不在扩展范围内的源站的链接全屏 PWA 内。
因此，系统会进行导航，并显示超出范围的栏。

点击“超出范围”链接后，带有“超出范围”栏的主 PWA 窗口。

“不在范围内”对于 PWA 中的 PWA 的跨源导航，该栏默认显示独立模式

使用范围扩展（在扩展范围内）进行跨源导航

导航回 PWA 的首页。
点击指向以下内容的链接：来源不在扩展范围内的来源。
默认情况下，“不在范围内”条形应显示，但由于范围原因扩展程序关联，但不是。

点击扩展范围链接后，主 PWA 窗口没有超出范围栏。

“不在范围内”来源关联后，跨源导航中未显示栏与范围扩展所进行的修改

测试跨源链接捕获

在以下位置打开并安装主 PWA： ChromeOS 设备。
点击以下链接：关联的源。
系统会在新的浏览器标签页中打开该链接，并提示您在已安装的 PWA。

针对已安装扩展范围的 PWA 的多功能栏提示。

点击指向 PWA 关联来源的链接会在新标签页中打开该链接，显示“在应用中打开”允许用户选择启用自动链接的图标

源试用

如果您希望在应用中实际测试此 API，您可以使用源试用。通过源试用，您可以与您的网域绑定的测试令牌。然后，您可以部署您的应用希望它能在支持您测试的功能的浏览器中正常运行（在此即 Chrome 121 到 126 中的可用情况）。要获取您自己的令牌，进行源试用，请填写申请表。

反馈

Chrome 团队正在寻求关于此 API 实用性的反馈。接收者帮助团队改进此 API，并提供有关其实用性的反馈，当前版本未涵盖的新用例，请打开一个 GitHub 上的问题。

其他资源

致谢

特别感谢此 API 开发团队背后的团队。范围扩展由 Alan Cutter 指定并 Lu Huang， Matt Giuca。此 API 由 Google Chrome 的 Alan Cutter 以及 Hassan Talat、 Kristin Lee 和 Microsoft Edge 的 Lu Huang。