轻松离线访问和提升性能

重要提示：此文档不适用于您当前选择的格式广告！

Service Worker 可以实现丰富的离线体验，并在不同的网络强度下提供一致的用户体验。通过在浏览器中缓存资源，Web 应用程序能够向用户提供数据、资产和离线页面，以保持他们的参与度和知情度。

Service Worker 将无法与您页面的 AMP 缓存版本交互。请将其用于您源站的后续访问。

安装 Service Worker

Service Worker 是位于您的页面和服务器之间的客户端代理，用于构建出色的离线体验、快速加载的应用程序外壳场景以及发送推送通知。

注意 – 如果您是 Service Worker 的新手，请阅读 WebFundamentals 上的介绍。

您的 Service Worker 需要在给定页面上注册，否则浏览器将无法找到或运行它。默认情况下，这是通过少量 JavaScript 来完成的。在 AMP 页面上，您可以使用 amp-install-serviceworker 组件来实现相同的功能。

为此，首先在您页面的 <head> 中通过脚本包含 amp-install-serviceworker 组件

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

然后在您的 <body> 中的某个位置添加以下内容（修改以指向您的实际 Service Worker）

<amp-install-serviceworker
      src="https://www.your-domain.com/serviceworker.js"
      layout="nodisplay">
</amp-install-serviceworker>

如果用户在您的源站上导航到您的 AMP 页面（而不是通常从 AMP 缓存提供的首次点击），Service Worker 将接管并可以执行许多很酷的事情。

AMP Service Worker

如果您来到这里，说明您正在使用 AMP 构建页面。AMP 团队非常关心将用户放在首位并为他们提供世界一流的 Web 体验。为了保持这些体验的一致性，AMP 团队专门为 AMP 创建了一个 Service Worker！

提示 – 请按照我们的教程学习如何在您的 PWA 中使用AMP Service Worker。

安装 AMP Service Worker

只需最少的步骤即可安装 AMP Service Worker

将 AMP Service Worker 代码导入到您的 Service Worker 文件中。

  importScripts('https://cdn.ampproject.org/sw/amp-sw.js');

使用以下代码安装 Service Worker。

  AMP_SW.init();

完成。

自动缓存

AMP Service Worker 会自动缓存 AMP 脚本文件和 AMP 文档。通过缓存 AMP 脚本文件，它们可以立即供用户的浏览器使用，从而实现离线功能并在不稳定的网络上加快页面速度。

如果您的应用需要特定类型的文档缓存，AMP Service Worker 允许自定义。例如，为应始终从网络请求的文档添加拒绝列表。在以下示例中，将 Array<RegExp> 替换为表示您要避免缓存的文档的正则表达式数组。

AMP_SW.init(
documentCachingOptions: {
denyList?: Array<RegExp>;
}
);

在此处阅读更多关于自定义文档缓存的信息。

优化 AMP Service Worker

要充分利用 AMP Service Worker 的功能，应配置可选字段以缓存必要的资产并预取链接。

应缓存驱动用户访问页面的资产（例如视频、重要图像或可下载的 PDF），以便用户离线时可以再次访问它们。

AMP_SW.init(
assetCachingOptions: [{
regexp: /\.(png|jpg)/,
cachingStrategy: 'CACHE_FIRST'
}],
);

您可以自定义缓存策略并定义拒绝列表。

可以预取用户可能需要访问的页面链接，以便在离线时访问它们。这是通过在链接标签中添加 data-prefetch 属性来完成的。

<a href='....' data-rel='prefetch' />

离线体验

通过包含离线页面，告知用户他们已离线，并应在恢复在线状态时尝试重新加载网站。AMP Service Worker 可以缓存页面及其资产。

AMP_SW.init({
offlinePageOptions: {
url: '/offline.html';
assets: ['/images/offline-header.jpg'];
}
})

一个成功的离线页面看起来像是您网站的一部分，并且与应用程序的其余部分具有一致的 UI。

强制更新

如果部署到用户的 AMP Service Worker 出现问题，或者需要禁用或更改它，该团队正在努力实现强制更新/删除功能。

要有效管理 Service Worker，您应该了解标准 HTTP 缓存如何影响 Service Worker JavaScript 的更新方式。使用适当的 HTTP 缓存指令提供的 Service Worker 可以通过进行适当的更改并将 Service Worker 重新部署到您的托管环境来解决小的错误修复。如果您需要删除 Service Worker，最好保留一个简单的无操作 Service Worker 文件，如下所示

self.addEventListener('install', () => {
  // Skip over the "waiting" lifecycle state, to ensure that our
  // new service worker is activated immediately, even if there's
  // another tab open controlled by our older service worker code.
  self.skipWaiting();
});

阅读更多关于管理已部署的 Service Worker 的信息。

编写自定义 Service Worker

您可以使用上述技术来启用对 AMP 网站的离线访问，并在从源站提供页面时立即扩展您的页面。这是因为您可以通过 Service Worker 的 fetch 事件修改响应，并返回您想要的任何响应

self.addEventListener('fetch', function(event) {
event.respondWith(
caches.open('mysite').then(function(cache) {
return cache.match(event.request).then(function(response) {
var fetchPromise = fetch(event.request).then(function(networkResponse) {
cache.put(event.request, networkResponse.clone());
return networkResponse;
})

        // Modify the response here before it goes out..
        ...

        return response || fetchPromise;
      })
    })

);
});

使用此技术，您可以修改您的 AMP 页面，使其具有各种额外的功能，否则这些功能将无法通过AMP 验证，例如

需要自定义 JS 的动态功能。
针对您的网站进行自定义/仅对您的网站相关的组件。

由 @CrystalOnScript 编写
并由 @pbakaus 贡献