Service Worker Static Route API 來源試用

布蘭登 (Brendan Kenny)
Brendan Kenny

Service Worker 是一項功能強大的工具,可讓網站離線運作,並建立專門的快取規則。服務工作站 fetch 處理常式可查看其所控制網頁上的每個要求,並可決定其是否要從服務工作站快取提供回應,還是要重新撰寫網址,以便完全擷取不同的回應 (例如,依據本機使用者的偏好設定)。

不過,如果網頁已有一段時間首次載入,且控制服務工作站目前並未執行,服務工作站可能會有效能成本降低的情形。由於所有擷取作業都必須透過 Service Worker 進行,因此瀏覽器必須等待 Service Worker 啟動並執行,系統才能知道要載入哪些內容。啟動的成本可能很低,但相當可觀,對於使用服務工作站透過快取策略改善效能的開發人員而言,這項啟動費用可能很低。

導覽預先載入是解決問題的一種方法,允許透過網路同時發出導覽要求,與服務工作站啟動程序同時要求,但僅限於初始導覽要求,但仍會在關鍵路徑中加入 Service Worker。導覽預先載入功能啟動後,便有許多努力為問題空間開發更通用的解決方案,包括一些要求完全不在服務工作站啟動時封鎖的方法。

Service Worker Static Routing API

從 Chrome 116 開始,實驗性的 Service Worker Static Route API 可提供實驗性解決方案的第一步。安裝 Service Worker 後,即可使用 Service Worker Static Routing API,透過宣告方式指出特定資源路徑的擷取方式。

在 API 的初始版本中,使用者可將路徑宣告為一律從網路提供,而非服務工作站。之後載入受控管的網址時,瀏覽器可以在服務工作站啟動之前,從這些路徑擷取資源。這樣會從您知道不需要 Service Worker 的路徑中移除 Service Worker。

如要使用 API,服務工作站會透過一組規則在 install 事件上呼叫 event.registerRouter

self.addEventListener('install', event => {
  if (event.registerRouter) {
    // Go straight to the network and bypass invoking "fetch" handlers for all
    // same-origin URLs that start with '/form/'.
    event.registerRouter([{
      condition: {
        urlPattern: {pathname: '/form/*'},
      },
      source: 'network',
    }]);
  }
});

每項規則通常都有兩個屬性:

  • condition:使用 URL Pattern API 指定規則的套用時機,以比對資源路徑。屬性可採用 URLPattern 例項,或是與傳遞至 URLPattern 建構函式的對等純物件 (例如 new URLPattern({pathname: '*.jpg'}){pathname: '*.jpg'} 皆可)。

    網址格式的靈活性代表規則能夠比對路徑中的任何資源,以及非常明確且詳細的條件。常見的轉送程式庫使用者通常應該熟悉這些模式。

  • source:指定與 condition 相符的資源如何載入。目前只支援 'network' 值 (略過服務工作站直接透過網路載入資源),但計劃未來將其擴展至其他值

應用情境

如上所述,API 的初始版本基本上是 Service Worker 控制項的逸出字串,適用於某些路徑。視情況而定,請根據您使用服務工作站的方式,以及使用者如何瀏覽您的網站。

例如,如果您的網站使用快取優先策略 (恢復為網路),但其中有部分內容很少造訪,表示快取中幾乎沒有值,例如封存內容或 RSS 動態消息。限制「只能」在服務工作站中設定從網路擷取這些路徑,但服務工作站仍必須啟動並執行,才能決定如何處理這些要求。

相反地,靜態 Route API 會使用幾個宣告行,完全略過 Service Worker:

self.addEventListener('install', event => {
  if (event.registerRouter) {
    event.registerRouter([{
      condition: {
        urlPattern: {pathname: '/feeds/*.xml'},
      },
      source: 'network',
    }, {
      condition: {
        urlPattern: {pathname: '/archives/*'},
      },
      source: 'network',
    }]);
  }
});

隨著 Service Worker Static Routing API 不斷發展,本方案的規劃是為了讓這項設定變得更有彈性,並支援更多情境,例如以宣告方式進行網路擷取,以及服務工作站啟動程序。詳情請參閱規格說明如何探索 API 的最終「最終形式」

試用 Service Worker Static Routing API

Chrome 自來源試用後 116 版起提供 Service Worker Static Route API,可讓開發人員邀請實際使用者在網站上測試 API,藉此評估其效果。如需來源試用的背景資訊,請參閱「開始使用來源試用」。

如要進行本機測試,您可以透過 chrome://flags/#service-worker-static-router 的標記啟用 Service Worker Static Routing API,或是透過 --enable-features=ServiceWorkerStaticRouter 等指令執行 Chrome。

意見回饋與未來規劃

Service Worker Static Routing API 目前處於開發階段,仍在發展中。若您覺得這些做法對您有用,請透過來源試用試用,並針對 API、實作和可用功能提供意見