SP用メニューボタン
ソレゾレブログ

技術的な事だったり日常の気になる事だったり

PWA(Progressive web apps) とはいったいどんな機能なのか?サービスワーカー編④

スポンサーリンク

サービスワーカーをクリアする方法

検証などで、ブラウザのサービスワーカーとキャッシュをクリアしたい場面が出てくると思いまが、簡単にサービスワーカーとキャッシュを簡単にクリアすることが出来ます。[開発者モード] – [アプリケーション]タブ – [ストレージ] を開き、 [サイトのデータを消去] とクリックします。これにより、下記が一気の削除されます。

  • サービスワーカー
  • ローカルストレージ
  • セッションストレージ
  • IndexedDB
  • ウェブSQL
  • Cookie
  • キャッシュストレージ
  • アプリケーションキャッシュ
サービスワーカーをクリアする方法1

Chromeのスーパーリロード(開発者モードを開いた状態でURLバー左の更新マークを右クリックして現れる「キャッシュの消去とハード再読み込み」)ではサービスワーカーは残ってしまう為、サービスワーカー自体と、関連するキャッシュを一気に削除される上記の方法が便利です。

サービスワーカーをクリアする方法2

スポンサーリンク

検証時はシークレットウィンドウを活用する

ブラウザのプライベートウィンドウ(シークレット ウインドウ、InPrivate ブラウズ)機能を使うと、ブラウザタブが閉じた段階で、サービスワーカーの登録やキャッシュがすべて消去されます。必要に応じて活用すると便利です。

self

promise

サービスワーカーの中でthiscatchというメソッドが現れますが、これはPromiseというオブジェクトのメソッドになります。Promiseオブジェクトは、その実行結果が成功(fulfilledを返す)か失敗(rejectedを返す)かを取得して、それぞれ対応する処理を実行できます。Promiseの実行結果が成功であった場合thisメソッドが実行され、失敗だった場合はcatchメソッドが実行されます。

サービスワーカーのコードnavigator.serviceWorker.register('sw.js').thenを例にとると、registerメソッドの中でPromiseオブジェクトが作成されていて、registerメソッドを実行するとサービスワーカーの登録が成功したか失敗したかを取得できます。その結果が成功なら、thisメソッドを実行、失敗ならcatchメソッドを実行するということになります。

navigator.serviceWorker.register('sw.js')
.then(function(registration) {
	// promiseであるregisterメソッドの実行結果が成功時の処理をここに書く
})
.catch(function(error) {
	// promiseであるregisterメソッドの実行結果が失敗時の処理をここに書く。
	console.log('error', error);
});

promiseの詳細については下記を参照してください。

スポンサーリンク

navigator

サービスワーカーの登録で、navigator.serviceWorker.register('sw.js').thenのようにnavigatorというオブジェクトが出てきます。このnavigatorは、ブラウザの情報が格納されているオブジェクトです。取得できる情報は下記を参照してください。

clients.claim

サービスワーカーが登録されていないブラウザに初回のアクセスをすると、サービスワーカーがインストールされ、コンテンツがキャッシュされますが、初回のアクセス時はサービスワーカーの制御が有効になっていないので、fetchやpushなどのイベントは2回目以降でなければ扱うことが出来ません。clients.claimメソッドを使用すると、初回アクセスからサービスワーカーがアクティブになって、fetchやpushなどのイベントを即時受信出来るようになります。下記のように使います。

self.addEventListener('activate', function(event) {
    event.waitUntil(self.clients.claim());
});

残念ながら私には、clients.claimメソッドを具体的に使う場面が想像できません。詳しい方がいたらぜひ教えてください。

skipWaiting

サービスワーカーJavascriptファイルの「sw.js」を更新して配信した場合、ブラウザを開き直すとすぐにこの更新を反映されません。下記画像のように有効化の待機状態となります。

skipWaiting

再度ブラウザを開き直すか、上記の[skipWaiting]をクリックすると反映されますが、即時反映したい場合があります。その時にskipWaitingが役に立ちます。「sw.js」のinstallイベントにself.skipWaiting()を追記します。これにより、新しいサービスワーカーの設定が待機状態とならずに即時反映されるようになります。

self.addEventListener('install', function(event) {
  self.skipWaiting();
});

スポンサーリンク

update

navigator.serviceWorker.register('/sw.js').then(function(registration) {
	document.getElementById('update').addEventListener('click', () => {
		console.log('Service worker updated');
		registration.update();
	}
});

ちなみに、updateメソッドを使うと有効化の待機状態にはならず即時反映されました。