Service Worker Static Routing API を使用して、特定のパスで Service Worker をバイパスする

Rachel Andrew

Chrome 123 以降では、Service Worker の静的ルーティング API を利用できます。この API を使用すると、特定のリソースパスの取得方法を宣言的に指定できます。つまり、ブラウザはキャッシュまたはネットワークから直接レスポンスを取得するためだけに Service Worker を実行する必要がなくなります。この API は Chrome 116 以降オリジントライアルで提供されており、この投稿では Chrome 123 での API のリリースについて詳しく説明します。

API を使用する

API を使用するには、サービスワーカーの install イベントで event.addRoutes を呼び出します。このメソッドには、次のプロパティを持つルートのリストを渡します。

condition

ルールが適用されるタイミングを指定します。次のプロパティを受け入れます。

urlPattern: URLPattern インスタンス、または URLPattern コンストラクタに渡すことができる有効な URLPattern を表す文字列。
requestMethod: リクエストのメソッドを含む文字列。
requestMode: リクエストのモードを含む文字列。
requestDestination: リクエストのデスティネーションを含む文字列。
runningStatus: "running" または "not-running" のいずれかの文字列。これは、サービスワーカーの実行ステータスを示します。

source

: condition に一致するリソースの読み込み方法を指定します。次のいずれかの文字列。

"network"
"cache"
"fetch-event"
"race-network-and-fetch-handler"

次の例では、現在実行中の場合、"/articles" で始まる URL は Service Worker にルーティングされます。複数の条件（urlPattern や runningStatus など）がある場合、ルートを使用するにはすべての条件を満たす必要があります。

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {

          urlPattern: "/articles/*",
          runningStatus: "running"
    },
    source: "fetch-event"
  });
});

次の例では、フォームへの投稿がネットワークに直接送信され、サービスワーカーがバイパスされます。

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {
          urlPattern: "/form/*",
          requestMethod: "post"
    },
    source: "network"
  });
});

次の例では、"pictures" という名前のキャッシュストレージを使用して、ファイル拡張子が .png または .jpg のファイルを取得します。

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {
      or: [
        {urlPattern: "*.png"},
        {urlPattern: "*.jpg"}
      ]
    },
    source: {
      cacheName: "pictures"
    }
  });
});

オリジントライアルからの変更点

元のオリジントライアルでは InstallEvent.addRoutes() の代わりに InstallEvent.registerRouter() が使用されていたため、registerRouter() メソッドは 1 回しか呼び出せませんでした。この変更は、オリジントライアルに対するコミュニティからのフィードバックに基づいて行われました。

この新しい API では、Chrome 121 で導入された URLPattern の変更も活用され、リクエストのメソッド、モード、宛先を指定する機能と、追加のソースオプションが追加されています。

Chrome DevTools でのサポート

登録されたルータールールは、[アプリケーション] パネルの [サービスワーカー] タブに表示されます。

[アプリケーション] パネルでハイライト表示されているルータールール。

[ネットワーク] パネルで、リクエストが登録済みのルールと一致すると、サイズ列にそのことが示されます。サイズ列にポインタを合わせると、登録されたルーター ID が表示されます。対応するルールが [アプリケーション] タブに表示されます。

[ネットワーク] パネルに表示されるルーター ID。