通过连接到 PWA 来改善用户旅程
- AMP 用于初始用户获取
- PWA 用于丰富的互动性和参与度
使用 amp-install-serviceworker 预热您的 PWA
使 AMP 页面上的所有链接都导航到 PWA
- 1. 如果您将规范页面与 AMP 页面配对
- 2. 如果您的规范网站是 AMP

从您的 AMP 页面预加载 PWA

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

一个好的策略是使进入您网站的入口点是一个 AMP 页面，然后在后台预热 PWA，并在后续旅程中切换到它

所有内容“叶”页面（具有特定内容而不是概览页面的页面）都以 AMP 形式发布，以获得近乎即时的加载体验。
这些 AMP 使用 AMP 的特殊元素 amp-install-serviceworker 来预热缓存和 PWA 外壳，同时用户正在享受您的内容。
当用户单击您网站上的另一个链接时（例如，底部要求提供更多类似应用程序体验的号召性用语），服务工作线程会拦截该请求，接管页面并加载 PWA 外壳。

继续阅读以了解原因，以及如何使用这种开发模式。

通过连接到 PWA 来改善用户旅程

AMP 用于初始用户获取

AMP 是所谓的叶页面的理想解决方案，叶页面是指用户通过搜索引擎、朋友共享的链接或另一个网站上的链接自然发现的内容页面。由于 AMP 的专用预渲染，AMP 页面加载速度非常快，这意味着跳出率要低得多（最新的 DoubleClick 研究表明，超过 53% 的用户会在 3 秒后跳出）。

PWA 用于丰富的互动性和参与度

另一方面，渐进式 Web 应用程序允许更大的交互性和参与度，但没有 AMP 页面的即时首次加载特性。它们的核心是一项名为 Service Worker 的技术，它是一个客户端代理，允许您为页面缓存各种资产，但所述 Service Worker 仅在第一次加载后激活。

AMP 与 PWA 的优缺点。

使用 `amp-install-serviceworker` 预热您的 PWA

AMP 能够从 AMP 页面内安装您的渐进式 Web 应用程序的 Service Worker – 是的，即使该 AMP 页面是从 AMP 缓存提供的！如果操作正确，通向您的 PWA 的链接（从您的 AMP 页面之一）将感觉几乎是即时的，类似于到 AMP 页面的第一次跳转。

提示 – 如果您还不熟悉 Service Worker，我强烈推荐 Jake Archibald 的 Udacity 课程。

首先，使用 amp-install-serviceworker 在您的所有 AMP 页面上安装服务工作线程，首先通过其脚本将组件包含在页面的 <head> 中

<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>

最终，在服务工作线程的安装步骤中，缓存 PWA 将需要的任何资源

var CACHE_NAME = 'my-site-cache-v1';
var urlsToCache = [
  '/',
  '/styles/main.css',
  '/script/main.js'
];

self.addEventListener('install', function(event) {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

提示 – 有更简单的方法来处理 Service Worker。查看 Service Worker 帮助程序库。

使 AMP 页面上的所有链接都导航到 PWA

您的 AMP 页面上的大多数链接很可能指向更多内容页面。有两种策略可以确保后续的链接点击会导致“升级”到渐进式 Web 应用程序，具体取决于您使用 AMP 的方式

1. 如果您将规范页面与 AMP 页面配对

在这种情况下，您有一个规范网站（非 AMP），并生成链接到这些规范页面的 AMP 页面。这是目前 AMP 最常用的方式，这意味着您的 AMP 页面上的链接很可能会链接到您的网站的规范版本。好消息：如果您的规范网站是您的 PWA，则一切就绪。

2. 如果您的规范网站是 AMP

在这种情况下，您的规范页面是您的 AMP 页面：您正在使用 AMP 构建整个网站，并且只是将 AMP 用作库（有趣的事实：您正在阅读的这个网站就是以这种方式构建的）。在这种情况下，您的 AMP 页面上的大多数链接将指向其他 AMP 页面。

您现在可以在单独的路径（如 your-domain.com/pwa）上部署您的 PWA，并使用已经在运行的 Service Worker 来在有人单击 AMP 页面上的链接时拦截浏览器导航

self.addEventListener('fetch', event => {
    if (event.request.mode === 'navigate') {
      event.respondWith(fetch('/pwa'));

      // Immediately start downloading the actual resource.
      fetch(event.request.url);
    }

});

此技术的特别之处在于，您现在正在使用渐进式增强功能从 AMP 转到 PWA。但是，这也意味着，顾名思义，尚不支持服务工作线程的浏览器将从 AMP 跳转到 AMP，并且实际上永远不会导航到 PWA。

AMP 通过称为外壳 URL 重写的功能解决了这个问题。通过向 amp-install-serviceworker 标记添加回退 URL 模式，您可以指示 AMP 将给定页面上的所有匹配链接重写为另一个旧外壳 URL（如果未检测到任何服务工作线程支持）

<amp-install-serviceworker
      src="https://www.your-domain.com/serviceworker.js"
      layout="nodisplay"
      data-no-service-worker-fallback-url-match=".*"
      data-no-service-worker-fallback-shell-url="https://www.your-domain.com/pwa">
</amp-install-serviceworker>

使用这些属性，后续对 AMP 的所有点击都将转到您的 PWA，而无需任何服务工作线程。

继续阅读 – 您已经走了这么远 – 为什么不重复使用您现有的 AMP 页面来构建您的 PWA 呢？这是方法。

由 @pbakaus 撰写