PWAでWeb APIを使う際の注意点

by moongift : 2018/12/09

Webアプリにおいて、Web APIを使わないことはほぼ皆無でしょう。PWAにおいてももちろん同じようにWeb APIを使って実装されるでしょう。しかし、幾つかのハマりどころがあるので注意が必要です。

キャッシュ時にはヘッダー情報などが使われない

キャッシュは以下のようなフォーマットで実装されます。

cache.put(url, response);

view raw

index.

hosted with ❤ by GitHub

単純にURLをキーとして、そのレスポンスを登録するだけなので、Web APIアクセスする際にヘッダー情報を追加したり、細かなカスタマイズができません。そこで、ネットワークが使える際にコンテンツをWebブラウザ側で取得し、その結果をService Workerで登録します。

例えばレスポンスが req 、結果が body という変数であったならば、以下のように Service Workerを呼び出します。

	const channel = new MessageChannel();
	navigator.serviceWorker.controller
	.postMessage({
	action: 'cache',
	url: res.req.url,
	response: body
	}, [channel.port2]);

view raw

index.js

hosted with ❤ by GitHub

そしてService Worker側でコンテンツを保存します。Responseオブジェクトを使ってレスポンスを動的に作るのがコツです。Webブラウザ側のResponseオブジェクトをそのまま渡せないので注意してください。

	self.addEventListener('message', e => {
	if (e.data.action == 'cache') {
	caches.open(CACHE_NAME)
	.then((cache) => {
	const res = new Response(e.data.response);
	cache.put(e.data.url, res);
	})
	}
	});

view raw

index.js

hosted with ❤ by GitHub

こうすると、該当URLへのアクセスすると、ヘッダー情報を無視して結果が取得できます。HTTPメソッドも無視されるので注意してください。

ただし、この方法だとオンライン時のキャッシュの更新が必要で複雑になりすぎる可能性があったり、検索のようにクエリーが動的に変わる場合に対応できないでしょう。

もう一つはnavigator.onLineを使って、オンラインの場合はWeb APIを呼び出して、オフラインの場合は自作のキャッシュを使う方法があります。キャッシュはネットワークアクセスの結果をlocalStorageやIndexedDBに保存すれば良いでしょう。

この方法の場合はオンライン、オフライン時の条件分岐が増えてしまう問題があります。できればクラスでラッピングし、アプリケーションからはネットワークの状態を気にせずに利用できるようにするのが良いでしょう。

この方法の利点はHTTPメソッドごとの処理を細かく制御できることで、同じURLになりがちな一覧の取得とデータ作成（GET / と POST /）を分けられることです。

PWAにおいてはネットワークの状態をきちんと制御するのが肝になるでしょう。それによってユーザ体験が大きく変わってきます。ユーザが不自然に感じたり、使いづらいと感じないシステムを作るためにも、キャッシュを上手に活用しましょう。

From → HTML5

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