轻松离线访问和提升性能

重要提示：此文档不适用于您当前选择的格式 电子邮件！

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

Service Worker 将无法与页面的 AMP 缓存版本进行交互。请将其用于前往您源站的后续旅程。

安装 Service Worker

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

注意 – 如果您不熟悉 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