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

Rachel Andrew

Chrome 123 以降では、Service Worker Static Routing API を使用できます。この API を使用すると、特定のリソースパスを取得する方法を宣言的に記述できます。つまり、ブラウザで Service Worker を実行しなくても、キャッシュから、またはネットワークから直接レスポンスをフェッチできます。この API は Chrome 116 以降、オリジン トライアルとなっています。この投稿では、Chrome 123 でリリースされる API について詳しく説明します。

API を使用する

API を使用するには、Service Worker の install イベントで 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"
  });
});

次の例では、フォームへの投稿がネットワークに直接送信され、Service Worker をバイパスしています。

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 が表示されます。対応するルールが [アプリケーション] タブに表示されます。