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 正規表示式，用於描述如何比對「Shell 內」連結與非 Shell 內連結。
• 必須同時存在這兩個屬性才能觸發 URL 重寫。

URL 重寫的運作方式如下

1. 文件提供一個設定，說明如何在 Shell 內導覽。
2. AMP Runtime 嘗試安裝 Service Worker。
3. 如果 Service Worker 未安裝 (無法安裝)，AMP Runtime 會作為回退機制，透過隱藏的 iframe 預先載入 Shell 頁面。
4. AMP Runtime 將攔截「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 文件的 URL。URL 必須使用 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

Shell 的 URL，用於重寫 URL 導覽以進行無 Service Worker 回退。如需更多詳細資訊，請參閱Shell URL 重寫章節。值必須是與 AMP 文件本身位於相同來源網域上的 URL。

驗證

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