透過連線至 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 Shell，同時使用者可以享受您的內容。
當使用者點擊您網站上的另一個連結時（例如，底部的呼籲性用語，以獲得更像應用程式的體驗），Service Worker 會攔截請求、接管頁面並載入 PWA Shell 作為替代。

繼續閱讀以瞭解原因，以及如何使用此開發模式。

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

AMP 適用於初始使用者獲取

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

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

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

AMP 與 PWA 的優缺點。

使用 `amp-install-serviceworker` 暖啟您的 PWA

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

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

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

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

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

您現在可以在一個單獨的路徑（例如 your-domain.com/pwa）上部署您的 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 標籤，您正在指示 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