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化の第一歩として試してみてください。
コメントは受け付けていません。