amp-install-serviceworker

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

用法

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

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

请参阅这篇文章，了解 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 重写

当服务工作线程不可用或尚未激活时，可以配置 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 运行时尝试安装服务工作线程。
3. 如果服务工作线程未安装（不可安装），作为回退，AMP 运行时将通过隐藏的 iframe 预加载 shell 页面。
4. AMP 运行时将拦截“shell 内”导航（通常是 AMP 到 AMP 的导航），如果服务工作线程未运行，则将重写导航 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

要安装的服务工作线程的范围。

layout

必须具有值 nodisplay。

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

这是一个正则表达式，它匹配要重写以通过 shell 进行导航的 URL，以实现无服务工作线程回退。有关更多详细信息，请参阅Shell URL 重写部分。该值必须是有效的 JavaScript RegExp 字符串。例如

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

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

用于重写 URL 导航的 shell 的 URL，用于无服务工作线程回退。有关更多详细信息，请参阅Shell URL 重写部分。该值必须是与 AMP 文档本身位于同一原点的 URL。

验证

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