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

Kayce Basques

Sofia Emelianova

[Application] パネルを使用して、ウェブアプリ マニフェスト、Service Worker、Service Worker のキャッシュの調査、変更、およびデバッグを行うことができます。

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

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

このガイドでは、[Application] パネルの Progressive Web App 機能のみについて説明します。他のペインについてサポートが必要な場合は、このガイドの最後のセクションであるその他のアプリケーション パネル ガイドをご覧ください。

概要

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

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

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

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

• マニフェスト ソースを確認するには、[App Manifest] ラベルの下のリンク（上のスクリーンショットでは manifest.webmanifest）をクリックします。
• [Identity] セクションと [Presentation] セクションには、マニフェスト ソースの項目がわかりやすく表示されます。
• [プロトコル ハンドラ] セクションでは、ボタンをクリックするだけで PWA の URL プロトコル ハンドラの登録をテストできます。詳細については、URL プロトコル ハンドラの登録をテストするをご覧ください。
• [アイコン] セクションには、指定したすべてのアイコンが表示され、マスクを確認できます。
• ショートカット #N のセットには、すべてのショートカット オブジェクトの情報が表示されます。
• [スクリーンショット #N] セクションには、アプリのインストール UI の詳細なスクリーンショットが表示されます。

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

マスカブル アイコンを表示して確認する

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

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

ロゴ全体がセーフエリアに表示される場合は、これで完了です。

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

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

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

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

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

   

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

重要なポイント: インストールをトリガーするときは、[Console] ドロワーを開いたままにしてください。コンソールでは、マニフェストに問題があるかどうかが示され、インストールのライフサイクルに関するその他の情報がログに記録されます。

[アプリをインストール] 機能では、モバイル デバイス向けのワークフローをシミュレートできません。DevTools が [Device Mode] であっても、パソコンの Chrome ブラウザではアドレスバーにインストール ボタンが表示されます。ただし、デスクトップに問題なくアプリを追加できれば、モバイルでも動作します。

モバイル自体で操作をテストするには、リモート デバッグを使用して実際のモバイル端末を DevTools に接続します。接続されたモバイル デバイスでインストールを開始するには、 その他メニューを開き、 [アプリをインストール] をクリックします。

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

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

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

注: 注: このスクリーンショットは、こちらのデモページから取得したものです。他の例も確認してください。

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

説明とマニフェスト ファイルにスクリーンショットのセットを追加すると、インストール ダイアログの内容が充実します。

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

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

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

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

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

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

Service Worker

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

関連ガイド:

• Service Worker の概要
• プッシュ通知: タイムリー、有用、的確

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

• 現在開いているページに Service Worker がインストールされている場合は、このタブに表示されます。たとえば、上のスクリーンショットでは、https://airhorner.com/ のスコープに Service Worker がインストールされています。
• [オフライン] チェックボックスをオンにすると、DevTools はオフライン モードになります。これは、[ネットワーク] パネルまたは [コマンド メニュー] の Go offline オプションから使用できるオフライン モードと同じです。
• [Update on reload] チェックボックスをオンにすると、ページが読み込まれるたびに 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 の横にある [フォーカス] ボタンをクリックすると、そのタブがフォーカスされます。

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

  

  詳細については、サービス ワーカーのライフサイクルをご覧ください。

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

すべてのサービス ワーカーに関する情報を表示するには、[Service Workers] タブの下部にある [See all registrations] をクリックします。このリンクをクリックすると chrome://serviceworker-internals/?devtools に移動し、Service Worker をさらにデバッグできます。

Service Worker のキャッシュ

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

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

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

割り当て使用量

[キャッシュ ストレージ] タブ内の一部のレスポンスは、「不透明」のフラグが付けられることがあります。これは、CORS が有効になっていない場合に、CDN やリモート API などから別の生成元から取得されたレスポンスを指します。

クロスドメイン情報の漏洩を防ぐため、ストレージ割り当て上限の計算（QuotaExceeded 例外がスローされるかどうかなど）に使用され、navigator.storage API によって報告される不透明なレスポンスのサイズに、かなりのパディングが追加されています。

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

関連ガイド:

• Stack Overflow: 不透明なレスポンスにはどのような制限が適用されますか？
• Workbox: ストレージ割り当ての理解

ストレージの消去

[Clear Storage] タブは、Progressive Web App を開発する際に役立つ機能です。このタブでは、ボタンを 1 回クリックするだけで、Service Worker の登録を解除し、すべてのキャッシュとストレージを消去できます。詳しくは、以下のセクションをご覧ください。

関連ガイド:

• 空き容量を増やす

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

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

関連ガイド:

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