Chrome DevTools の [バックグラウンド サービス] セクションは、JavaScript API のツール群です。このツール群を使用すると、ユーザーがウェブサイトを開いていない場合でも、ウェブサイトで更新情報を送受信できます。バックグラウンド サービスは、バックグラウンド プロセスと機能的に似ています。
[バックグラウンド サービス] セクションでは、次のバックグラウンド サービスをデバッグできます。
Chrome DevTools は、DevTools が開いていない場合でも、フェッチ、同期、通知のイベントを 3 日間記録できます。これにより、イベントが想定どおりに送受信されていることを確認できます。
DevTools では、バックグラウンド サービス イベントに加えて、次のことができます。
- Chrome がすでに送信したレポートや送信しようとしているレポートを、Reporting API を使用して表示する。
- クリックしてバックフォワード キャッシュをデバッグしてテストする。
バックグラウンド フェッチ
Background Fetch API を使用すると、Service Workerは映画やポッドキャストなどの大きなリソースをバックグラウンド サービスとして確実にダウンロードできます。DevTools が開いていない場合でも、バックグラウンド フェッチ イベントを 3 日間記録するには:
- DevTools を開く: Background Fetch API を使用して、ページで DevTools を開きます。
[Application] > [Background services] > [Background fetch] に移動し、
[Record] をクリックします。![[バックグラウンド フェッチ] タブ。](https://developer.chrome.google.cn/static/docs/devtools/javascript/background-services/image/the-background-fetch-pane-070867927e6.png?authuser=4&hl=ja)
ページでバックグラウンド フェッチ アクティビティをトリガーします。DevTools はイベントをテーブルに記録します。
![[バックグラウンド取得] タブのイベントログ。](https://developer.chrome.google.cn/static/docs/devtools/javascript/background-services/image/a-log-events-the-backgr-3591d1df366d5.png?authuser=4&hl=ja)
イベントをクリックすると、テーブルの下のスペースに詳細が表示されます。
DevTools を閉じて、最長 3 日間記録を続行できます。記録を停止するには、
[Stop] をクリックします。
バックグラウンド同期
Background Sync API を使用すると、オフラインの Service Worker は、信頼性の高いインターネット接続が再確立されたら、データをサーバーに送信できます。DevTools が開いていない場合でも、バックグラウンド同期イベントを 3 日間記録するには:
- DevTools を開きます（たとえば、こちらのデモページで開きます）。
[Application] > [Background services] > [Background sync] に移動し、
[Record] をクリックします。![[バックグラウンド同期] タブ。](https://developer.chrome.google.cn/static/docs/devtools/javascript/background-services/image/the-background-sync-pane-f41f19a341d6b.png?authuser=4&hl=ja)
デモページで [Register background sync] をクリックして対応する Service Worker を登録し、プロンプトが表示されたら [Allow] をクリックします。
Service Worker の登録はバックグラウンド同期アクティビティです。DevTools はイベントをテーブルに記録します。
![[バックグラウンド同期] タブのイベントログ。](https://developer.chrome.google.cn/static/docs/devtools/javascript/background-services/image/a-log-events-the-backgr-f7877e3708b1.png?authuser=4&hl=ja)
イベントをクリックすると、テーブルの下のスペースに詳細が表示されます。
DevTools を閉じて、最長 3 日間記録を続行できます。記録を停止するには、
[Stop] をクリックします。
（試験運用版）バウンス トラッキング対策
Chrome のバウンス トラッキング対策テストでは、バウンス トラッキング手法を使用してクロスサイト トラッキングを行っていると思われるサイトの状態を特定して削除できます。トラッキング対策を手動で強制適用し、状態が削除されたサイトのリストを表示できます。
トラッキング対策を強制適用するには:
- Chrome でサードパーティの Cookie をブロックします。
> [Settings] > 
[Privacy and security] > [Cookies and other サイトデータ] > 
[Block third-party cookies] に移動して有効にします。 chrome://flagsで、バウンス トラッキングの緩和策 テストを [Enabled With Deletion] に設定します。- [DevTools] を開き、[Application] > [Background services] > [バウンス トラッキングの緩和策] に移動します。
- バウンスリンクをクリックし、Chrome がバウンスを記録するまで 10 秒間待ちます。[Issues] タブに、今後の状態削除に関する警告が表示されます。
- [Force run] をクリックして、状態をすぐに削除します。
通知
Service Workerがサーバーからプッシュ メッセージを受信すると、Service Worker はNotifications API を使用してユーザーにデータを表示します。DevTools が開いていない場合でも、通知を 3 日間記録するには:
- DevTools を開きます。
[Application] > [Background services] > [Notifications] に移動し、
[Record] をクリックします。![[通知] タブ。](https://developer.chrome.google.cn/static/docs/devtools/javascript/background-services/image/the-notifications-pane-081e9b0205f48.png?authuser=4&hl=ja)
[Schedule Notification] をクリックし、プロンプトが表示されたら [Allow] をクリックします。
通知が表示されるまで待ちます。DevTools は通知イベントをテーブルに記録します。
![[通知] タブのイベントのログ。](https://developer.chrome.google.cn/static/docs/devtools/javascript/background-services/image/a-log-events-the-notifi-5ca7f65e79b55.png?authuser=4&hl=ja)
イベントをクリックすると、テーブルの下のスペースに詳細が表示されます。
DevTools を閉じて、最長 3 日間記録を続行できます。記録を停止するには、
[Stop] をクリックします。
投機的読み込み
投機的読み込みを使用すると、定義した投機ルールに基づいて、ほぼ瞬時にページを読み込むことができます。これにより、ウェブサイトで最もアクセスされたページをプリフェッチしてプリレンダリングできます。
プリフェッチはリソースを事前に取得し、プリレンダリングはさらに一歩進んで、非表示のバックグラウンド レンダラ プロセスでページ全体をレンダリングします。
投機的読み込みは、[Application] > [Background services] > [Speculative loads] セクションでデバッグできます。このセクションには 3 つのビューがあります。
- [Speculative loads]。現在のページの投機的ステータス、現在の URL、現在のページが投機的に読み込もうとしているページとそのステータスが含まれます。
- [Rules]。[Elements] パネルの現在のページのルールセットと、投機全体のステータスが含まれます。
- [Speculations]。投機的読み込みの試行とそのステータスに関する情報を含むテーブルが含まれます。試行が失敗した場合は、テーブルでクリックして詳細情報と失敗理由を確認できます。
こちらのプリレンダリング デモページで投機的読み込みをデバッグしてみてください。
[DevTools を開く] ページで、[Application] > [Background services] > [Speculative loads] に移動します。ページによって開始された投機的読み込みが表示されない場合は、ページを再読み込みします。
デモの開始ページでは、2 ページがプリレンダリングされ、1 ページのプリレンダリングに失敗します。[View all speculations] をクリックします。
[Speculations] で、ステータスが [Failure] の投機を選択すると、下部の詳細情報セクションに [Failure reason] が表示されます。
この場合、ウェブサイトに
/next3.htmlページがないため、プリレンダリングに失敗しました。[Rules] セクションを開き、[Status] をクリックすると、下部にルールセットが表示されます。[Rule set] リンクをクリックすると、[Elements] パネルに移動し、投機ルールの定義場所が表示されます。
![ルールセットへのリンクを含む [ルール] セクション。](https://developer.chrome.google.cn/static/docs/devtools/javascript/background-services/image/rules-section.png?authuser=4&hl=ja)
詳細な手順については、投機ルールのデバッグをご覧ください。
プッシュ メッセージング
プッシュ通知をユーザーに表示するには、Service Workerが最初にPush Message API を使用してサーバーからデータを受信する必要があります。Service Worker が通知を表示する準備ができたら、 Notifications API を使用します。DevTools が開いていない場合でも、プッシュ メッセージを 3 日間記録するには:
- DevTools を開きます（たとえば、こちらのデモページで開きます）。
[Application] > [Background services] > [Push Messaging] に移動し、
[Record] をクリックします。![[プッシュ メッセージング] タブ。](https://developer.chrome.google.cn/static/docs/devtools/javascript/background-services/image/the-push-messaging-pane-3de9f3cc1d8d9.png?authuser=4&hl=ja)
デモページで [Enable push notifications] を切り替え、プロンプトが表示されたら [Allow] をクリックしてメッセージを入力し、送信します。DevTools はプッシュ通知イベントをテーブルに記録します。
![[プッシュ メッセージ] タブのイベントログ。](https://developer.chrome.google.cn/static/docs/devtools/javascript/background-services/image/a-log-events-the-push-m-cc0dff41ce523.png?authuser=4&hl=ja)
イベントをクリックすると、テーブルの下のスペースに詳細が表示されます。
DevTools を閉じて、最長 3 日間記録を続行できます。記録を停止するには、
[Stop] をクリックします。
Reporting API
一部のエラーは本番環境でのみ発生します。実際のユーザー、ネットワーク、デバイスによって状況が変わるため、ローカルや開発中にエラーが発生することはありません。
たとえば、新しいサイトが、重要なスクリプトを読み込むために document.write() を使用するサードパーティ ソフトウェアに依存しているとします。世界中の新しいユーザーがサイトを開きますが、テストに使用した環境よりも接続が遅い可能性があります。Chrome は低速ネットワークで document.write() をブロックするため、サイトが機能しなくなります。また、コードベースで使用されている非推奨の API や、まもなく非推奨になる API を監視することもできます。
Reporting API は、非推奨の API 呼び出しやページのセキュリティ違反などをモニタリングするのに役立ちます。レポートの設定については、Reporting API を使用してウェブ アプリケーションをモニタリングするをご覧ください。
ページで生成されたレポートを表示するには:
chrome://flags/#enable-experimental-web-platform-featuresに移動し、[Experimental Web Platform features] を [Enabled] に設定して、Chrome を再起動します。[Open DevTools] を開き、[Application] > [Background services] > [Reporting API] に移動します。
[Reporting API] タブは 3 つの部分に分かれています。
- 各レポートに関する次の情報を含む [Reports] テーブル。
- レポートの生成の原因となったURL
- 違反の種類
- レポートのステータス
- 宛先 エンドポイント
- 生成日時 のタイムスタンプ
- レポートの本文
- [Report body] プレビュー セクション。レポートの本文をプレビューするには、レポートのテーブルでレポートをクリックします。
- [Endpoints] セクション。
Reporting-Endpointsヘッダーで構成されたすべてのエンドポイントの概要が表示されます。
レポートのステータス
[Status] 列には、Chrome がレポートを正常に送信したかどうか、送信しようとしているかどうか、送信に失敗したかどうかが表示されます。
| ステータス | 説明 |
|---|---|
Success |
ブラウザがレポートを送信し、エンドポイントが成功コード（200 または別の成功レスポンス コード 2xx）で応答しました。 |
Pending |
ブラウザがレポートの送信を試行しています。 |
Queued |
レポートが生成されましたが、ブラウザはまだ送信を試行していません。レポートが Queued と表示されるのは、次の 2 つの場合です。
|
MarkedForRemoval |
しばらく再試行した後（Queued）、ブラウザはレポートの送信を停止し、送信するレポートのリストからまもなく削除します。 |
レポートは、正常に送信されたかどうかに関係なく、しばらくすると削除されます。
デバイスにバインドされたセッション
デバイスにバインドされたセッション認証情報（DBSC）は、ユーザー エージェントとサーバー間のウェブ API とプロトコルです。ユーザー エージェントが安全に保存された秘密鍵の所有権を主張できるようにすることで、Cookie の盗難を防ぐことを目的としています。
デバイスにバインドされたセッション、その定義、イベントを表示するには:
- DevTools を開きます DBSC を使用するページで。
- [Application] > [Background services] > [Device bound sessions] に移動します。
左側のサイドバーでサイトを展開して、アクティブなセッションを表示します。セッションを選択して定義を表示します。
![[デバイスにバインドされたセッション] タブ。](https://developer.chrome.google.cn/static/docs/devtools/javascript/background-services/image/device-bound-sessions.png?authuser=4&hl=ja)
[Events] テーブルには、DBSC イベント（作成、更新、チャレンジ、終了）が記録されます。ページ移動時にイベントのリストを保持するには、[check_box] [Preserve log] をオンにします。
[Events] テーブルでイベントを選択して詳細を表示します。
イベントが失敗すると、[Result] 列に
Errorメッセージが表示されます。失敗したイベントを選択すると、詳細、レスポンス エラーコード、失敗の原因が表示されます。![[デバイス バインド セッション] タブでエラー イベントが選択されている状態。](https://developer.chrome.google.cn/static/docs/devtools/javascript/background-services/image/device-bound-sessions-error.png?authuser=4&hl=ja)
サイドバーの [Device bound sessions] セクションでは、次の問題がハイライト表示されることがあります。
- Terminated sessions: サイドバーに打ち消し線とデータベース オフのアイコンが表示されます。
- Failed events: 警告アイコンでハイライト表示されます。[No session] 要素は、サイトにリンクされているが既知のセッションにリンクされていない失敗したイベントをキャプチャします。