プログレッシブ Web アプリ (PWA) のデバッグ
アプリケーション ツールを使用して、Web アプリ マニフェスト、サービス ワーカー、およびサービス ワーカー キャッシュを検査、変更、デバッグします。 アプリケーション ツールには、プログレッシブ Web アプリ機能の次のペインが含まれています。
[マニフェスト] ウィンドウを使用して、Web アプリ マニフェストを検査し、[ホーム画面に追加] イベントをトリガーします。
サービス ワーカー関連のタスクには、次のような [Service Workers] ウィンドウを使用します。
- サービスの登録解除または更新。
- プッシュ イベントをエミュレートする。
- オフラインにする。
- サービス ワーカーの停止。
[キャッシュ ストレージ] ウィンドウを使用して、サービス ワーカー のキャッシュを表示します。
[ストレージ] ウィンドウを使用して、サービス ワーカーの登録を解除し、すべてのストレージとキャッシュをクリアします。
この記事では、 アプリケーション ツールのプログレッシブ Web アプリ機能について説明します。 アプリケーション ツールの他のペインのヘルプについては、「Web ページを構成するリソース ファイルを表示する」および「ローカル ストレージの表示と編集」を参照してください。
関連項目:
Web アプリ マニフェスト
ユーザーがモバイル ホームスクリーンにアプリを追加できるようにする場合は、Web アプリ マニフェストが必要です。 マニフェストは、ホーム画面にアプリを表示する方法、ホームスクリーンから起動するときにユーザーを指示する場所、および起動時のアプリの外観を定義します。
マニフェストを設定したら、アプリケーション ツールの [アプリ マニフェスト] ウィンドウを使用してマニフェストを検査できます。
[ アプリ マニフェスト] ウィンドウには、次のセクションが含まれています。
マニフェスト リンク
Identity
プレゼンテーション
プロトコル ハンドラー
アイコン
ウィンドウ コントロール オーバーレイ
スクリーンショット #1
スクリーンショット #2
マニフェスト ソースを確認するには、 アプリ マニフェスト ラベルの下にあるリンクをクリックします (
manifest.json前の図では、開いていますhttps://airhorner.com/manifest.json)。
[ID] セクションと [プレゼンテーション] セクションでは、マニフェスト ソースのフィールドがよりわかりやすい表示で表示されます。
[ アイコン] セクションには、マニフェストで指定されているすべてのアイコンが表示されます。
サービス ワーカー
サービス ワーカーは、Web プラットフォームの基本的なテクノロジです。 サービス ワーカーは、ブラウザーが Web ページとは別にバックグラウンドで実行するスクリプトです。 これらのスクリプトを使用すると、プッシュ通知、バックグラウンド同期、オフライン エクスペリエンスなど、Web ページやユーザーの操作を必要としない機能にアクセスできます。
アプリケーション ツールの [Service Workers] ウィンドウは、DevTools でサービス ワーカーを検査およびデバッグするためのメイン場所です。
![[Service Workers]\(サービス ワーカー\) ウィンドウ](index-images/service-workers-pane.png)
サービス ワーカーが現在開いているページにインストールされている場合は、このウィンドウに表示されます。 たとえば、前の図では、 のスコープ
https://weather-pwa-sample.firebaseapp.com用にサービス ワーカーがインストールされています。[ オフライン ] チェック ボックスをオンにすると、DevTools はオフライン モードになります。 これは、ネットワーク ツールまたは
Go offlineコマンド メニューのオプションから使用できるオフライン モードと同じです。[ 再読み込み時に更新 ] チェック ボックスをオンにすると、すべてのページ読み込み時にサービス ワーカーが強制的に更新されます。
[ ネットワークのバイパス ] チェック ボックスは、サービス ワーカーをバイパスし、要求されたリソースのネットワークにブラウザーを強制的に移動します。
[ 更新] ボタンは、指定されたサービス ワーカーの 1 回限りの更新を実行します。
[プッシュ] ボタンは、ペイロード (くすぐりとも呼ばれます) なしでプッシュ通知をエミュレートします。
[ 同期 ] ボタンは、バックグラウンド同期イベントをエミュレートします。
[ 登録解除 ] ボタンは、指定されたサービス ワーカーの登録を解除します。 サービス ワーカーの登録を解除し、1 回のボタン クリックでストレージとキャッシュをワイプする方法については、「 ストレージ 」を参照してください。
[ソース] 行には、現在実行中のサービス ワーカーがインストールされたタイミングが示されます。 リンクは、サービス ワーカーのソース ファイルの名前です。 リンクを選択すると、サービス ワーカーのソースに送信されます。
[状態] 行には、サービス ワーカーの状態が表示されます。 緑色の状態インジケーター (
#36前の図) の横にある ID 番号は、現在アクティブな Service Worker 用です。 状態の横に、 開始 ボタン (サービス ワーカーが停止している場合) または 停止 ボタン (サービス ワーカーが実行されている場合) が表示されます。 サービス ワーカーは、いつでもブラウザーによって停止および開始されるように設計されています。 停止ボタンを使用してサービス ワーカーを明示的に 停止 すると、それがシミュレートされる場合があります。 サービス ワーカーを停止することは、サービス ワーカーが再びバックアップを開始したときにコードがどのように動作するかをテストする優れた方法です。 永続的なグローバル状態に関する誤った仮定により、バグが頻繁に発生します。[クライアント] 行には、サービス ワーカーのスコープが設定されている配信元が示されます。 フォーカス ボタンは、[すべて表示] チェック ボックスをオンにした場合に最も便利です。 このチェック ボックスをオンにすると、登録されているすべてのサービス ワーカーが一覧表示されます。 別のタブで実行されているサービス ワーカーの横にある フォーカス ボタンをクリックすると、Microsoft Edge はそのタブに焦点を当てます。
サービス ワーカーでエラーが発生した場合は、 Errors という名前の新しいラベルが表示されます。
サービス ワーカー キャッシュ
[ キャッシュ ストレージ ] ウィンドウには、(サービス ワーカー) Cache API を使用してキャッシュされたリソースの読み取り専用リストが表示されます。
![[キャッシュ ストレージ] ウィンドウ](index-images/cache-pane-cache-storage-resources.png)
キャッシュを初めて開いてリソースを追加するときに、DevTools が変更を検出しない可能性があります。 ページを更新してキャッシュを表示します。
開いているすべてのキャッシュは、[ キャッシュ ストレージ ] エクスパンダーの下に一覧表示されます。
クォータの使用量
[キャッシュ ストレージ] ウィンドウ内の一部の応答は、"不透明" としてフラグが設定される場合があります。これは、CORS が有効になっていない場合に、CDN やリモート API からなど、別の配信元から取得された応答を指します。
ドメイン間情報の漏洩を回避するために、ストレージ クォータ制限の計算に使用される不透明な応答のサイズ (例外がスローされたかどうかなど) に大幅な QuotaExceeded パディングが追加され、API によって navigator.storage 報告されます。
このパディングの詳細はブラウザーによって異なりますが、Microsoft Edge の場合、単一のキャッシュされた不透明な応答がストレージの全体的な使用量に与える 最小サイズ は 約 7 MB です。 キャッシュする不透明な応答の数を決定する場合は、不透明なリソースの実際のサイズに基づいて、ストレージ クォータの制限をはるかに早く超える可能性があるため、パディングを覚えておいてください。
関連ガイド:
Storage
[ストレージ] ウィンドウは、プログレッシブ Web アプリを開発するときに非常に便利な機能です。 このウィンドウでは、サービス ワーカーの登録を解除し、すべてのキャッシュとストレージを 1 回のボタン クリックでクリアできます。
注
このページの一部の情報は、Google によって作成および共有されている著作物に基づいており、Creative Commons Attribution 4.0 International License に記載されている条項に従って使用されています。 元のページは ここに あり、 Kayce Basques (テクニカル ライター、Chrome DevTools & Lighthouse) によって作成されています。
