轻松离线访问和改进的性能

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

Service workers 可以在各种网络强度下实现丰富的离线体验和一致的用户体验。通过在浏览器中缓存资源，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 贡献