はじめに
ServiceWoker。PWA対応の際によく聞くけど、なんなの？？それを解消するための記事です。
ServiceWorker
一言で言うと、「ブラウザとWebサーバーの間で動作する実行環境」の事です。ServiceWorkerは、オフラインでもWebアプリケーションを実行できるようにすることができ、またキャッシュを使用してページを高速に読み込むことができます。ServiceWorkerは、ネットワークの負荷を軽減し、Webアプリケーションのパフォーマンスを向上させるために、さまざまな方法で利用されます。
で、結局なんなの？？ServiceWorker
ブラウザとWebサーバの間で動作することはわかったよと。で、結局なんなのか？？ここまで理解で来てないとServiceWorkerが扱えない。ServiceWorkerの仕組みはmozillaが出している図が分かりやすかったので、載せておきます。
※引用元 https://developer.mozilla.org/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers/sw-lifecycle.svg
ServiceWorkerの仕事
install
ローカル端末にキャッシュを作成すること。Webアプリケーションをオフラインで使用できるようにするための仕組みであり、パフォーマンスの向上などにも役立てられている。ServiceWorkerの初回起動時に実施される。
activate
ServiceWorkerが利用できる状態にすること。Service Workerがインストールされた後に初めて発生し、Service Workerが実行可能な状態になるまでの後処理を実行するために使用されます。activateイベントの主な目的は、Service Workerが以前のバージョンのキャッシュやリソースを削除し、新しいバージョンをインストールすることを可能にすることです。Service Workerが更新された場合、以前のバージョンのService Workerによってキャッシュされたリソースがブラウザに残っている場合があります。このため、activateイベントハンドラ内で、以前のバージョンのキャッシュを削除する必要があります。
message
messageイベントは、ServiceWorkerGlobalScopeインターフェースのイベントで、サービスワーカーが着信メッセージを受信したときに発生します。Service Workerは、postMessage()メソッドを使用して制御されたページにメッセージを送信することができます。そして、サービスワーカーは、任意で、制御されたページに対応するClient.postMessage()メソッドを介して返信することができます。
fetch
オンライン/オフライン時のレスポンス返却の制御。ServiceWorkerのfetchイベントは、サービスワーカーがネットワークリクエストをフックし、自分でレスポンスを返すか、オンラインの場合はネットワークからレスポンスを取得して返すことができるイベントです。
sync
オフライン→オンラインに切り替わった際、自動で実行されるタスク。ServiceWorkerのSyncManagerを使用すると、オフライン時に実行される非同期タスクを設定することができます。これにより、オンラインになったときにServiceWorkerが自動的に同期を開始し、タスクを実行できるようになります。
push
プッシュ通知を受信する際に利用する。