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

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

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

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

    [Background fetch] ペイン。

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

    このページによって投機的に読み込まれた URL です（成功 2 回、失敗 1 回）。

  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] をクリックします。

    [Push Messaging] ペイン。

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

    [Push Messaging] ペインのイベントのログ。

  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 にリストされるレポート

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

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

レポートのステータス

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

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

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