プログレッシブ Web アプリ (PWA) をデバッグする

アプリケーション ツールを使用して、PWA の Web アプリ マニフェスト、サービス ワーカー、およびサービス ワーカー キャッシュを検査、変更、デバッグします。

アプリケーション アイコン アプリケーション ツールには、PWA 機能の次のペインが含まれています。

  • [マニフェスト] ウィンドウを使用して、Web アプリ マニフェストを検査します。

  • サービス ワーカー関連のタスクには、次のような [サービス ワーカー] ウィンドウを使用します。

    • サービスの登録解除または更新。
    • プッシュ イベントをエミュレートする。
    • オフラインにする。
    • サービス ワーカーの停止。

  • [キャッシュ ストレージ] ウィンドウを使用して、サービス ワーカー のキャッシュを表示します。

  • [ストレージ] ウィンドウを使用して、アプリがデバイスに格納しているデータの量を表示し、保存されているデータを消去します。

以下で説明する機能は、 アプリケーション ツールの機能が PWA に関連しています。 アプリケーション ツールの他の機能とウィンドウに関するヘルプについては、次を参照してください。

関連項目:

Web アプリ マニフェスト

ユーザーがモバイル ホームスクリーンにアプリを追加できるようにする場合は、Web アプリ マニフェストが必要です。 マニフェストは、ホーム画面にアプリを表示する方法、ホームスクリーンから起動するときにユーザーを指示する場所、および起動時のアプリの外観を定義します。

マニフェストを検査するには:

  1. Airhorner.comなどのマニフェストを使用する Web ページに新しいウィンドウまたはタブで移動します。

  2. Web ページを右クリックし、[ 検査] を選択します。

    DevTools が開きます。

  3. DevTools で、[アプリケーション] アイコン [アプリケーション ツール] を選択します。

  4. 左側のアウトラインの [ アプリケーション ] セクションで、[マニフェスト] を選択 します。

    [ アプリ マニフェスト] ウィンドウが表示され、マニフェストを検査できます。

[アプリ マニフェスト] ウィンドウ

[ アプリ マニフェスト] ウィンドウには、次のセクションが含まれています。

  • マニフェスト リンクを含む上部セクション

  • Identity

  • プレゼンテーション

  • プロトコル ハンドラー

  • アイコン

  • ウィンドウ コントロール オーバーレイ

  • スクリーンショット #1

  • スクリーンショット #2

  • マニフェスト ソース ファイルを表示するには、[ アプリ マニフェスト ] ラベルの下にあるリンクをクリックします。 前の図では、そのリンクが manifest.jsonされ、 https://airhorner.com/manifest.jsonが開き、 Airhorner.com。

  • [ID] セクションと [プレゼンテーション] セクションでは、マニフェスト ソースのフィールドがよりわかりやすい表示で表示されます。

  • [ アイコン] セクションには、マニフェストで指定されているすべてのアイコンが表示されます。

サービス ワーカー

サービス ワーカーは、Web プラットフォームの基本的なテクノロジです。 サービス ワーカーは、Web ページとは別に、ブラウザーがバックグラウンドで実行するスクリプトです。 サービス ワーカー スクリプトを使用すると、アプリは、プッシュ通知、バックグラウンド同期、オフライン エクスペリエンスなど、Web ページやユーザー操作を必要としない機能にアクセスできます。

DevTools でサービス ワーカーを検査およびデバッグする主な場所は、[アプリケーション] アイコン [アプリケーション ツール] の [サービス ワーカー] ウィンドウです。

サービス ワーカーを表示するには:

  1. 新しいウィンドウやタブで、 Airhorner.comなどの Web ページに移動します。

  2. Web ページを右クリックし、[ 検査] を選択します。

    DevTools が開きます。

  3. DevTools で、[アプリケーション] アイコン [アプリケーション ツール] を選択します。

  4. 左側のアウトラインの [ アプリケーション ] セクションで、[ サービス ワーカー] を選択します。

    [ サービス ワーカー ] ウィンドウが表示されます。

