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

バックグラウンドサービスをデバッグする

Kayce Basques

Sofia Emelianova

Chrome DevTools の [バックグラウンドサービス] セクションには、JavaScript API 用のツールが集約されています。これらのツールを使用すると、ユーザーがウェブサイトを開いていないときでも、ウェブサイトが更新を送受信できるようになります。バックグラウンドサービスは、機能的にはバックグラウンドプロセスに似ています。

[バックグラウンドサービス] セクションでは、次のバックグラウンドサービスをデバッグできます。

バックグラウンド取得
バックグラウンド同期
通知
投機的読み込み
プッシュメッセージ

Chrome DevTools では、DevTools が開いていなくても、取得、同期、通知イベントを 3 日間ログに記録できます。これにより、イベントが想定どおりに送受信されていることを確認できます。

DevTools では、バックグラウンドサービスイベントに加えて、次のこともできます。

Reporting API を使用して、Chrome がすでに送信した、または送信しようとしているレポートを表示します。
クリック 1 回でデバッグとバックフォワードキャッシュのテストが可能です。

バックグラウンドフェッチ

Background Fetch API を使用すると、サービスワーカーがバックグラウンドサービスとして、映画やポッドキャストなどの大規模なリソースを信頼性を持ってダウンロードできます。DevTools が開いていなくても、バックグラウンド取得イベントを 3 日間ログに記録するには:

DevTools を開きます。たとえば、こちらのデモページで開きます。
[Application] > [Background services] > [Background fetch] に移動し、 [Record] をクリックします。
デモページで、[アセットをローカルに保存] をクリックします。これにより、一部のバックグラウンドフェッチアクティビティがトリガーされます。DevTools は、イベントをテーブルに記録します。
イベントをクリックすると、表の下のスペースに詳細が表示されます。
DevTools を閉じて、最大 3 日間録画の実行を続行できます。録画を停止するには、 [停止] をクリックします。

バックグラウンド同期

Background Sync API を使用すると、オフラインのサービスワーカーは、信頼性の高いインターネット接続が再確立されたらサーバーにデータを送信できます。DevTools を開いていないときでも、バックグラウンド同期イベントを 3 日間ログに記録するには:

DevTools を開きます。たとえば、こちらのデモページで開きます。
[アプリ] > [バックグラウンドサービス] > [バックグラウンド同期] に移動し、 [記録] をクリックします。
デモページで [バックグラウンド同期を登録] をクリックして、該当するサービスワーカーを登録し、プロンプトが表示されたら [許可] をクリックします。

注: DevTools でサービスワーカーをデバッグする方法については、サービスワーカーをご覧ください。
サービスワーカーの登録はバックグラウンド同期アクティビティです。DevTools は、イベントをテーブルに記録します。
イベントをクリックすると、表の下のスペースに詳細が表示されます。
DevTools を閉じて、最大 3 日間録画の実行を続行できます。録画を停止するには、 [停止] をクリックします。

（試験運用版）バウンストラッキング対策

Chrome のバウンストラッキング対策の試験運用版では、バウンストラッキング手法を使用してクロスサイトトラッキングを行っていると思われるサイトの状態を特定して削除できます。トラッキング対策を手動で強制的に適用し、状態が削除されたサイトのリストを表示できます。

トラッキング対策を強制的に適用するには:

Chrome でサードパーティ Cookie をブロックする。 > [設定] > [プライバシーとセキュリティ] > [Cookie と他のサイトデータ] > [サードパーティ Cookie をブロックする] に移動して有効にします。
chrome://flags で、バウンストラッキング対策テストを [削除ありで有効] に設定します。
DevTools を開く（デモページなど）で、[Application] > [Background services] > [Bounce tracking mitigations] に移動します。
デモページで離脱リンクをクリックし、Chrome が離脱を記録するまで待ちます（10 秒ほど）。[問題] タブには、今後の状態の削除に関する警告が表示されます。
[強制実行] をクリックして、状態をすぐに削除します。

バウンストラッキング対策に、状態の削除が表示されます。

通知

Service Worker がサーバーからプッシュメッセージを受信すると、Service Worker は Notifications API を使用してデータをユーザーに表示します。DevTools が開いていなくても 3 日間通知を記録するには:

DevTools を開きます。たとえば、こちらのデモページで開きます。
[Application] > [Background services] > [Notifications] に移動し、 [Record] をクリックします。
デモページで [通知のスケジュール設定] をクリックし、メッセージが表示されたら [許可] をクリックします。
通知が表示されるまで待ちます。DevTools は、通知イベントをテーブルに記録します。
イベントをクリックすると、表の下のスペースに詳細が表示されます。
DevTools を閉じて、最大 3 日間録画の実行を続行できます。録画を停止するには、 [停止] をクリックします。

投機的読み込み

推測読み込みでは、定義した推測ルールに基づいてほぼ瞬時にページを読み込むことができます。これにより、ウェブサイトは、アクセスされる可能性が高いほとんどのページをプリフェッチしてプリレンダリングできます。

プリフェッチはリソースを事前に取得しますが、プリレンダリングはさらに一歩進んで、非表示のバックグラウンドレンダラプロセスでページ全体をレンダリングします。

投機的読み込みは、[アプリケーション] > [バックグラウンドサービス] > [投機的読み込み] セクションでデバッグできます。このセクションには、次の 3 つのビューがあります。

