輕鬆離線存取和提升效能

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

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 Cache 提供的首次點擊不同)，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