[サービス ワーカー] ウィンドウ

  • サービス ワーカーが現在開いているページにインストールされている場合は、[サービス ワーカー] ウィンドウに サービス ワーカー が一覧表示されます。 たとえば、前の図では、 https://weather-pwa-sample.firebaseapp.comのスコープ用にサービス ワーカーがインストールされています。

  • [ オフライン ] チェック ボックスをオンにすると、DevTools はオフライン モードになります。 これは、[ネットワーク] アイコン [ネットワーク] ツールから使用できるオフライン モード、またはコマンド メニューの [Go offline] オプションと同じです。

  • [ 再読み込み時に更新 ] チェック ボックスをオンにすると、すべてのページ読み込み時にサービス ワーカーが強制的に更新されます。

  • [ ネットワークのバイパス ] チェック ボックスは、サービス ワーカーをバイパスし、要求されたリソースのネットワークにブラウザーを強制的に移動します。

  • [ネットワーク要求] リンクは、サービス ワーカー (is:service-worker-intercepted フィルター) に関連するインターセプトされた要求の一覧を含むネットワーク ツールに移動します。 以下の「 サービス ワーカーによって処理されるネットワーク要求を表示する」を参照してください。

  • [ 更新] ボタンは、指定されたサービス ワーカーの 1 回限りの更新を実行します。

  • [プッシュ] ボタンは、ペイロード (くすぐりとも呼ばれます) なしでプッシュ通知をエミュレートします。

  • [ 同期 ] ボタンは、バックグラウンド同期イベントをエミュレートします。

  • [登録解除] リンクは、指定されたサービス ワーカーの登録を解除します。 サービス ワーカーの登録を解除し、1 回のボタン クリックでストレージとキャッシュをワイプするには、以下の 「ストレージをクリアする」を参照してください。

  • [ソース] 行には、現在実行中のサービス ワーカーがインストールされたタイミングが示されます。 リンクは、サービス ワーカーのソース ファイルの名前です。 リンクを選択すると、サービス ワーカーのソースに送信されます。

  • [状態] 行には、サービス ワーカーの状態が表示されます。 緑色の状態インジケーター (前の図の#36 ) の横にある ID 番号は、現在アクティブなサービス ワーカー用です。

    状態の横に次の操作を行います。

    • サービス ワーカーが停止している場合は、 開始 ボタンが表示されます。
    • サービス ワーカーが実行されている場合は、 停止 ボタンが表示されます。

    サービス ワーカーは、いつでもブラウザーによって停止および開始されるように設計されています。 停止ボタンを使用してサービス ワーカーを明示的に 停止 すると、それがシミュレートされる場合があります。

    サービス ワーカーを停止することは、サービス ワーカーが再びバックアップを開始したときにコードがどのように動作するかをテストする優れた方法です。 永続的なグローバル状態に関する誤った仮定により、バグが頻繁に発生します。

  • [クライアント] 行には、サービス ワーカーのスコープが設定されている配信元が示されます。 フォーカス ボタンは、[すべて表示] チェック ボックスをオンにした場合に最も便利です。 このチェック ボックスをオンにすると、登録されているすべてのサービス ワーカーが一覧表示されます。 別のタブで実行されているサービス ワーカーの横にある フォーカス ボタンをクリックすると、Microsoft Edge はそのタブに焦点を当てます。

  • [更新サイクル] テーブルには、サービス ワーカーのアクティビティと、インストール、待機、アクティブ化などの経過時間が表示されます。 各アクティビティの正確なタイムスタンプを表示するには、 展開 (展開三角形) ボタンをクリックします。

サービス ワーカーでエラーが発生した場合は、[ エラー] ラベルが表示されます。

関連項目:

サービス ワーカーによって処理されるネットワーク要求を表示する

アプリケーション ツールの [サービス ワーカー] ウィンドウから、ネットワーク ツールを使用して、サービス ワーカーによって処理されるネットワーク要求の一覧にすばやくアクセスできます。

サービス ワーカーによって処理されるネットワーク要求を表示するには:

  1. 新しいウィンドウやタブで、 Airhorner.comなどの Web ページに移動します。

  2. Web ページを右クリックし、[ 検査] を選択します。

    DevTools が開きます。

  3. DevTools で、[アプリケーション] アイコン [アプリケーション ツール] を選択します。

  4. 左側のアウトラインの [ アプリケーション ] セクションで、[ サービス ワーカー] を選択します。

    [ サービス ワーカー ] ウィンドウが表示されます。

  5. [ サービス ワーカー ] ウィンドウの右上にある [ ネットワーク要求 ] ボタンをクリックします。

    [ネットワーク] アイコン [ネットワーク] ツールが開きます。

    [ フィルター] テキスト ボックスには、 is:service-worker-interceptedが含まれています。 このフィルターには、このサービス ワーカーによって処理された要求のみが表示されます。

  6. Web ページを更新します。

  7. main.cssなど、要求のいずれかを選択 します。

    サイドバーが表示されます。

  8. サイドバーで、[ タイミング ] タブをクリックします。

    [Service Worker] セクションには、スタートアップフェーズと respondWith フェーズに関するタイミング情報が表示されます。

サービス ワーカー キャッシュ

[ キャッシュ ストレージ ] ウィンドウには、(サービス ワーカー) Cache API を使用してキャッシュされたリソースの読み取り専用リストが表示されます。

[キャッシュ ストレージ] ウィンドウ

キャッシュを初めて開いてリソースを追加するときに、DevTools が変更を検出しない可能性があります。 ページを更新してキャッシュを表示します。

開いているすべてのキャッシュは、[ キャッシュ ストレージ ] エクスパンダーの下に一覧表示されます。

クォータの使用量

[キャッシュ ストレージ] ウィンドウ内の一部の応答は、"不透明" としてフラグが設定される場合があります。 これは、CORS が有効になっていない場合に、CDN またはリモート API からなど、別の配信元から取得された応答を指します。

クロスドメイン情報の漏洩を回避するために、ストレージ クォータ制限の計算に使用される不透明な応答のサイズ (たとえば、 QuotaExceeded 例外がスローされるかどうか) に大幅なパディングが追加され、 navigator.storage API によって報告されます。

このパディングの詳細はブラウザーによって異なりますが、Microsoft Edge の場合、単一のキャッシュされた不透明な応答がストレージの全体的な使用量に与える 最小サイズ は 約 7 MB です。 キャッシュする不透明な応答の数を決定する場合は、不透明なリソースの実際のサイズに基づいて、ストレージ クォータの制限をはるかに早く超える可能性があるため、パディングを覚えておいてください。

関連ガイド:

ストレージをクリアする

[ ストレージのクリア ] タブは、プログレッシブ Web アプリを開発するときに便利です。 [ ストレージのクリア ] ウィンドウを使用して、サービス ワーカーの登録を解除し、すべてのキャッシュとストレージを 1 回クリックしてクリアします。

関連項目

注

このページの一部の情報は、Google によって作成および共有されている著作物に基づいており、Creative Commons Attribution 4.0 International License に記載されている条項に従って使用されています。 元のページは ここに あり、ケイス・バスクによって作成されています。

クリエイティブ・コモンズ・ライセンス この作品は 、クリエイティブ・コモンズ属性4.0国際ライセンスに基づきライセンスされています。

  • Last updated on