Service Workerは、Webページとネットワークの間に常駐するJavaScript製のプロキシ層を提供するブラウザAPIです。W3Cのドラフトが2014年に登場し、2015年にGoogle Chromeが最初に正式実装しました。ページとは独立したワーカースレッドで動き、fetchイベントを横取りしてキャッシュ済みリソースを返したり、プッシュ通知の受信、バックグラウンド同期、ペリオディック更新といった機能を実現します。PWAの中核技術として位置付けられ、Service Workerなしには真の意味でのオフライン対応Webアプリは成立しません。
この記事の目次
- 通信を握る常駐スクリプト
- AppCacheの失敗からの再設計
- オフライン体験と通知の現場
- Web Workerとの違い
- まとめ
通信を握る常駐スクリプト
Service Workerは登録されるとブラウザのバックグラウンドに常駐し、対象スコープ配下のページから出る通信を全て横取りできます。fetchイベントハンドラ内でevent.respondWith()を呼ぶと、開発者がキャッシュから返すか、ネットワークに行くか、あるいは両方をマージするかを自由に決められるようになります。Cache Storage APIと組み合わせると、初回訪問時に取得したHTML・CSS・JS・画像をディスクに蓄え、2回目以降は瞬時に表示できる「アプリ・シェル・モデル」が実現します。
もう一つの大きな役割が通知の受信です。Push APIから配信されたメッセージはService Worker内で受信され、Notification APIを呼んで端末のシステムトレイに通知を表示します。ページが開いていなくても通知を出せる点がブラウザJSとの決定的な違いで、ECやニュースサイトの再訪導線として広く活用されています。さらにBackground SyncやPeriodic SyncによってオフラインからオンラインになったタイミングでPOSTを再送する、夜間に最新コンテンツを取りに行くといった処理も組めます。
AppCacheの失敗からの再設計
Service Workerが登場する前、Webのオフライン対応はHTML5仕様のApplication Cache（AppCache）が担っていました。しかしAppCacheはmanifestファイルの細かな挙動が複雑で、キャッシュの更新タイミングがコントロールしづらく、Jake Archibald氏の有名なブログ記事「Application Cache is a Douchebag」で痛烈に批判されるほど開発者から嫌われていました。この反省を踏まえて2014年にW3Cで起草されたのがService Worker仕様です。
中心人物はChromeチームのアレックス・ラッセル氏とジェイク・アーチボルド氏で、「キャッシュ戦略は宣言ではなくコードで書く」という大胆な発想で再設計されました。2015年初頭にChrome 40で正式リリースされ、続いてFirefox 44、Opera、Samsung Internetが対応しました。Microsoft EdgeはChromiumベース化に伴い2020年から、AppleはiOS 11.3（2018年）で限定的にサポートし、現在ではすべての主要ブラウザで使える標準APIに育っています。
オフライン体験と通知の現場
Service Workerは「圏外でも画面が真っ白にならないWebアプリ」を作るための基盤として利用されます。Google MapsやFlipboardは地図タイルや記事サムネイルをCache Storageに溜め、地下鉄移動中でも閲覧できるようにしています。ECサイトでは商品ページ・カート画面の主要HTMLを先読みしておき、通信が切れた瞬間でもカートのレビューだけは進められる、といった部分的オフライン体験が組まれています。
プッシュ通知の用途も大きく、ニュースサイト・SNS・SaaS管理画面がブラウザのプッシュ購読を促進し、メール経由よりも開封率の高い再訪導線として活用しています。業務系では、店舗端末のバーコード読み取りツールが一時的にネット切断しても、Background Syncで在庫更新を後でまとめてサーバーに反映する設計が採られます。Service Workerはこうした「不確実なネットワーク前提のUX」を組むうえで唯一の標準的な手段です。
Web Workerとの違い
名前が似ているため混同されやすいのがWeb Workerです。Web Workerは重いJavaScript計算をUIスレッドから切り離すための仕組みで、ページが開いている間だけ生き、postMessageでメインスレッドと通信します。画像エンコードや大規模なJSONパース、暗号計算などを別スレッドに逃がす目的で使われ、通信を横取りしたりプッシュ通知を受け取ったりすることはできません。
Service Workerはこのワーカー機構を土台にしつつ、対象オリジンの通信全体を制御する権限を持ち、ページが閉じていてもブラウザのバックグラウンドで生き続けます。DOMに直接触れない点、importScriptsで他スクリプトを取り込める点は両者共通ですが、「計算の高速化」を担うWeb Workerに対し、Service Workerは「通信と通知のコントロール」を担う、というのが基本的な棲み分けです。PWAやBackground Syncを語る文脈で出てくるのは常にService Workerの方になります。
まとめ
Service Workerは2014年に仕様化された、ブラウザに常駐するプロキシ層用のJavaScript APIです。fetch横取り・Cache Storage・Push通知を束ねてオフライン体験と再訪導線を実現し、PWAの心臓部として定着しました。Web Workerと混同されがちですが、通信と通知を握る点で性格が大きく異なる、不可欠なモダンWeb技術です.
※本記事はIT用語辞典の手書きドラフトです。公開前に最新情報・出典を確認のうえ加筆修正してください。
コメント