推荐采取的策略:将一个 AMP 网页作为您网站的进入点,然后让 PWA 在后台做好准备并切换到 PWA 以便用户继续进行浏览之旅。

  • 将所有的叶级内容页(包含具体内容的页面,而非概览页)发布为 AMP 网页,以便提供几乎即时交付的加载体验。
  • 当用户浏览您的内容时,这些 AMP 网页会使用 AMP 的专用元素 <amp-install-serviceworker> 让缓存和 PWA Shell 做好准备。
  • 当用户点击您网站上的另一个链接(例如,点击底部的号召性用语,以便获得与应用更相似的体验)时,Service Worker 会拦截相应请求、接管相应网页并改为加载 PWA Shell。

若想了解为何要使用此开发模式以及如何使用它,请继续阅读下文。

通过关联到 PWA,让用户的浏览之旅更顺畅

使用 AMP 进行初始用户获取

AMP 是所谓的叶级页的理想解决方案;叶级页是指用户通过某个搜索引擎、朋友提供的某个共享链接或另一网站上的某个链接而自然发现的内容页。由于 AMP 具有专门的预呈现功能,因此 AMP 网页的加载速度极快,这便意味着流失率会大幅降低(最新的 DoubleClick 研究表明,在所有用户中,有超过 53% 的用户会在 3 秒钟后流失)

使用 PWA 提升互动性和参与度

另一方面,渐进式网页应用可大幅提升互动度并吸引用户进行深入互动,但不具备 AMP 网页的首次加载即时交付 特征。渐进式网页应用的核心是一种名为 Service Worker 的技术,该技术是一种客户端代理,让您能够为网页缓存各种资源,但上述 Service Worker 只有在首次加载完成之后才会开始起作用。

对比 AMP 和 PWA 的利与弊。

使用 amp-install-serviceworker 让 PWA 做好准备

AMP 技术能够从 AMP 网页内安装渐进式网页应用的 Service Worker - 对,即使相应 AMP 网页是由 AMP 缓存提供也能如此!如果操作正确,(从您的某一 AMP 网页中)指向您的 PWA 的链接会给用户带来几乎即时交付内容的感觉,与首次跳转到 AMP 网页的体验相似。

首先,使用 <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);
      })
  );
});

将 AMP 网页上的所有链接都指向 PWA

可能会发生的情况是:您的 AMP 网页上的大多数链接都会指向更多内容页。您可以采用两种策略来确保后续的链接点击能够将 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。不过,这也意味着(其实现状正是如此),尚不支持 Service Worker 的浏览器只会从 AMP 跳转到 AMP,并且永远无法实际导航到 PWA。

AMP 采用一种名为 Shell 网址重写 的方法来解决此问题。通过向 <amp-install-serviceworker> 标记添加后备网址格式,您可以指示 AMP 在检测不到任何对 Service Worker 的支持时重写相应网页上的所有匹配链接,以便改为跳转到另一个旧版 Shell 网址:

<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,而无论采用何种 Service Worker。