輕鬆離線存取及提升效能

重要事項：此文件不適用於您目前選取的格式電子郵件！

Service Worker 能在網路連線不穩定的情況下，提供豐富的離線體驗和一致的使用者體驗。透過在瀏覽器中快取資源，Web 應用程式能夠向使用者提供資料、素材和離線頁面，以保持他們的參與和知情。

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

安裝 Service Worker

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

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

您的 Service Worker 需要在指定的網頁上註冊，否則瀏覽器將無法找到或執行它。預設情況下，這會透過一點 JavaScript 來完成。在 AMP 網頁上，您可以使用 amp-install-serviceworker 元件來達到相同的目的。

為此，首先透過頁面 <head> 中的指令碼包含 amp-install-serviceworker 元件

<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 將會接管並執行許多很棒的事情 myriad of cool things。

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