web.devが10月2日に公開した9月分のウェブプラットフォーム新機能まとめに、地味ながら気になる項目がありました。Safari 27が、Service Workerの「Static Routing API」に対応したという話です。Chromeでは版123から使えていた機能で、これでSafariとChrome系の両方で動くようになりました。表示速度に関わる仕組みなので、少し掘り下げて紹介します。
Service Workerが抱えていた待ち時間
Service Workerは、ページとネットワークの間に入って通信を仲介するスクリプトです。オフライン表示やキャッシュの制御に使われ、WordPressでもPWA化やキャッシュ系のプラグインを通じて、知らないうちに組み込まれているサイトがあります。
ただ、Service Workerを置くと、そのサイトへのリクエストはいったんService Workerのfetchイベントを通るのが基本です。Service Workerが止まっている状態なら、まず起動させてから処理を始めることになります。結果として、キャッシュから返すだけ、あるいはそのままネットワークへ流すだけのリクエストでも、Service Workerの起動を待つ時間が生じていました。
Chrome for Developersの解説によると、Static Routing APIはこの部分を解消するためのものです。どのパスをどこから取得するかをあらかじめ宣言しておくことで、ブラウザはキャッシュやネットワークから取るだけのためにService Workerを動かさずに済むとされています。web.devの記事でも、起動を待たずに取得できることでページ遷移の速度が上がると説明されています。
インストール時に道筋を登録しておく
使い方は、Service Workerのinstallイベントの中で event.addRoutes() を呼び、振り分けのルールを渡すだけです。ルールは「条件」と「取得元」の組み合わせで書きます。
条件には、URLの形(urlPattern)、リクエストのメソッド、モード、取得先の種類、Service Workerが起動中かどうか、を指定できます。複数の条件を書いた場合は、すべてを満たしたときだけそのルールが使われます。取得元は、ネットワーク、キャッシュ、従来どおりのfetchイベント、ネットワークとfetchイベントを競わせる方式、の中から選びます。名前を指定して特定のキャッシュストレージを使うこともできます。
たとえば、フォームへのPOST送信はService Workerを通さず、そのままネットワークへ送る、という指定は次のように書けます。
addEventListener('install', (event) => {
event.addRoutes({
condition: {
urlPattern: "/form/*",
requestMethod: "post"
},
source: "network"
});
});画像の拡張子を条件にして特定のキャッシュから返す、記事ページはService Workerが起動中のときだけfetchイベントに回す、といった書き分けも解説の例に挙がっています。なお、試験提供の段階では registerRouter() という一度しか呼べないメソッドでしたが、利用者の意見を受けて今の addRoutes() に変わったそうです。Chromeの開発者ツールでは、Applicationパネルに登録済みのルールが表示され、Networkパネルでもルールに一致したリクエストを見分けられます。
制作現場で押さえておきたいこと
web.devの対応表を見ると、ChromeとEdgeは版123から、Safariは今回の27から対応していますが、Firefoxはまだ未対応です。対応していないブラウザでは従来どおりfetchイベントで処理されるだけなので、ルールを追加しても表示が壊れるわけではありません。速くなる環境が増えた、と受け止めるのが妥当なところです。
中小企業のサイトで直接この記述を書く場面はそう多くないかもしれません。それでも、Service Workerを使っているサイトを引き継いだときや、キャッシュ系のプラグインを選ぶときに、こうした振り分けに対応しているかどうかは一つの見どころになります。特にお問い合わせフォームや管理画面への通信のように、キャッシュを挟む意味がないリクエストを素通しにできるのは、速度だけでなく不具合の切り分けの面でも助かります。
Service Workerは入れると速くなる一方で、仲介が増えるぶんの負担もある、という両面を持つ仕組みでした。その負担を宣言ひとつで減らせる手段が主要なブラウザにそろってきたので、手元のサイトでService Workerが何を受け持っているのか、一度確かめてみる良い機会だと思います。
