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

从您的 AMP 页面预加载 PWA

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

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

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

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

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

AMP 用于初始用户获取

AMP 是所谓的叶子页面的理想解决方案，叶子页面是您的用户通过搜索引擎、朋友分享的链接或另一个网站上的链接有机发现的内容页面。由于 AMP 的特殊预渲染，AMP 页面加载速度非常快，这意味着减少了更多的跳出率（最新的 DoubleClick 研究表明，超过 53% 的用户会在 3 秒后放弃）。

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

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

AMP 与 PWA 的优缺点。

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

AMP 能够从 AMP 页面内部安装您渐进式 Web 应用程序的服务工作线程 – 是的，即使该 AMP 页面是从 AMP 缓存提供的！如果操作正确，从您的 AMP 页面之一链接到您的 PWA 的链接会感觉几乎是即时的，类似于第一次跳转到 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 页面。

您现在可以将您的 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