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 としています）。
| 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内で全体のイベントハンドリングを行う存在です。イベントハンドリングが基本機能になります。
| self.addEventListener('install', e => { | |
| // インストール時に実行 | |
| }); | |
| self.addEventListener('activate', e => { | |
| // アップデート時など | |
| }); | |
| self.addEventListener('fetch', e => { | |
| // 外部リソース取得時 | |
| }); |
インストール時の内容
インストール（install）イベントではキャッシュの設定をします。以下のコードではルートのHTMLだけキャッシュします。
| self.addEventListener('install', e => { | |
| // インストール時に実行 | |
| e.waitUntil( | |
| caches.open('mismith').then(cache => { | |
| return cache.addAll([ | |
| '/' | |
| ]) | |
| .then(() => self.skipWaiting()); | |
| }) | |
| ); | |
| }); |
各リソースへのリクエスト
画像に限らず、リソースへのアクセスがあるとこのfetchイベントが発生します。
| 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だけしか表示されません。
そこでキャッシュするリソースを追加します。
| self.addEventListener('install', e => { | |
| // インストール時に実行 | |
| e.waitUntil( | |
| caches.open('mismith').then(cache => { | |
| return cache.addAll([ | |
| '/', | |
| '/client.js', | |
| '/style.css' | |
| ]) | |
| .then(() => self.skipWaiting()); | |
| }) | |
| ); | |
| }); |
この状態で一度オンライン状態で読み込み、再度オフラインにして読み込み直すとスタイルシートもキャッシュされているのが確認できます。
Service Workerを使ったリソースのキャッシングの仕組みはとてもシンプルです。PWA化の第一歩として試してみてください。
コメントは受け付けていません。