通过连接到 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。
当用户点击你网站上的另一个链接时（例如，底部用于更像应用体验的号召性用语），Service Worker 会拦截请求，接管该页面并加载 PWA shell。

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

通过连接到 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 使用一种称为 shell URL 重写的功能来解决此问题。通过向 amp-install-serviceworker 标签添加回退 URL 模式，你将指示 AMP 在未检测到任何 Service Worker 支持的情况下，将给定页面上的所有匹配链接重写为转到另一个旧版 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>

通过这些属性设置到位，无论是否有任何 Service Worker，对 AMP 的所有后续点击都将转到你的 PWA。

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

作者： @pbakaus