• 網站

amp-install-serviceworker

簡介

<a href="/documentation/components/amp-install-serviceworker/"><code>amp-install-serviceworker</code></a> 元件可透過相同來源或 Google AMP 快取安裝 Service Worker。

<a href="https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md">Service Worker</a> 即使在瀏覽器關閉時，仍可在背景執行、預先快取轉譯所需內容、向使用者傳送通知等等。

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

Service Worker 目前適用於 <a href="https://jakearchibald.github.io/isserviceworkerready/">Chrome、Edge、Firefox、Opera 和 Safari</a>。

設定

匯入 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

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

之所以 <code>amp-install-serviceworker</code> 需要個別的 <code>data-iframe-src</code> 選項，是因為基於安全性考量，瀏覽器無法從其他網域安裝 Service Worker。如需 Service Worker 安全性考量的詳細資訊，請參閱 <a href="https://www.w3.org/TR/service-workers/#security-considerations">官方規格</a>。

<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. 存取 <a href="/components/amp-install-serviceworker">amp-install-serviceworker</a> 兩次。
2. 開啟 Chrome 開發人員工具並導覽至「資源」分頁 (或較新版 Chrome 的「應用程式」分頁)。在「Service Worker」區段中，您可以看到 <code>/sw.js</code> 已安裝。
3. 接著開啟「快取儲存空間」區段。此區段會顯示所有快取的圖片和影片。
4. 停用您的網路連線並重新載入此網頁。它仍然可以運作！在開發人員工具的「網路」分頁中，您會看到 Service Worker 快取了哪些資源。

• 作者：<a href="https://github.com/ymotongpoo" rel="nofollow" target="_blank"> @ymotongpoo </a>