コンテンツへスキップ

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 としています)。

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);
});
}

view raw
index.js
hosted with ❤ by GitHub

これで登録できます。

Service Workerの内容

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

self.addEventListener('install', e => {
// インストール時に実行
});
self.addEventListener('activate', e => {
// アップデート時など
});
self.addEventListener('fetch', e => {
// 外部リソース取得時
});

view raw
index.js
hosted with ❤ by GitHub

インストール時の内容

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

self.addEventListener('install', e => {
// インストール時に実行
e.waitUntil(
caches.open('mismith').then(cache => {
return cache.addAll([
'/'
])
.then(() => self.skipWaiting());
})
);
});

view raw
index.js
hosted with ❤ by GitHub

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

画像に限らず、リソースへのアクセスがあるとこの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);
})
);
});

view raw
index.js
hosted with ❤ by GitHub

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

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

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

self.addEventListener('install', e => {
// インストール時に実行
e.waitUntil(
caches.open('mismith').then(cache => {
return cache.addAll([
'/',
'/client.js',
'/style.css'
])
.then(() => self.skipWaiting());
})
);
});

view raw
index.js
hosted with ❤ by GitHub

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


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

From → HTML5

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

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