プログラミング

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

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Babel とは?

目次1. Babel とは?2. JavaScript のバージョン3. プラグイン (plugins)4. プリセット (preset)5. 基本的な使い方6. Babel のイメージ 1. Bab …

JavaScript

JavaScriptで画面上の文字列をクリップボードにコピーする方法

目次1. はじめに2. Clipboard API and events を使う方法3. Selection API を使う方法(1) 基礎知識(2) プログラムの書き方(3) サンプルページ4. お …

web development

Web Development for Beginners を読む:レッスン3

目次1. はじめに2. Lesson 3: Creating Accessible WebpagesTools to useScreen readersContrast checkersLightho …

WordPress

plugin-update-checker を使って WordPress のテーマに自動更新機能を実装する

目次1. はじめに2. テーマディレクトリに対する準備作業3. テーマを更新する手順3-1. テーマ提供者側3-2. 利用者側4. おわりに 1. はじめに plugin-update-checker …

JavaScript

JavaScript で URL を扱う場合の処理

JavaScript で URL文字列に関する処理を行う場合、セキュリティの観点から、URL()コンストラクタを使うことが推奨されます。URL()コンストラクタによって URLオブジェクトを生成し、そ …