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

另一方面，漸進式 Web 應用程式 (Progressive Web Apps) 允許更高的互動性和參與度，但沒有 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 重寫的功能來解決這個問題。透過將後備 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>

有了這些屬性，後續在 AMP 上的所有點擊都將轉到您的 PWA，而與任何 service worker 無關。

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

作者： @pbakaus