• 網站

amp-install-serviceworker

簡介

<amp-install-serviceworker> 組件能夠透過相同來源或 Google AMP Cache 安裝 Service Worker。

Service Worker 即使在瀏覽器關閉時也能在背景執行，在渲染前預先快取所需內容、向使用者發送通知等等。

這個範例安裝了一個 Service Worker，會在背景快取此頁面。您可以在安裝 Service Worker 後離線載入此頁面來進行測試。

Service Worker 目前在 Chrome、Edge、Firefox、Opera 和 Safari 中可用。

設定

導入 amp-install-serviceworker 組件。

<script async custom-element="amp-install-serviceworker" src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>

安裝 Service Worker

呼叫 amp-install-serviceworker 時可以包含 src 和 data-iframe-src 屬性。src 是要安裝的 Service Worker 的位置，當文件透過與 Service Worker 檔案相同的來源存取時使用。當文件透過 Google AMP Cache 存取時，會使用 data-iframe-src 屬性中註記的 HTML 文件來安裝 Service Worker。我們建議同時使用這兩個屬性。

amp-install-serviceworker 需要單獨的 data-iframe-src 選項的原因是，基於安全考量，瀏覽器無法從其他網域安裝 Service Worker。如需 Service Worker 安全考量的詳細資訊，請參閱官方規格。

<amp-install-serviceworker
    src="/serviceworker.js"
    data-iframe-src="https://amp.dev.org.tw/serviceworker.html"
    layout="nodisplay">
</amp-install-serviceworker>

在此範例中，當使用者第二次存取此 AMP 頁面時，Service Worker 會被安裝並快取此網域根路徑下的所有圖片檔案和影片檔案。

按照下列步驟確認 Service Worker 已安裝並如預期運作

1. 存取 amp-install-serviceworker 兩次。
2. 開啟 Chrome 開發人員工具並導航至「資源」標籤（或較新版本 Chrome 上的「應用程式」標籤）。在「Service Workers」區段中，您可以看到 /sw.js 已安裝。
3. 然後開啟「快取儲存空間」區段。它會顯示所有快取的圖片和影片。
4. 停用您的網路連線並重新載入此頁面。它仍然可以運作！在開發人員工具的「網路」標籤中，您會看到哪些資源被 Service Worker 快取。

• 由 @ymotongpoo 撰寫