amp-install-serviceworker

<script async custom-element="amp-install-serviceworker" src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>

用法

如果 AMP 文档从与给定 Service Worker URL 相同的来源加载，则注册由 src 属性给定的 Service Worker。如果设置了 data-iframe-src，则当 AMP 文档从 AMP 缓存提供时，会将该 URL 加载为 iframe。这允许从 AMP 缓存安装 ServiceWorker，以便在用户访问源站点时安装 Service Worker。

每当 AMP 文件从您发布 AMP 文件的来源提供时，此 Service Worker 都会运行。在从 AMP 缓存提供的文档上，Service Worker 将在后台安装，但不会执行或影响页面的行为。

请参阅这篇文章，了解 ServiceWorker 如何帮助使用 ServiceWorker 使 AMP 体验变得出色。

<amp-install-serviceworker
  src="https://www.your-domain.com/serviceworker.js"
  data-iframe-src="https://www.your-domain.com/install-serviceworker.html"
  layout="nodisplay"
>
</amp-install-serviceworker>

Shell URL 重写

当 Service Worker 不可用或尚未激活时，可以配置 URL 重写以将导航定向到 shell。例如，这样，AMP 运行时可以将导航重定向到“shell”而不是“叶”AMP 文档。

仅当文档在源来源而不是代理来源上打开时，才会使用此回退。

URL 重写使用 data-no-service-worker-fallback-url-match 和 data-no-service-worker-fallback-shell-url 属性进行配置，如下所示：

<amp-install-serviceworker
  layout="nodisplay"
  src="https://www.your-domain.com/serviceworker.js"
  data-no-service-worker-fallback-url-match=".*\.amp\.html"
  data-no-service-worker-fallback-shell-url="https://pub.com/shell"
>
</amp-install-serviceworker>

其中

• data-no-service-worker-fallback-shell-url 指定 AMP+PWA shell 的链接。它必须与 AMP 文档在同一来源。
• data-no-service-worker-fallback-url-match 是一个 JavaScript 正则表达式，用于描述如何匹配“shell 内”链接与非 shell 内链接。
• 必须同时存在这两个属性才能触发 URL 重写。

URL 重写的工作方式如下：

1. 文档提供了一个配置，用于说明如何在 shell 中导航。
2. AMP 运行时尝试安装 Service Worker。
3. 如果未安装 Service Worker（不可安装），作为回退，AMP 运行时将通过隐藏的 iframe 预加载 shell 页面。
4. AMP 运行时将拦截“shell 内”导航（通常是 AMP 到 AMP 的导航），如果 Service Worker 没有运行，则会重写导航 URL 以继续使用基于“shell”的 URL。
5. shell 将启动并通过其路由器运行请求的导航。通常，shell 会立即执行 history.replaceState(href)。

URL 将以 shell-url#href={encodeURIComponent(href)} 的形式重写。例如

https://pub.com/doc.amp.html
-->
https://pub.com/shell#href=%2Fdoc.amp.html

除了重写 URL 之外，amp-install-serviceworker 还会尝试预加载 shell。这是通过创建一个带有 #preload 片段的 iframe 来完成的。

<iframe
  src="https://pub.com/shell#preload"
  hidden
  sandbox="allow-scripts allow-same-origin"
></iframe>

当然，为了使预加载有效，shell 响应必须具有相应的 HTTP 缓存标头。

属性

src（必需）

要注册的 ServiceWorker 的 URL，必须使用 https 协议。

data-iframe-src

安装 ServiceWorker 的 HTML 文档的 URL。该 URL 必须使用 https 协议。如果 AMP 页面将从 AMP 缓存提供，则此属性是必需的。

data-scope

要安装的 Service Worker 的范围。

layout

必须具有值 nodisplay。

data-no-service-worker-fallback-url-match

这是一个正则表达式，用于匹配要重写以通过 shell 导航的 URL，以便在没有 Service Worker 的情况下回退。有关更多详细信息，请参阅Shell URL 重写部分。该值必须是有效的 JavaScript RegExp 字符串。例如

• amp.html
• .*amp
• .*\.amp\.html
• .*\/amp$

data-no-service-worker-fallback-shell-url

用于重写 URL 导航以在没有 Service Worker 的情况下回退的 shell 的 URL。有关更多详细信息，请参阅Shell URL 重写部分。该值必须是与 AMP 文档本身在同一来源的 URL。

验证

请参阅 AMP 验证器规范中的amp-install-serviceworker 规则。