amp-install-serviceworker

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

用法

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

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

参见这篇文章，了解 ServiceWorkers 如何帮助 ServiceWorkers 提升 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 运行时会将 shell 页面作为后备通过隐藏的 iframe 预加载。
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（必需）

要注册的服务工作者的 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

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

验证

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