輕鬆離線存取與提升效能

重要事項：本文件不適用於您目前選取的格式 stories！

Service Worker 可實現豐富的離線體驗，並在不同的網路強度下提供一致的使用者體驗。透過在瀏覽器中快取資源，Web 應用程式能夠向使用者提供資料、資產和離線頁面，以保持他們的參與和獲取資訊。

Service Worker 無法與您頁面的 AMP 快取版本互動。請將其用於後續前往您網域的路徑。

安裝 Service Worker

Service Worker 是位於您的頁面和伺服器之間的用戶端 Proxy，用於建構出色的離線體驗、快速載入的應用程式外殼情境，以及傳送推播通知。

注意事項 – 如果您對 Service Worker 的概念不熟悉，請閱讀 WebFundamentals 上的簡介。

您的 Service Worker 需要在指定的頁面上註冊，否則瀏覽器將找不到或執行它。預設情況下，這是藉由一小段 JavaScript 程式碼完成的。在 AMP 頁面上，您可以使用 amp-install-serviceworker 元件來達到相同的目的。

為此，首先透過指令碼將 amp-install-serviceworker 元件包含在您網頁的 <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>

如果使用者導覽至您網域上的 AMP 頁面 (而不是通常從 AMP 快取提供的首次點擊)，Service Worker 將接管並執行許多很棒的功能。

AMP Service Worker

如果您來到這裡，表示您正在使用 AMP 建構頁面。AMP 團隊非常重視將使用者放在首位，並為他們提供世界一流的網路體驗。為了保持這些體驗的一致性，AMP 團隊特別為 AMP 建立了一個 Service Worker！

提示 – 按照我們的教學課程學習如何在您的 PWA 中使用 AMP Service Worker。

安裝 AMP Service Worker

以最少的步驟安裝 AMP Service Worker

將 AMP Service Worker 程式碼匯入您的 Service Worker 檔案。

  importScripts('https://cdn.ampproject.org/sw/amp-sw.js');

使用以下程式碼安裝 Service Worker。

  AMP_SW.init();

完成。

自動快取

AMP Service Worker 會自動快取 AMP 指令碼檔案和 AMP 文件。透過快取 AMP 指令碼檔案，它們可以立即供使用者瀏覽器使用，在不穩定的網路上實現離線功能和更快的頁面速度。

如果您的應用程式需要特定類型的文件快取，AMP Service Worker 允許自訂。例如，新增一份拒絕清單，列出應始終從網路請求的文件。在以下範例中，請將 Array<RegExp> 替換為代表您想要避免快取的文件之正規表示式陣列。

AMP_SW.init(
documentCachingOptions: {
denyList?: Array<RegExp>;
}
);

在此處閱讀更多關於自訂文件快取的資訊。

最佳化 AMP Service Worker

為了充分利用 AMP Service Worker 的功能，應設定選填欄位以快取必要的資產並預先擷取連結。

驅動使用者造訪頁面的資產 (例如影片、重要圖片或可下載的 PDF) 應快取，以便在使用者離線時可以再次存取。

AMP_SW.init(
assetCachingOptions: [{
regexp: /\.(png|jpg)/,
cachingStrategy: 'CACHE_FIRST'
}],
);

您可以自訂快取策略並定義拒絕清單。

可以預先擷取使用者可能需要造訪的頁面連結，讓他們在離線時也能存取。這可以透過將 data-prefetch 屬性新增至連結標籤來完成。

<a href='....' data-rel='prefetch' />

離線體驗

透過包含離線頁面，告知使用者他們已離線，並應在恢復連線後嘗試重新載入網站。AMP Service Worker 可以快取頁面及其資產。

AMP_SW.init({
offlinePageOptions: {
url: '/offline.html';
assets: ['/images/offline-header.jpg'];
}
})

成功的離線頁面看起來像是您網站的一部分，因為它與應用程式的其餘部分具有一致的 UI。

強制更新

團隊正在努力實作強制更新/移除功能，以便在 AMP Service Worker 需要停用或變更 (如果使用者部署發生錯誤) 時使用。

為了有效管理 Service Worker，您應該瞭解標準 HTTP 快取如何影響 Service Worker 的 JavaScript 保持在最新狀態的方式。使用適當 HTTP 快取指示詞提供的 Service Worker 可以透過進行適當的變更並將您的 Service Worker 重新部署到您的託管環境來解決小的錯誤修正。如果您需要移除 Service Worker，最好手邊準備一個簡單的 no-op Service Worker 檔案，如下所示：

self.addEventListener('install', () => {
  // Skip over the "waiting" lifecycle state, to ensure that our
  // new service worker is activated immediately, even if there's
  // another tab open controlled by our older service worker code.
  self.skipWaiting();
});

閱讀更多關於管理已部署 Service Worker 的資訊。

撰寫自訂 Service Worker

您可以使用上述技術來啟用 AMP 網站的離線存取，以及在頁面從網域提供服務後立即擴充頁面。這是因為您可以透過 Service Worker 的 fetch 事件修改回應，並傳回您想要的任何回應。

self.addEventListener('fetch', function(event) {
event.respondWith(
caches.open('mysite').then(function(cache) {
return cache.match(event.request).then(function(response) {
var fetchPromise = fetch(event.request).then(function(networkResponse) {
cache.put(event.request, networkResponse.clone());
return networkResponse;
})

        // Modify the response here before it goes out..
        ...

        return response || fetchPromise;
      })
    })

);
});

透過使用此技術，您可以修改您的 AMP 頁面，使其具備各種額外功能，這些功能在其他情況下會導致 AMP 驗證失敗，例如：

需要自訂 JS 的動態功能。
為您的網站自訂/僅與您的網站相關的元件。

由 @CrystalOnScript 撰寫
由 @pbakaus 貢獻