透過連結至 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 用於豐富的互動性和參與度

另一方面，漸進式網路應用程式 (Progressive Web Apps, 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 重寫的功能來解決此問題。藉由將後備 URL 模式新增至 amp-install-serviceworker 標記，您可以指示 AMP 將給定頁面上所有相符的連結重寫為改為導向另一個舊版 Shell URL（如果未偵測到 Service Worker 支援）

<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