PWAの基礎知識（その1）「Service Workerの使い方」

PWA（Progressive Web App）という単語がトレンドになっています。PWAは特定の技術を指す言葉ではなく、様々な技術が組み合わさったスマートフォンにおけるWebアプリのベストプラクティスと言えます。

今回はそんなPWAの基礎になる、Service Workerについて紹介します。

利用できるWebブラウザについて

Can I useによると、モダンなブラウザの中でService Workerが使えないのはIEとOpera miniだけになっています。スマートフォンであれば安心して利用できるようになっています。

使うための基本形

Service WorkerはフロントエンドのJavaScriptとは別プロセスで実行されます。まずWebブラウザ側のJavaScriptにてService Workerを登録します（今回は sw.js としています）。

これで登録できます。

Service Workerの内容

Service Workerではselfというオブジェクトが存在します。これはdocumentが使えないService Worker内で全体のイベントハンドリングを行う存在です。イベントハンドリングが基本機能になります。

インストール時の内容

インストール（install）イベントではキャッシュの設定をします。以下のコードではルートのHTMLだけキャッシュします。

各リソースへのリクエスト

画像に限らず、リソースへのアクセスがあるとこのfetchイベントが発生します。

ここではキャッシュの存在を確認し、キャッシュがなければfetchで改めてリクエストします。

例えばこの状態で一度Webページを表示し、オフラインして表示するとオフライン化はされますが、HTMLだけしか表示されません。

そこでキャッシュするリソースを追加します。

この状態で一度オンライン状態で読み込み、再度オフラインにして読み込み直すとスタイルシートもキャッシュされているのが確認できます。

---

Service Workerを使ったリソースのキャッシングの仕組みはとてもシンプルです。PWA化の第一歩として試してみてください。