プログレッシブ ウェブアプリをデバッグする

Kayce Basques

Sofia Emelianova

[Application] パネルを使用して、ウェブアプリ マニフェスト、Service Worker、Service Worker のキャッシュを検査、変更、デバッグします。

プログレッシブ ウェブアプリ（PWA）は、ウェブ テクノロジーを使用して構築された、高品質の最新のアプリケーションです。PWA は、iOS、Android、デスクトップ アプリと同様の機能を提供します。できます。

• 不安定なネットワーク条件でも高い信頼性。
• オペレーティング システムのサーフェス（Mac OS X ではアプリケーション フォルダ、Windows では [スタート] メニュー、Android や iOS ではホーム画面）を起動するためにインストールできます。
• アクティビティ スイッチャー、スポットライトなどのデバイス検索エンジン、コンテンツ共有シートに表示されます。

このガイドでは、[アプリケーション] パネルのプログレッシブ ウェブアプリ機能についてのみ説明します。他のペインに関するヘルプが必要な場合は、このガイドの最後のセクションであるその他のアプリケーション パネルガイドをご覧ください。

まとめ

• [マニフェスト] タブを使用して、ウェブアプリ マニフェストを確認します。
• [Service Workers] タブでは、サービスの登録解除や更新、push イベントのエミュレート、オフライン化、Service Worker の停止など、Service Worker に関連するさまざまなタスクを実行できます。
• [キャッシュ ストレージ] タブで、Service Worker のキャッシュを表示します。
• [ストレージを消去] タブで、ボタンを 1 回クリックするだけで Service Worker の登録を解除し、すべてのストレージとキャッシュを消去できます。

ウェブアプリ マニフェスト

ユーザーが Mac OS X ではアプリケーション フォルダ、Windows では [スタート] メニュー、Android と iOS ではホーム画面にアプリを追加できるようにするには、ウェブアプリ マニフェストが必要です。マニフェストは、ホーム画面でのアプリの表示方法、ホーム画面から起動する際のユーザーの移動先、起動時のアプリの外観を定義します。

マニフェストを設定したら、[Application] パネルの [Manifest] タブを使用して調べることができます。

