AMP
  • 网站

amp-install-serviceworker

简介

amp-install-serviceworker 组件支持通过同源或通过 Google AMP 缓存安装 Service Worker。

Service Worker 即使在浏览器关闭时也可以在后台运行,在渲染时间之前缓存所需的内容,向用户发送通知等等。

此示例安装一个 Service Worker,该 Service Worker 在后台缓存此页面。您可以在安装 Service Worker 后离线加载此页面来测试它。

Service Worker 目前在 Chrome、Edge、Firefox、Opera 和 Safari 中可用。

AMP 项目提供一个即插即用的 Service Worker,以帮助您的 AMP 页面通过一行代码获得网络弹性。

设置

导入 amp-install-serviceworker 组件。

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

安装 Service Worker

amp-install-serviceworker 的调用可以包含 srcdata-iframe-src 属性。src 是要安装的 Service Worker 的位置,当文档通过与 Service Worker 文件相同的源访问时使用。当通过 Google AMP 缓存访问文档时,使用 data-iframe-src 属性中指定的 HTML 文档来安装 Service Worker。我们建议同时使用这两个属性。

amp-install-serviceworker 需要一个单独的 data-iframe-src 选项的原因是,出于安全原因,浏览器无法从其他域安装 Service Worker。有关 Service Worker 的安全注意事项的详细信息,请参阅官方规范

如果您不想提供特殊的最小文档来安装 Service Worker,您可以简单地链接到您自己的源上的 AMP 文档。

<amp-install-serviceworker
    src="/serviceworker.js"
    data-iframe-src="https://amp.org.cn/serviceworker.html"
    layout="nodisplay">
</amp-install-serviceworker>

在此示例中,当用户第二次访问此 AMP 页面时,将安装 Service Worker 并缓存此域根路径下的所有图像文件和视频文件。

通过以下步骤确认 Service Worker 已安装并按预期工作

  1. 访问 amp-install-serviceworker 两次。
  2. 打开 Chrome Dev Tools 并导航到“资源”选项卡(或 Chrome 较新版本中的“应用程序”选项卡)。在“Service Workers”部分中,您可以看到已安装 /sw.js
  3. 然后打开“缓存存储”部分。它显示所有缓存的图像和视频。
  4. 禁用您的网络连接并重新加载此页面。它仍然有效!在 Dev Tools 的“网络”选项卡中,您将看到哪些资源由 Service Worker 缓存。
需要进一步解释吗?

如果此页面上的解释不能涵盖您的所有问题,请随时与其他 AMP 用户联系,讨论您的确切用例。

转到 Stack Overflow
未解释的功能?

AMP 项目强烈鼓励您的参与和贡献!我们希望您成为我们开源社区的持续参与者,但也欢迎您为自己特别感兴趣的问题做出一次性贡献。

在 GitHub 上编辑示例