このページは Cloud Translation API によって翻訳されました。

トラブルシューティングとロギング

Service Worker のデバッグは困難です。ライフサイクル、更新、キャッシュ、これらすべて間のやり取りを扱うことになります。幸いなことに、Workbox で Service Worker の開発が容易になるのと同様に、有益なロギングによってデバッグも容易になります。このページでは、利用可能なデバッグツールの一部と、Workbox のロギングの仕組みと設定方法について説明します。

利用可能なトラブルシューティングツール

ブラウザには、Service Worker の開発中にデバッグやトラブルシューティングを行うためのさまざまなツールが用意されています。お使いのブラウザの使用を開始する際に役立つリソースをいくつかご紹介します。

Chrome と Edge

Chrome（および Blink エンジンをベースとした最新バージョンの Edge）には、堅牢なデベロッパーツールセットが用意されています。これらのツールの一部（特に Chrome の DevTools にあるもの）は、このドキュメントですでに触れたものですが、以下のような情報があります。

Firefox

Firefox をご利用の場合は、次のリソースをご覧ください。

Safari

Safari は現在、Service Worker をデバッグするためのデベロッパーツールが限られています。詳細については、以下のリソースをご覧ください。

ワークボックスのログ記録

Workbox によって大幅に改善されたデベロッパーエクスペリエンスは、有益なロギングにあります。ログ記録を有効にすると、Workbox はほぼすべてのアクティビティを独自かつ機能的な方法で記録します。

Chrome の DevTools のコンソールに表示された Workbox のログメッセージのスクリーンショット。ロギングメッセージは、ワークボックスバッジが付いた通常のコンソールログとは区別されます。各メッセージを展開して、詳細なデバッグ情報を取得できます。

Workbox の開発用ビルドではログがデフォルトでオンになりますが、本番用ビルドではオフになります。開発用ビルドと本番用ビルドを切り替える手順は、カスタム Workbox バンドルを作成するか、workbox-sw を介して事前にバンドルされたコピーを使用するかによって異なります。

バンドラあり / なし

バンドラは、個々のモジュールからコードを取得し、ブラウザですぐに実行できる JavaScript 出力を作成するツールです。バンドラを使用するときは、プレキャッシュに役立つバンドラ固有の Workbox プラグイン（workbox-webpack-plugin など）を使用することも、Workbox ランタイムキャッシュロジックをバンドルするだけのこともあります。いずれの場合でも、Workbox のロギングは、バンドラの構成で本番環境モードを設定することで影響を受けます。

webpack では、mode 設定オプションを 'production' または 'development' に設定できます。workbox-webpack-plugin は、この値に基づいて Workbox の本番環境または開発環境のロギングを使用します。
ロールアップの場合、rollup-plugin-workbox は mode 構成オプションを受け入れます。このオプションは、Workbox がコンソールにログを記録するかどうかにも影響します。Workbox 固有のプラグインなしで Rollup を使用する場合は、process.env.NODE_ENV を 'development' または 'production' に置き換えるように @rollup/plugin-replace を設定する必要があります。

デフォルトのロギング動作を開発時にオーバーライドする必要があるとします。その場合は、バンドラに適した Workbox プラグインを使用して、構成にログをデバッグするための設定をハードコードできるようにする必要があります。たとえば、workbox-webpack-plugin の GenerateSW メソッドの mode オプションを使用して Workbox でのロギングを無効にできます。

バンドラを使用しない場合

バンドラは便利ですが、すべてのプロジェクトで必要なわけではありません。バンドラを使用しないプロジェクトに Workbox を追加する必要がある場合は、workbox-sw を使用します。

workbox-sw モジュールは、他の Workbox モジュール（workbox-routing、workbox-precaching など）を CDN から取得します。開発用バンドルと本番用バンドルのどちらを読み込むかは、ウェブアプリへのアクセスに使用される URL によって異なります。デフォルトでは、ウェブアプリが http://localhost で実行されている場合は開発版 Workbox が workbox-sw に読み込まれ、それ以外の場合は常に製品版用バージョンが読み込まれます。

ワークボックスの setConfig メソッドを呼び出して debug オプションを true に設定すると、このデフォルトの動作をオーバーライドできます。

// Load workbox-sw from a CDN
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-sw.js');

// This must come before any other workbox.* methods.
workbox.setConfig({
  debug: true
});

// Now use workbox.routing.*, workbox.precaching.*, etc.

任意のワークフローの開発ビルドのロギングをオフにする

バンドラを使用するかどうかにかかわらず、開発ビルドですべてのロギングをオフにするには、Service Worker で特別な self.__WB_DISABLE_DEV_LOGS 変数に true を割り当てます。

//
self.__WB_DISABLE_DEV_LOGS = true;

// The rest of your Workbox service worker code goes here

このアプローチの利点の 1 つは、バンドラの構成から完全に独立しており、workbox-sw を直接使用する場合でも、バンドラに依存して Workbox を利用する Service Worker をパッケージ化する場合でも機能する点です。

追加情報

バグのある Service Worker で何が起こっているのかがわからず、ロギングだけでも十分でない場合は、workbox タグを使用して Stack Overflow に質問を投稿してみてください。ここで回答が見つからない場合は、（投稿に関するガイドラインをご確認いただいたうえで）GitHub で問題を報告してください。これにより、幅広いユーザーが質問を読んで回答できるだけでなく、質問に対する答えが後で同じ状況にいる人の役に立つ可能性があります。