Service Worker の操作

Jeff Posnick

この Codelab では、ウェブ内から Service Worker を登録する方法について説明します。 Chrome DevTools を使用してその動作を観察します。また、 デバッグに役立つ手法をいくつか紹介します。 Service Worker などがあります。

サンプル プロジェクトに慣れる

この Codelab に最も関連するサンプル プロジェクトのファイルは次のとおりです。

  • register-sw.js は最初は空ですが、使用するコードが含まれます Service Worker を登録します。すでに <script> を介して読み込まれています タグ内で追加します。index.html
  • service-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 Worker がインストールされ、有効化されていることを示します。

次に、[アプリケーション] タブに移動し、[Service Workers] パネルを選択します。次のような画面が表示されます。

Service Worker パネルに Service Worker の詳細を表示します。

これは、ソース 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 の 2 つのバージョンが、 ありますすでに有効化されている以前のバージョンが実行中で、 制御することはできません。Service Worker の更新版のリストに 右下にあります場所: waiting state、 ユーザーによって制御されているすべての開いているタブが 古い Service Worker は閉じられます。

このデフォルトの動作により、新しいルールで 従来の Service Worker とは動作が根本的に異なります。たとえば、 古いバージョンと互換性のないリソースを返す fetch ハンドラ ユーザーがすべてのアプリをシャットダウンするまで有効になりません。 ウェブアプリの前のインスタンスです

まとめ

これで、Service Worker の登録プロセスに慣れてきました。 Chrome の DevTools を使用して、Service Worker の動作を監視します。

これで、キャッシュ戦略の実装を開始するのに適した状態になりました。 ウェブアプリを確実かつ確実に読み込むのに役立つ 迅速に提供できます。