プログラミング

Service Worker の状態変化を検証するためのウェブページを作りました

投稿日:2019年10月16日 更新日:

1. はじめに

Service Worker の状態変化を検証するためのウェブページを作りました。基本的には自分用です。

そのウェブページについて簡単に説明します。

デモページ
デモページ

2. 簡単な説明

何をしているのか?

Service Worker の状態変化テスト を開くと、Service Worker が読み込まれます。

このページロード時に読み込まれた Service Worker の状態 (state) プロパティ値が画面上に表示され、その後も状態が変われば 続けてその状態名が表示されるので、状態を遷移した様子が分かります。サーバー側で、Service Worker を表す JavaScript ファイルが更新された場合は、ページロード時に読み込まれる Service Worker は 2つになります。

ServiceWorkerRegistration のプロパティから、Service Worker を状態別に取得しています。その状態というのが、表の左から2番目にある「installing」「waiting」「active」です。Service Worker オブジェクトの state プロパティにはもう少し細かい状態名が格納されており、それを表の左から3番目の列に出力しています。

navigator.serviceWorkerServiceWorkerContainer のオブジェクトになっているのですが、このオブジェクトの controller プロパティには、状態が activated になった Service Worker オブジェクトが格納されています。表の一番下の行はこのオブジェクトの情報を出力しています。

「3. コントロールパネル」には、いろいろなボタンを用意しています。2つ目以降のボタンは、特定の状態の Service Worker オブジェクトに対して postMessagge() メソッドを使いメッセージを送ります。Service Worker 側では、可能ならメッセージを送り返すようにしています。

Service Worker を直接操作する

Chrome ブラウザの DevTools を開き、[Application] パネル – [Service Workers] を見ると、登録された Service Worker の様子が分かります。また、[Update], [Unregister] などのリンクから操作を行ってみると、Service Worker の状態が変化するので画面上の表示も変化します。

ソースコード

このページで動いている JavaScript のコードは、「ページのソース」を見れば読むことができます。Service Worker 側のコードはすべてデモページ上に転機しています。

3. おわりに

今後、より分かりやすく改善していけたらと思っています。

4. 参考

📂-プログラミング

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

no image

プログラミングができると便利である実例

バスにジャストで乗りこむ技術|こんぴゅ|note

Milkcocoa のチュートリアルを試す

Milkcocoa のチュートリアルをやってみました。 目次Milkcocoa とは?チュートリアル1. アカウント登録する2. ログインする3. アプリを作成する4. スマートフォン側のWebページ …

Canvasでの回転

Canvas に回転した画像を表示するサンプルページを作りました

Canvas に回転した画像を表示するサンプルページを作りました。 Canvas の標準の機能では用意されていない操作なので、自分でこの処理を書く場合は少々面倒な記述が必要になります。 目次1. スク …

Web Components

Web Components: 組み込み要素を拡張する方法

目次1. はじめに2. 組み込みHTML要素を拡張する方法3. おわりに4. 参考 1. はじめに Web Components では、HTMLElement を継承してカスタムクラスを定義することも …

定期的にDOM要素をアニメーションするサンプルを用意しました

定期的にDOM要素をアニメーションするサンプルを用意しました。 DOM要素が対象ですので、div要素や img要素などが動かせます。 目次1. デモ2. ソースコード3. まとめ4. 参考 1. デモ …