投機的読み込み。現在のページの投機的ステータス、現在の URL、現在のページが投機的に読み込みを試みるページ、およびそれらのステータスを含みます。
ルール。[要素] パネルには、現在のページのルールセットと推測の全体的なステータスが表示されます。
推測。推測読み込みの試行とそのステータスに関する情報が記載された表が表示されます。試行が失敗した場合は、テーブルでその試行をクリックすると、詳細情報と失敗の理由を確認できます。

こちらのデモページで、投機的読み込みのデバッグを試してみましょう。

ページで DevTools を開き、[アプリケーション] > [バックグラウンドサービス] > [投機的読み込み] に移動します。ページによって開始された推測的読み込みが表示されない場合は、ページを再読み込みします。
デモの開始ページでは 2 つのページが事前レンダリングされますが、1 つのページは事前レンダリングされません。[すべての投機的読み込みを表示] をクリックします。
[推測] で、ステータスが [Failure] の推測を選択すると、下部に詳細情報を含む [Failure reason] セクションが表示されます。

この場合、ウェブサイトに /next3.html ページがないため、プリレンダリングに失敗しました。
[ルール] セクションを開き、[ステータス] をクリックして、下部に表示されるルールセットを確認します。[ルールセット] リンクをクリックすると、[要素] パネルが表示され、投機ルールが定義されている場所を確認できます。

ヒント: この画面または [要素] パネルでルールを修正することはできません。これは、DevTools ではページの読み込み間で任意の DOM 変更が保持されないためです。ワークスペースを設定してソースでルールを修正するか、コンテンツをオーバーライドして変更をモックする必要があります。

詳細なチュートリアルについては、推測ルールのデバッグをご覧ください。

プッシュメッセージング

ユーザーにプッシュ通知を表示するには、Service Worker がまず Push Message API を使用してサーバーからデータを受信する必要があります。サービスワーカーが通知を表示する準備が整うと、Notifications API を使用します。DevTools を開いていないときでも、プッシュメッセージを 3 日間ログに記録するには:

DevTools を開きます。たとえば、こちらのデモページで開きます。
[Application] > [Background services] > [Push Messaging] に移動し、 [Record] をクリックします。
デモページで [Enable push notifications] を切り替え、プロンプトが表示されたら [許可] をクリックし、メッセージを入力して送信します。DevTools は、プッシュ通知イベントをテーブルに記録します。

注: また、[Application] > [Service Workers] で [Push] をクリックして、DevTools からテスト通知を送信することもできます。
イベントをクリックすると、表の下のスペースに詳細が表示されます。
DevTools を閉じて、最大 3 日間録画の実行を続行できます。録画を停止するには、 [停止] をクリックします。

Reporting API

一部のエラーは本番環境でのみ発生します。実際のユーザー、ネットワーク、デバイスによってゲームが変化するため、ローカルや開発中は発生しません。

たとえば、新しいサイトが document.write() を使用して重要なスクリプトを読み込むサードパーティソフトウェアに依存しているとします。世界中の新規ユーザーがサイトを開きますが、テストで使用した接続よりも遅い接続を使用している可能性があります。ネットワークが遅い場合、Chrome が document.write() に対して介入するため、ユーザーにはサイトが正常に表示されなくなります。また、コードベースで使用されている非推奨の API やまもなく非推奨になる API にも注意してください。

Reporting API は、非推奨の API 呼び出しやページのセキュリティ違反などをモニタリングできるように設計されています。レポートは、Reporting API を使用してウェブアプリケーションをモニタリングするで説明されているように設定できます。

ページで生成されたレポートを表示するには:

chrome://flags/#enable-experimental-web-platform-features に移動し、[試験運用版のウェブプラットフォームの機能] を [有効] に設定して Chrome を再起動します。
DevTools を開くと、[Application] > [Background services] > [Reporting API] に移動します。たとえば、こちらのデモページでレポートを確認できます。

[Reporting API] タブは次の 3 つの部分に分かれています。

[レポート] 表には、各レポートに関する次の情報が表示されます。
- レポートの生成をトリガーしたURL
- 違反のタイプ
- レポートのステータス
- 宛先エンドポイント
- 生成日時のタイムスタンプ
- レポートの本文
[レポート本文] プレビューセクション。レポート本文をプレビューするには、レポートの表でレポートをクリックします。
[エンドポイント] セクションには、Reporting-Endpoints ヘッダーで構成されているすべてのエンドポイントの概要が表示されます。

レポートのステータス

[ステータス] 列には、Chrome がレポートを正常に送信したか、送信しようとしているか、失敗したかが示されます。

ステータス	説明
`Success`	ブラウザがレポートを送信し、エンドポイントが成功コード（`200` または別の成功レスポンスコード `2xx`）で応答しました。
`Pending`	ブラウザがレポートの送信を試行しています。
`Queued`	レポートは生成されていますが、ブラウザはまだ送信を試みていません。レポートが `Queued` として表示されるケースは次の 2 つです。レポートが新規で、ブラウザが他のレポートが届くかどうかを待ってから送信しようとしている。レポートは新規ではありません。ブラウザはすでにこのレポートの送信を試みて失敗しており、再試行を待機しています。
`MarkedForRemoval`	しばらく再試行した後（`Queued`）、ブラウザはレポートの送信を停止し、まもなく送信するレポートのリストから削除します。

レポートは、送信が成功したかどうかにかかわらず、しばらくすると削除されます。

重要なポイント: Queued ステータスは、送信が失敗したのか、まだ試行されていないのかを正確に示していないため、必ずしも有用ではありません。短いレポートの遅延を使用すると、レポートが Queued のままである場合は、送信に失敗している可能性があります。