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

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

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

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

Chrome と Edge

Chrome(および Blink エンジンをベースとした最新バージョンの Edge)には、強力なデベロッパー ツールセットが用意されています。一部のツール(特に Chrome の DevTools で使用)については、このドキュメントの前半で触れましたが、さらに知っておくべきことがいくつかあります。

Firefox

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

Safari

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

ワークボックスのロギング

Workbox が提供する主要な開発者エクスペリエンス改善の 1 つは、情報ロギングにあります。ロギングを有効にすると、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-workboxmode 構成オプションを受け入れます。このオプションは、Workbox がコンソールに何かをログに記録するかどうかにも影響します。ワークボックス固有のプラグインなしで Rollup を使用している場合は、process.env.NODE_ENV'development' または 'production' に置き換えるように @rollup/plugin-replace を構成する必要があります。

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

バンドラなし

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

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

デフォルトの動作は、Workbox の 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 で問題を報告してください(コントリビューション ガイドラインを参照)。これにより、幅広いデベロッパーがあなたの質問を読んで回答できるだけでなく、あなたの質問への回答が後で同じ状況にいる人の助けになるかもしれません。