• 网站

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-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 的调用可以包括 src 和 data-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 安全注意事项的详细信息，请参阅官方规范。

<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 并导航到“Resources”选项卡（或较新版本的 Chrome 上的“Application”选项卡）。在“Service Workers”部分，您可以看到已安装 /sw.js。
3. 然后打开“Cached Storage”部分。它显示所有缓存的图像和视频。
4. 禁用您的网络连接并重新加载此页面。它仍然有效！在 Dev Tools 的“Network”选项卡中，您将看到 Service Worker 缓存了哪些资源。

• 作者： @ymotongpoo