透過連接 PWA 來改善使用者歷程
- AMP 用於初始使用者獲取
- PWA 用於豐富的互動性和參與度
使用 amp-install-serviceworker 預熱您的 PWA
使 AMP 頁面上的所有連結導航至 PWA
- 1. 如果您將標準頁面與 AMP 頁面配對
- 2. 如果您的標準網站是 AMP

從您的 AMP 頁面預先載入 PWA

重要提示：本文件不適用於您目前選擇的格式 stories！

一個好的策略是將您網站的入口點設為 AMP 頁面，然後在後台預熱 PWA，並在後續旅程中切換到 PWA

所有內容「葉」頁面（具有特定內容的頁面，而非概覽頁面）都發佈為 AMP，以實現近乎即時的載入體驗。
這些 AMP 使用 AMP 的特殊元素 amp-install-serviceworker 來預熱快取和 PWA shell，同時使用者正在享受您的內容。
當使用者點擊您網站上的另一個連結時（例如，底部的行動號召以獲得更像應用程式的體驗），service worker 會攔截請求，接管頁面並載入 PWA shell。

繼續閱讀以了解原因，以及如何使用這種開發模式。

透過連接 PWA 來改善使用者歷程

AMP 用於初始使用者獲取

AMP 是所謂「葉」頁面的理想解決方案，使用者透過搜尋引擎、朋友分享的連結或另一個網站上的連結自然地發現的內容頁面。由於 AMP 的專門預先渲染，AMP 頁面載入速度極快，這反過來意味著跳出率大幅降低（最新的 DoubleClick 研究顯示，超過 53% 的使用者會在 3 秒後跳出）。

PWA 用於豐富的互動性和參與度

另一方面，漸進式網頁應用程式 (PWA) 允許更高的互動性和參與度，但沒有 AMP 頁面的即時首次載入特性。它們的核心是一種稱為 Service Worker 的技術，這是一種客戶端代理，可讓您快取頁面的各種資產，但該 Service Worker 僅在首次載入後才會啟動。

AMP 與 PWA 的優缺點。

使用 `amp-install-serviceworker` 預熱您的 PWA

AMP 能夠從 AMP 頁面內安裝漸進式網頁應用程式的 Service Worker – 是的，即使該 AMP 頁面是從 AMP 快取提供的！如果正確完成，從您的 AMP 頁面導向 PWA 的連結將幾乎感覺不到延遲，類似於首次跳轉到 AMP 頁面。

提示 – 如果您還不熟悉 Service Worker，我強烈推薦 Jake Archibald 的 Udacity 課程。

首先，透過在您頁面的 <head> 中透過其腳本包含元件，使用 amp-install-serviceworker 在您的所有 AMP 頁面上安裝 service worker

<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 頁面上的大多數連結很可能導向更多內容頁面。有兩種策略可以確保後續的連結點擊會「升級」到漸進式網頁應用程式，具體取決於您使用 AMP 的方式

1. 如果您將標準頁面與 AMP 頁面配對

在這種情況下，您有一個標準網站 (非 AMP) 並產生連結到這些標準頁面的 AMP 頁面。這是目前 AMP 最常見的使用方式，這表示您 AMP 頁面上的連結很可能會連結到您網站的標準版本。好消息：如果您的標準網站是您的 PWA，那就一切就緒了。

2. 如果您的標準網站是 AMP

在這種情況下，您的標準頁面是您的 AMP 頁面：您正在使用 AMP 建置整個網站，並且僅將 AMP 用作函式庫（有趣的事實：您正在閱讀的這個網站就是以這種方式建置的）。在這種情況下，您 AMP 頁面上的大多數連結將導向其他 AMP 頁面。

您現在可以將 PWA 部署在單獨的路徑上，例如 your-domain.com/pwa，並在有人點擊 AMP 頁面上的連結時，使用已在執行的 Service Worker 來攔截瀏覽器導航

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>

有了這些屬性，後續對 AMP 的所有點擊都將導向您的 PWA，而與任何 service worker 無關。

繼續閱讀 – 您已經走了這麼遠 – 為什麼不重複使用您現有的 AMP 頁面來建置 PWA？這裡告訴您如何做。

作者： @pbakaus