Skip to content

PWAの基礎知識(その1)「Service Workerの使い方」

by : 2018/06/21

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化の第一歩として試してみてください。

From → HTML5

コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。