この Codelab では、ウェブ内から Service Worker を登録する方法について説明します。 Chrome DevTools を使用してその動作を観察します。また、 デバッグに役立つ手法をいくつか紹介します。 Service Worker などがあります。
サンプル プロジェクトに慣れる
この Codelab に最も関連するサンプル プロジェクトのファイルは次のとおりです。
register-sw.jsは最初は空ですが、使用するコードが含まれます Service Worker を登録します。すでに<script>を介して読み込まれています タグ内で追加します。index.htmlservice-worker.jsも同様に空です。このファイルには、このプロジェクトの Service Worker が含まれます。
Service Worker の登録コードを追加する
Service Worker（現在の service-worker.js ファイルのような空の Service Worker でも）は、事前に登録されていない限り使用されません。これを行うには、次の呼び出しを行います。
navigator.serviceWorker.register(
'/service-worker.js'
)
register-sw.js ファイル内
ただし、そのコードを追加する前に、考慮すべき点がいくつかあります。 あります。
第一に、すべてのブラウザが
サポート
Service Worker などがあります。これは、自動更新されない古いバージョンのブラウザに特に当てはまります。そのため、おすすめは
条件付きで navigator.serviceWorker.register()（次のかどうかを確認した後）
navigator.serviceWorker がサポートされています。
2 つ目は、Service Worker を登録すると、ブラウザが service-worker.js ファイル内のコードを実行し、Service Worker の install イベント ハンドラと activate イベント ハンドラのコードに応じて、URL のダウンロードを開始してキャッシュに格納する可能性があることです。
追加のコードを実行してアセットをダウンロードすると、
貴重なリソースを使わずに済みます
できます。この干渉を防ぐには、ネットワーク レベルでの干渉を
ブラウザがレンダリングを完了するまで Service Worker を登録し、
クリックします。これは、
window.load イベントが発生した。
これら 2 つの要点をまとめると、この汎用の Service Worker を
登録コードを register-sw.js ファイルに追加します。
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js');
});
}
Service Worker のロギング コードを追加する
service-worker.js ファイルには、Service Worker のすべてのロジックが記述されています。
理解が深まります複数の Service Worker や
ライフサイクル イベント
Cache Storage API
ウェブ アプリケーションのネットワーク トラフィックに関する知識が必要です。
ウェブアプリから
すべてのリクエストを処理できます
でも... あとで学びましょう。この段階での焦点は 各種の Service Worker イベントについて学び、Chrome の DevTools を Service Worker の状態をデバッグできます。
そのために、次のコードを service-worker.js に追加します。これにより、
各種のイベントに対応して DevTools コンソールにメッセージが出力されます（ただし、
else）:
self.addEventListener('install', (event) => {
console.log('Inside the install handler:', event);
});
self.addEventListener('activate', (event) => {
console.log('Inside the activate handler:', event);
});
self.addEventListener(fetch, (event) => {
console.log('Inside the fetch handler:', event);
});
DevTools の [Service Workers] パネルについて理解する
これで、register-sw.js と service-worker.js にコードが追加されました。
次は、サンプル プロジェクトのライブ バージョンにアクセスして、
確認しました
- サイトをプレビューするには、[アプリを表示] を押します。[
全画面表示
。 - Ctrl+Shift+J キー（Mac の場合は Command+Option+J キー）を押して DevTools を開きます。
- [コンソール] タブをクリックします。
次のようなログメッセージが表示されます。 Service Worker がインストールされ、有効化されました。
次に、[アプリケーション] タブに移動し、[Service Workers] パネルを選択します。次のような画面が表示されます。
これは、ソース URL が
service-worker.js、ウェブアプリ solar-donkey.glitch.me 用、
有効にして実行中ですまた、現在 1 つのクライアント（開いている
タブ）に表示されます。
このパネルのリンク（Unregister、stop など）を使用して、
現在登録されている Service Worker に、デバッグを目的として変更を加えます。
Service Worker の更新フローをトリガーする
Service Worker での開発で理解しておくべき重要な概念の 1 つは、 アイデア 更新フローを実行します。
ユーザーが Service Worker を登録するウェブアプリにアクセスすると、
インストールされている service-worker.js の現在のコピーのコードを
アクセスできます。しかし、バージョンをアップデートすると、
service-worker.js として保存するにはどうすればよいでしょうか。
同じユーザーが Service Worker のスコープ内の URL に戻ってきた場合、
ブラウザは最新の service-worker.js を自動的にリクエストし、
変更がないか確認しますService Worker スクリプトの内容が異なっている場合、
新しい Service Worker は、インストール、有効化、
制御できるようにすることです。
プロジェクトのコードエディタに戻り、コードに任意の変更を加えることで、このアップデート フローをシミュレートできます。すぐにできることの一つは、 置換
self.addEventListener('install', (event) => {
console.log('Inside the install handler:', event);
});
と
self.addEventListener('install', (event) => {
console.log('Inside the UPDATED install handler:', event);
});
変更を行ったら、サンプルアプリのライブ版に戻ります。 DevTools の [Application] タブを開いたまま、ページを再読み込みします。次のように表示されます。 次のようになります。
ここには、Service Worker の 2 つのバージョンが、
ありますすでに有効化されている以前のバージョンが実行中で、
制御することはできません。Service Worker の更新版のリストに
右下にあります場所:
waiting state、
ユーザーによって制御されているすべての開いているタブが
古い Service Worker は閉じられます。
このデフォルトの動作により、新しいルールで
従来の Service Worker とは動作が根本的に異なります。たとえば、
古いバージョンと互換性のないリソースを返す fetch ハンドラ
ユーザーがすべてのアプリをシャットダウンするまで有効になりません。
ウェブアプリの前のインスタンスです
まとめ
これで、Service Worker の登録プロセスに慣れてきました。 Chrome の DevTools を使用して、Service Worker の動作を監視します。
これで、キャッシュ戦略の実装を開始するのに適した状態になりました。 ウェブアプリを確実かつ確実に読み込むのに役立つ 迅速に提供できます。