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

从您的 AMP 页面预加载 PWA

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

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

所有内容“叶”页面（那些具有特定内容而不是概览页面的页面）都以 AMP 形式发布，以实现近乎即时的加载体验。
这些 AMP 使用 AMP 的特殊元素 amp-install-serviceworker 在用户享受您的内容时预热缓存和 PWA 外壳。
当用户点击您网站上的另一个链接时（例如，底部为了获得更像应用程序的体验而采取的行动号召），Service Worker 会拦截请求，接管页面并加载 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 缓存提供的！如果操作正确，从您的 AMP 页面之一链接到 PWA 的链接将感觉几乎是即时的，类似于 AMP 页面的第一跳。

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

首先，使用 amp-install-serviceworker 在您的所有 AMP 页面上安装 Service Worker，首先通过其脚本在页面的 <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>

最终，在 Service Worker 的安装步骤中，缓存 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 页面。

您现在可以将 PWA 部署在单独的路径上，例如 your-domain.com/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。然而，这也意味着，对于那些还不支持 Service Worker 的浏览器，将从 AMP 跳转到 AMP，并且永远不会实际导航到 PWA。

AMP 通过称为外壳 URL 重写来解决此问题。通过向 amp-install-serviceworker 标记添加回退 URL 模式，您指示 AMP 将给定页面上的所有匹配链接重写为转到另一个旧版外壳 URL，如果没有检测到 Service Worker 支持

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

使用这些属性，无论是否存在 Service Worker，后续对 AMP 的所有点击都将转到您的 PWA。

继续阅读 - 您已经走了这么远 - 为什么不重用您现有的 AMP 页面来构建您的 PWA？这里是如何做。

作者： @pbakaus