• マニフェスト ソースを確認するには、[App Manifest] ラベルの下のリンクをクリックします（上のスクリーンショットの manifest.webmanifest）。
• [ID] セクションと [プレゼンテーション] セクションは、マニフェスト ソースのフィールドをよりユーザー フレンドリーな方法で表示するだけです。
• [プロトコル ハンドラ] セクションでは、ボタンをクリックするだけで PWA の URL プロトコル ハンドラ登録をテストできます。詳細については、URL プロトコル ハンドラの登録をテストするをご覧ください。
• [Icons] セクションには、指定したすべてのアイコンが表示され、そのマスクを確認できます。
• [ショートカット #N] のセットには、すべてのショートカット オブジェクトに関する情報が表示されます。
• [Screenshot #N] セクションには、アプリのインストール UI を充実させるスクリーンショットが表示されます。

また、読み込めないアイコンなどのエラーが発生した場合は、[マニフェスト] タブに、エラーを説明する [インストール可能性] セクションが表示されます。

マスク可能なアイコンの表示と確認

[Manifest] タブの [Icons] セクションには、アプリケーションのすべてのアイコンが表示されます。このセクションでは、プラットフォームに適合するアイコン形式であるマスク可能なアイコンのセーフエリアを確認することもできます。

最小セーフエリアのみが表示されるようにアイコンをカットするには、[ マスク可能なアイコンの最小セーフエリアのみを表示する] チェックボックスをオンにします。

セーフエリアにロゴ全体が表示されている場合は、問題ありません。

インストールをトリガーする

Chrome では、ユーザー インターフェース内で PWA のインストールを直接有効にしてインストールを促すことができます。詳しくは、独自のアプリ内インストール エクスペリエンスを提供する方法をご覧ください。

PWA のインストール フローをトリガーするには:

1. Chrome で PWA のランディング ページを開きます。

2. 上部のアドレスバーの右側で、 [インストール] をクリックします。

   

3. 画面上の指示に沿って操作します。

[アプリをインストール] 機能では、モバイル デバイスのワークフローをシミュレートできません。DevTools がデバイスモードの場合でも、パソコンの Chrome ブラウザではアドレスバーにインストール ボタンが表示されます。ただし、アプリをパソコンに正常に追加できれば、モバイルでも動作します。

実際のモバイル エクスペリエンスをテストする場合は、リモート デバッグを使用して実際のモバイル デバイスを DevTools に接続します。接続済みのモバイル デバイスでインストールを開始するには、その他メニュー を開き、 [アプリをインストール] をクリックします。

ショートカットを検査する

アプリのショートカットを使用すると、ユーザーが頻繁に必要とする一般的な操作にすばやくアクセスできます。

マニフェスト ファイルに定義したショートカットを確認するには、[Manifest] タブの [Shortcut #N] セクションまでスクロールします。

スクリーンショットを検査してインストール UI を充実させる

説明と一連のスクリーンショットをマニフェスト ファイルに追加すると、より充実したインストール ダイアログが表示されます。

スクリーンショットを調べるには、[Manifest] タブの [Screenshot #N] セクションまでスクロールします。

URL プロトコル ハンドラの登録をテストする

PWA は、特定のプロトコルを使用するリンクを処理して、より統合されたエクスペリエンスを実現できます。ハンドラの作成方法については、PWA の URL プロトコル ハンドラ登録をご覧ください。

ハンドラをテストするには:

1. PWA のランディング ページで DevTools を開きます。たとえば、こちらのデモ PWA をご覧ください。
2. デモページから PWA をインストールし、インストール後にアプリを再読み込みします。これで、PWA が web+coffee プロトコルのハンドラとして登録されました。
3. [アプリケーション] > [マニフェスト] > [プロトコル ハンドラ] セクションで、ハンドラでテストする URL を入力し、[プロトコルをテスト] をクリックします。 この例では、ハンドラは americano、chai、latte-macchiato を処理できます。
4. アプリを開くことができるかどうかを尋ねられたら、[プロトコル ハンドラを開く] をクリックして確定します。
5. 次のダイアログで、アプリが web+coffee リンクを処理できるようにします。

ハンドラでリンクが正常に処理されると、コーヒーカップの画像がアプリに表示されます。

Service Worker

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

関連ガイド:

• Service Worker の概要
• プッシュ通知: タイムリー、関連性、正確

DevTools では、[Application] パネルの [Service Workers] タブは主に Service Worker の検査とデバッグを行う場所です。

• 現在開いているページに Service Worker がインストールされている場合は、このタブに表示されます。たとえば、上のスクリーンショットでは、https://airhorner.com/ のスコープに対して Service Worker がインストールされています。
• [ オフライン] チェックボックスをオンにすると、DevTools がオフライン モードになります。これは、[ネットワーク] パネルから利用できるオフライン モード、またはコマンド メニューの Go offline オプションで使用できるオフライン モードと同じです。
• [再読み込み時に更新] チェックボックスをオンにすると、ページが読み込まれるたびに Service Worker が更新されます。
• [ネットワークをバイパス] チェックボックスをオンにすると、Service Worker はバイパスされ、ブラウザはリクエストされたリソースのためにネットワークにリダイレクトされます。
• [ネットワーク リクエスト] リンクをクリックすると、[ネットワーク] パネルが開き、Service Worker に関連するインターセプトされたリクエストのリストが表示されます（is:service-worker-intercepted フィルタ）。
• [更新] リンクは、指定された Service Worker の 1 回限りの更新を実行します。
• [Push] ボタンは、ペイロード（通知とも呼ばれます）のないプッシュ通知をエミュレートします。
• [Sync] ボタンをクリックすると、バックグラウンド同期イベントをエミュレートします。
• [登録解除] リンクをクリックすると、指定した Service Worker の登録が解除されます。ボタンを 1 回クリックするだけで、Service Worker の登録を解除し、ストレージとキャッシュを消去する方法については、ストレージを消去をご覧ください。
• [ソース] 行には、現在実行中の Service Worker がインストールされた日時が表示されます。リンクは Service Worker のソースファイルの名前です。リンクをクリックすると、Service Worker のソースに移動します。
• [ステータス] 行には、Service Worker のステータスが表示されます。この行の数字（スクリーンショットでは #16）は、Service Worker が更新された回数を示しています。 [再読み込み時に更新] チェックボックスをオンにすると、ページが読み込まれるたびに数値が大きくなります。ステータスの横に、[開始] リンク（Service Worker が停止している場合）または [停止] リンク（Service Worker が実行中の場合）が表示されます。Service Worker はブラウザがいつでも停止、開始できるように設計されています。stop リンクを使用して Service Worker を明示的に停止すると、この処理をシミュレートできます。Service Worker を停止すると、Service Worker が再び起動したときにコードがどのように動作するかをテストできます。永続的なグローバル状態に関する誤った前提により、バグが頻繁に明らかになります。
• Clients 行は、Service Worker のスコープとなる送信元を示します。[フォーカス] ボタンは、複数の Service Worker を登録する場合に便利です。別のタブで実行されている Service Worker の横にある [フォーカス] ボタンをクリックすると、Chrome でそのタブにフォーカスされます。

• [Update Cycle] テーブルには、Service Worker のアクティビティと経過時間（インストール、待機、有効化など）が表示されます。各アクティビティの正確なタイムスタンプを表示するには、 [開く] ボタンをクリックします。

  

  詳細については、Service Worker のライフサイクルをご覧ください。

Service Worker でエラーが発生した場合、[Service Workers] タブの [ソース] 行の横に、 エラー アイコンとエラー数が表示されます。番号付きのリンクをクリックすると、ログに記録されたすべてのエラーを含むコンソールが表示されます。

すべての Service Worker の情報を表示するには、[Service Workers] タブの下部にある [すべての登録を表示] をクリックします。このリンクは chrome://serviceworker-internals/?devtools に進み、Service Worker をさらにデバッグできます。

Service Worker のキャッシュ

[キャッシュ ストレージ] タブには、（Service Worker）Cache API を使用してキャッシュに保存されたリソースの読み取り専用リストが表示されます。

初めてキャッシュを開いてリソースを追加したときは、DevTools で変更が検出されないことがあります。ページを再読み込みすると、キャッシュが表示されます。

複数のキャッシュを開いている場合、それらのキャッシュは [キャッシュ ストレージ] プルダウンの下に表示されます。

割り当て使用量

[Cache Storage] タブ内のレスポンスの一部に、「opaque」のフラグが付けられている場合があります。これは、CORS が有効になっていない場合に、別のオリジン（CDN やリモート API など）から取得されたレスポンスを指します。

クロスドメイン情報の漏洩を避けるために、保存容量の上限の計算（QuotaExceeded 例外がスローされるかどうかなど）や navigator.storage API によって報告される不透明レスポンスのサイズに、かなりのパディングが追加されます。

このパディングの詳細はブラウザによって異なりますが、Google Chrome の場合、1 つのキャッシュに保存された不透明なレスポンスがストレージ全体の使用量に占める最小サイズは約 7 MB です。キャッシュに保存する不透明レスポンスの数を決定する際は、この点に留意してください。不透明リソースの実際のサイズに基づいて予想するよりもはるかに早く、保存容量の上限を超えてしまう可能性があるためです。

関連ガイド:

• Stack Overflow: 不透明なレスポンスにはどのような制限が適用されますか？
• Workbox: 保存容量について

ストレージの消去

[ストレージを消去] タブは、プログレッシブ ウェブアプリを開発する際に非常に便利な機能です。このタブを使用すると、ボタンを 1 回クリックするだけで、Service Worker の登録を解除し、すべてのキャッシュとストレージを削除できます。詳しくは、以下のセクションをご覧ください。

関連ガイド:

• ストレージを消去

その他の [Application] パネルガイド

[Application] パネルの他のペインの詳細については、以下のガイドをご覧ください。

関連ガイド:

• ページリソースを検査する
• ローカル ストレージとキャッシュを検査して管理する