轻松离线访问和提升的性能

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，最好保留一个简单的 no-op 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 贡献