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 としています）。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| if ('serviceWorker' in navigator) { | |
| navigator.serviceWorker | |
| .register('./sw.js', { | |
| scope: './' | |
| }) | |
| .then((reg) => { | |
| if(reg.installing) { | |
| console.log('Service Worker をインストール中です'); | |
| } else if(reg.waiting) { | |
| console.log('Service Worker をインストールしました'); | |
| } else if(reg.active) { | |
| console.log('Service Worker は有効です'); | |
| } | |
| }) | |
| .catch((error) => { | |
| // registration failed | |
| console.log('登録失敗：', error); | |
| }); | |
| } |
これで登録できます。
Service Workerの内容
Service Workerではselfというオブジェクトが存在します。これはdocumentが使えないService Worker内で全体のイベントハンドリングを行う存在です。イベントハンドリングが基本機能になります。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| self.addEventListener('install', e => { | |
| // インストール時に実行 | |
| }); | |
| self.addEventListener('activate', e => { | |
| // アップデート時など | |
| }); | |
| self.addEventListener('fetch', e => { | |
| // 外部リソース取得時 | |
| }); |
インストール時の内容
インストール（install）イベントではキャッシュの設定をします。以下のコードではルートのHTMLだけキャッシュします。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| self.addEventListener('install', e => { | |
| // インストール時に実行 | |
| e.waitUntil( | |
| caches.open('mismith').then(cache => { | |
| return cache.addAll([ | |
| '/' | |
| ]) | |
| .then(() => self.skipWaiting()); | |
| }) | |
| ); | |
| }); |
各リソースへのリクエスト
画像に限らず、リソースへのアクセスがあるとこのfetchイベントが発生します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| self.addEventListener('fetch', e => { | |
| // 外部リソース取得時 | |
| console.log('fetch', e.request.url); | |
| e.respondWith( | |
| caches.match(e.request, { | |
| ignoreSearch:true | |
| }) | |
| .then(response => { | |
| return response || fetch(e.request); | |
| }) | |
| ); | |
| }); |
ここではキャッシュの存在を確認し、キャッシュがなければfetchで改めてリクエストします。
例えばこの状態で一度Webページを表示し、オフラインして表示するとオフライン化はされますが、HTMLだけしか表示されません。
そこでキャッシュするリソースを追加します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| self.addEventListener('install', e => { | |
| // インストール時に実行 | |
| e.waitUntil( | |
| caches.open('mismith').then(cache => { | |
| return cache.addAll([ | |
| '/', | |
| '/client.js', | |
| '/style.css' | |
| ]) | |
| .then(() => self.skipWaiting()); | |
| }) | |
| ); | |
| }); |
この状態で一度オンライン状態で読み込み、再度オフラインにして読み込み直すとスタイルシートもキャッシュされているのが確認できます。
Service Workerを使ったリソースのキャッシングの仕組みはとてもシンプルです。PWA化の第一歩として試してみてください。
hifive開発者ブログ 
コメントは受け付けていません。