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

Kayce Basques

Sofia Emelianova

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

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

• バックグラウンド フェッチ
• バックグラウンド同期
• 通知
• 投機的読み込み
• push メッセージ

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

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

• Chrome がすでに送信したレポート、または Reporting API を使用して送信しようとしているレポートが表示されます。
• クリックするだけで、バックフォワード キャッシュのデバッグとテストを行うことができます。

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

Background Fetch API を使用すると、Service Worker は映画やポッドキャストなどの大きなリソースをバックグラウンド サービスとして確実にダウンロードできます。DevTools が開いていない場合でも、3 日間のバックグラウンド取得イベントを記録するには:

1. たとえば、こちらのデモページで DevTools を開きます。

2. [アプリケーション] > [バックグラウンド サービス] > [バックグラウンド取得] に移動し、[ Record] をクリックします。

   

3. デモページで、[Store assets local] をクリックします。これにより、バックグラウンドの取得アクティビティがトリガーされます。DevTools によって、イベントがテーブルに記録されます。

   

4. イベントをクリックすると、表の下のスペースにその詳細が表示されます。

5. DevTools を閉じて、最大 3 日間記録を実行したままにすることができます。録画を停止するには、 [Stop] をクリックします。

バックグラウンド同期

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

1. たとえば、こちらのデモページで DevTools を開きます。

2. [アプリケーション] > [バックグラウンド サービス] > [バックグラウンド同期] に移動し、[ 記録] をクリックします。

   

3. デモページで、[バックグラウンド同期を登録] をクリックしてそれぞれの Service Worker を登録し、プロンプトが表示されたら [許可] をクリックします。

   Service Worker の登録はバックグラウンド同期アクティビティです。DevTools によって、イベントがテーブルに記録されます。

   

4. イベントをクリックすると、表の下のスペースにその詳細が表示されます。

5. DevTools を閉じて、最大 3 日間記録を実行したままにすることができます。録画を停止するには、 [Stop] をクリックします。

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

Chrome のバウンス トラッキング対策のテスト機能を使用すると、バウンス トラッキング技術を使用してクロスサイト トラッキングを実行していると思われるサイトの状態を特定し、削除できます。手動での緩和策のトラッキングを強制適用し、状態が削除されたサイトの一覧を表示できます。

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

1. Chrome でサードパーティの Cookie をブロックする > [設定] > [プライバシーとセキュリティ] > [Cookie と他のサイトデータ] > [サードパーティの Cookie をブロックする] に移動して有効にします。
2. chrome://flags で、[バウンス トラッキング対策] テストを [削除で有効化] に設定します。
3. たとえば、デモページの DevTools を開き、[アプリケーション] > [バックグラウンド サービス] > [バウンス トラッキング対策] に移動します。
4. デモページでバウンスリンクをクリックし、Chrome にバウンスが記録されるまで（10 秒）待ちます。[Issues] タブに、状態の削除が予定されている旨の警告が表示されます。
5. [Force run] をクリックして、状態を直ちに削除します。

通知

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

1. たとえば、こちらのデモページで DevTools を開きます。

2. [アプリケーション] > [バックグラウンド サービス] > [通知] に移動し、[ 記録] をクリックします。

   

3. デモページで [Schedule Notification] をクリックし、プロンプトが表示されたら [Allow] をクリックします。

4. 通知が表示されるまで待ちます。DevTools によって、テーブルに通知イベントがログに記録されます。

   

5. イベントをクリックすると、表の下のスペースにその詳細が表示されます。

6. DevTools を閉じて、最大 3 日間記録を実行したままにすることができます。録画を停止するには、 [Stop] をクリックします。

投機的読み込み

投機的読み込みでは、定義した投機ルールに基づいて、ほぼ瞬時にページを読み込むことができます。移動先のほとんどのページをプリフェッチして事前レンダリングすることが可能になります。

プリフェッチはリソースを事前にフェッチし、事前レンダリングはさらに一歩進めて、隠しバックグラウンド レンダラ プロセスでページ全体をレンダリングします。

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

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

こちらのデモページで投機的読み込みのデバッグをお試しください。

1. そのページで DevTools を開き、[アプリケーション] > [バックグラウンド サービス] > [投機的読み込み] に移動します。ページによって開始された投機的読み込みが表示されない場合は、ページを再読み込みします。

   

2. デモの開始ページで 2 つのページが事前レンダリングされ、1 つのページが事前レンダリングされませんでした。[View all speculations] をクリックします。

3. [Speculations] で [Failure] ステータスの投機を選択すると、[Failure reason] の下部に詳細情報が表示されます。

   

   この例ではウェブサイトに /next3.html ページがないため、事前レンダリングに失敗しています。

4. [ルール] セクションを開いて [ステータス] をクリックすると、下部にルールセットが表示されます。[ルールセット] リンクをクリックすると、[要素] パネルが開き、推測ルールが定義されている場所が表示されます。

   

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

プッシュ メッセージング

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

1. たとえば、こちらのデモページで DevTools を開きます。

2. [Application] > [Background services] > [Push Messaging] に移動し、[ Record] をクリックします。

   

3. デモページで [プッシュ通知を有効にする] を切り替え、プロンプトが表示されたら [許可] をクリックし、メッセージを入力して送信します。DevTools によって、プッシュ通知イベントがテーブルに記録されます。

   

4. イベントをクリックすると、表の下のスペースにその詳細が表示されます。

5. DevTools を閉じて、最大 3 日間記録を実行したままにすることができます。録画を停止するには、 [Stop] をクリックします。

Reporting API

一部のエラーは本番環境でのみ発生します。実際のユーザー、ネットワーク、デバイスによってゲームが変わるため、ローカルでも開発中にも、このような機能を使うことはありません。

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

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

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

1. [chrome://flags/#enable-experimental-web-platform-features] に移動し、[試験運用版のウェブ プラットフォーム機能] を [有効] に設定して、Chrome を再起動します。

2. DevTools を開き、[アプリケーション] > [バックグラウンド サービス] > [Reporting API] に移動します。たとえば、こちらのデモページでレポートを確認できます。

   

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

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

レポートのステータス

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

レポートは、送信したかどうかに関係なくしばらくすると削除されます。