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

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

验证

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