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

从 AMP 页面预加载 PWA

一个好的策略是将网站入口设为 AMP 页面，然后在后台预热 PWA，并切换到 PWA 以继续浏览

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

继续阅读以了解为何使用这种开发模式以及如何使用它。

通过连接到 PWA 来改善用户体验

AMP 用于最初的用户获取

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

PWA 用于丰富的互动和参与

另一方面，渐进式网络应用允许更大的交互性和参与度，但没有 AMP 页面的即时首次加载特性。其核心是一种称为服务工作程序的技术，它是一个客户端代理，允许你为页面缓存各种资产，但所述服务工作程序仅在首次加载后激活。

AMP 与 PWA 的优缺点。

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

AMP 能够从 AMP 页面中安装渐进式网络应用的服务工作程序——是的，即使该 AMP 页面是从 AMP 缓存中提供的！如果操作正确，从 AMP 页面中指向 PWA 的链接（从你的某个 AMP 页面）会感觉几乎是即时的，类似于首次跳转到 AMP 页面。

提示——如果你还不熟悉服务工作程序，我强烈推荐 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> 中的某个位置添加以下内容（修改为指向实际服务工作程序）

<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);
      })
  );
});

提示——有更简单的方法来处理服务工作程序。查看服务工作程序帮助程序库。

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

大多数 AMP 页面上的链接都可能指向更多内容页面。有两种策略可确保后续链接点击会导致“升级”到渐进式网络应用，具体取决于你使用 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。然而，这也意味着，对于目前还不支持服务工作者的浏览器，它们将从 AMP 跳到 AMP，而实际上永远不会导航到 PWA。

AMP 通过称为shell URL 重写的功能来解决此问题。通过将备用 URL 模式添加到amp-install-serviceworker标签，您指示 AMP 将给定页面上所有匹配的链接重写为转到另一个旧版 shell 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