amp-install-serviceworker

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

用法

如果 AMP 文件是從與指定 Service Worker URL 相同的來源載入，則會註冊由 src 屬性指定的 Service Worker。如果設定了 data-iframe-src，則當 AMP 文件從 AMP 快取提供時，會將該 URL 載入為 iframe。這樣就能從 AMP 快取安裝 ServiceWorker，以便在使用者造訪原始網站時安裝 Service Worker。

每當 AMP 檔案從您發布 AMP 檔案的原始來源提供時，此 Service Worker 就會執行。在從 AMP 快取提供的文件中，Service Worker 會在背景安裝，但不會執行或影響頁面的行為。

請參閱這篇文章，瞭解 ServiceWorker 如何協助透過 ServiceWorker 打造絕佳的 AMP 體驗。

<amp-install-serviceworker
  src="https://www.your-domain.com/serviceworker.js"
  data-iframe-src="https://www.your-domain.com/install-serviceworker.html"
  layout="nodisplay"
>
</amp-install-serviceworker>

Shell URL 重寫

當 Service Worker 無法使用或尚未啟用時，可以設定 URL 重寫，將導覽重新導向至 shell。這樣一來，舉例來說，AMP Runtime 就能將導覽重新導向至「shell」，而不是「leaf」AMP 文件。

此備用機制僅在來源網站開啟文件時使用，而非在 Proxy 來源網站上使用。

URL 重寫是使用 data-no-service-worker-fallback-url-match 和 data-no-service-worker-fallback-shell-url 屬性設定，如下所示

<amp-install-serviceworker
  layout="nodisplay"
  src="https://www.your-domain.com/serviceworker.js"
  data-no-service-worker-fallback-url-match=".*\.amp\.html"
  data-no-service-worker-fallback-shell-url="https://pub.com/shell"
>
</amp-install-serviceworker>

其中

• data-no-service-worker-fallback-shell-url 指定 AMP+PWA shell 的連結。必須與 AMP 文件位於相同的來源網站。
• data-no-service-worker-fallback-url-match 是 JavaScript 正則運算式，用於描述如何比對「in-shell」連結與非 in-shell 連結。
• 這兩個屬性都必須存在才能觸發 URL 重寫。

URL 重寫的運作方式如下

1. 文件提供組態，說明如何在 shell 中導覽。
2. AMP Runtime 會嘗試安裝 Service Worker。
3. 如果 Service Worker 未安裝 (無法安裝)，AMP Runtime 會改為透過隱藏的 iframe 預先載入 shell 頁面。
4. AMP Runtime 會攔截「in-shell」導覽 (通常是 AMP 對 AMP 的導覽)，如果 Service Worker 未執行，則會重寫導覽 URL 以繼續前往以「shell」為基礎的 URL。
5. shell 將會啟動並透過其路由器執行要求的導覽。一般來說，shell 會立即執行 history.replaceState(href)。

URL 會以 shell-url#href={encodeURIComponent(href)} 的形式重寫。例如

https://pub.com/doc.amp.html
-->
https://pub.com/shell#href=%2Fdoc.amp.html

除了重寫 URL 之外，amp-install-serviceworker 也會嘗試預先載入 shell。這會透過建立具有 #preload 片段的 iframe 完成

<iframe
  src="https://pub.com/shell#preload"
  hidden
  sandbox="allow-scripts allow-same-origin"
></iframe>

當然，為了讓預先載入有效，shell 回應必須具有適當的 HTTP 快取標頭。

屬性

src (必填)

要註冊的 ServiceWorker 的 URL，必須使用 https 通訊協定。

data-iframe-src

安裝 ServiceWorker 的 HTML 文件網址。網址必須使用 https 通訊協定。如果 AMP 頁面要從 AMP 快取提供，則這個屬性是必要的。

data-scope

要安裝的 Service Worker 的範圍。

layout

必須具有值 nodisplay。

data-no-service-worker-fallback-url-match

這是一個正則運算式，用於比對要重寫的 URL，以便在沒有 Service Worker 的備用機制中透過 shell 導覽。如需更多詳細資訊，請參閱「Shell URL 重寫」章節。值必須是有效的 JavaScript RegExp 字串。例如

• amp.html
• .*amp
• .*\.amp\.html
• .*\/amp$

data-no-service-worker-fallback-shell-url

在沒有 Service Worker 的備用機制中，用於重寫 URL 導覽的 shell URL。如需更多詳細資訊，請參閱「Shell URL 重寫」章節。值必須是與 AMP 文件本身相同來源網站上的 URL。

驗證

請參閱 AMP 驗證器規格中的「amp-install-serviceworker 規則」。