このページは Cloud Translation API によって翻訳されました。

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

Rachel Andrew

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

API を使用する

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

condition

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

urlPattern: URLPattern インスタンス、または URLPattern コンストラクタに渡すことができる有効な URLPattern を表す文字列。
requestMethod: リクエストメソッドを含む文字列。
requestMode: リクエストのモードを含む文字列。
requestDestination: リクエストの宛先を含む文字列。
runningStatus: "running" または "not-running" の文字列。これは、Service Worker の実行ステータスを示します。

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 でのサポート

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

アプリケーションパネルでハイライト表示されたルータールール。

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

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