輕鬆離線存取及提升效能

Service Worker 可提供豐富的離線體驗，並在各種網路強度下提供一致的使用者體驗。藉由在瀏覽器中快取資源，網路應用程式可以向使用者提供資料、資產和離線頁面，以保持使用者的參與度和知情權。

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

安裝 Service Worker

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

注意 – 如果您不熟悉 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，最好準備一個簡單的空指令 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