プログラミング

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

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

関連記事

Python

定期的にツイートするbotをPythonで作る方法

Twitterでツイートを行う botプログラムを Python(プログラミング言語)で作ります。 このプログラムは、CentOS(Linuxの一種です)上で定期実行します。 スポンサードリンク 目次 …

Web Programming

Webプログラミングのためのリンク集

Webプログラミングのためのリンク集です。

Canvas と WebGL を使ったサンプルページを作りました

Canvas と WebGL を使ったサンプルページを作りました 目次1. スクリーンショット2. デモページ3. 内容4. ソースコード5. 参考情報 1. スクリーンショット スクリーンショット …

normalizr の使い方

目次1. はじめに2. normalizr とは?3. 使い方ともう少し詳しい説明4. 関連 1. はじめに JavaScript のライブラリである normalizr の使い方を簡単に説明します。 …

web development

User Timing API を使って、特定の処理に掛かった時間を計測する

目次1. User Timing API について2. サンプルコード3. デモページ4. 参考仕様MDNブラウザの対応状況 1. User Timing API について User Timing L …