Service Worker は、Webページとは別にバックグラウンドで動き、Webアプリとネットワークの間に入って処理できるブラウザの仕組みです。
PWA を作るときによく出てくる重要な要素で、キャッシュ、オフライン対応、Push通知などに関係します。
初心者向けに言うと、Service Worker は ブラウザの裏側で通信やキャッシュを見張る係 のようなものです。
通常のJavaScriptはページを開いている間に動きますが、Service Workerはページとは少し独立した場所で動き、リクエストをどう扱うかを制御できます。
どんな場面で使うか
Service Workerは、PWAで次のようなことをしたいときに使われます。
- 一度読み込んだCSSやJavaScriptをキャッシュして表示を速くする
- 通信が切れてもオフライン用ページを表示する
- 画像や静的ファイルをキャッシュして再表示を軽くする
- Push通知を受け取る
- ネットワークリクエストを制御する
たとえば、社内チェックリストのWebアプリで、通信が不安定な現場でも最低限の画面を表示したい場合に候補になります。
ただし、入力内容をオフラインで保存して後から同期するような機能は、衝突や二重送信の設計まで必要になるため、かなり慎重に作る必要があります。
注意点
Service Workerで一番気をつけたいのは、古いファイルや古いデータを出し続ける事故です。
キャッシュを強くしすぎると、修正したはずの画面が変わらない、ログアウト後も古い画面が見える、APIの古い結果が残る、といった問題が起きます。
実務では、最初から何でもキャッシュするのではなく、静的ファイルやオフラインページなど、影響が読みやすいところから始めるのが安全です。
詳しくは、PWAとは？できること・向いている場面・実装時の注意点を初心者向けに解説 の記事で整理しています。