轻松离线访问和提升性能

服务工作线程能够在各种网络强度下提供丰富的离线体验和一致的用户体验。通过在浏览器内缓存资源，网络应用能够向用户提供数据、资产和离线页面，以保持用户参与和了解信息。

服务工作线程无法与页面的 AMP 缓存版本进行交互。将其用于返回到您的原点的旅程。

安装服务工作线程

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

注意 – 如果您不了解服务工作线程的概念，请阅读 WebFundamentals 中的介绍。

您的服务工作线程需要在给定的页面上注册，否则浏览器将找不到或运行它。默认情况下，这是在一小段 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> 中的某个位置添加以下内容（修改为指向您的实际服务工作线程）

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

如果用户在您的原点上导航到您的 AMP 页面（与通常从 AMP 缓存提供的第一次点击相反），服务工作线程将接管并可以执行大量很酷的操作。

AMP 服务工作线程

如果您在这里，您正在使用 AMP 构建页面。AMP 团队非常关心将用户放在首位并为他们提供世界级的网络体验。为了保持这些体验的一致性，AMP 团队专门为 AMP 创建了一个服务工作线程！

提示 – 按照我们的教程学习如何在 PWA 中使用 AMP 服务工作线程。

安装 AMP 服务工作线程

使用最少的步骤安装 AMP 服务工作线程

将 AMP 服务工作线程代码导入您的服务工作线程文件中。

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

使用以下代码安装服务工作线程。

  AMP_SW.init();

完成。

自动缓存

AMP 服务工作线程会自动缓存 AMP 脚本文件和 AMP 文档。通过缓存 AMP 脚本文件，它们可以立即提供给用户的浏览器，从而实现离线功能并在不稳定的网络上提供更快速的页面。

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

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

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

优化 AMP 服务工作线程

为了充分利用 AMP 服务工作线程，应配置可选字段以缓存必要的资产和预取链接。

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

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

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

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

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

离线体验

通过包含一个离线页面，向用户传达他们已离线，并且应该在重新联机时尝试重新加载网站。AMP 服务工作者可以缓存页面及其资产。

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

一个成功的离线页面看起来像是您网站的一部分，因为它与应用程序的其余部分具有统一的用户界面。

强制更新

如果您的 AMP 服务工作者需要禁用或更改，并且部署给用户时出错，团队正在努力实施强制更新/删除功能。

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

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();
});

阅读更多有关管理已部署服务工作者的信息。

编写自定义服务工作线程

您可以使用上述技术为您的 AMP 网站启用离线访问，以及在从源代码提供服务后立即扩展您的页面。这是因为您可以通过服务工作者的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 提供帮助