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 文件。

此 Fallback (回退) 僅在文件於來源網域開啟時使用，而不在 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 未安裝 (無法安裝)，作為 Fallback (回退)，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 文件的 URL。URL 必須使用 https 協定。如果 AMP 頁面將從 AMP 快取提供，則此屬性是必要的。

data-scope

要安裝的 Service Worker 的 scope (範圍)。

layout (版面配置)

必須具有值 nodisplay。

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

這是一個正規表示式，用於比對要重寫的 URL，以便在沒有 Service Worker Fallback (回退) 的情況下透過 shell 導覽。請參閱Shell URL 重寫章節以瞭解更多詳細資訊。該值必須是有效的 JavaScript RegExp 字串。例如

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

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

在沒有 Service Worker Fallback (回退) 的情況下，用於重寫 URL 導覽的 shell 的 URL。請參閱Shell URL 重寫章節以瞭解更多詳細資訊。該值必須是與 AMP 文件本身位於相同來源網域上的 URL。

驗證

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