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

Kayce Basques

Sofia Emelianova

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

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

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

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

概要

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

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

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

マニフェストを設定したら、[アプリケーション] パネルの [マニフェスト] タブを使用して検査できます。

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

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

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

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

アイコンをトリミングして最小セーフエリアのみを表示するには、 [マスク可能なアイコンの最小セーフエリアのみを表示] をオンにします。

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

トリガーの取り付け

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

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

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

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

   

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

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

[アプリをインストール]（一部のデバイスでは [ホーム画面に追加]）機能では、モバイル デバイスのワークフローをシミュレートできません。DevTools がDevice Modeであっても、パソコン版 Chrome ブラウザの**アドレスバー**に**インストール** ボタンが表示されていることに注目してください。ただし、アプリをパソコンに正常に追加できれば、モバイルでも動作します。

実際のモバイル エクスペリエンスをテストする場合は、リモート デバッグを使用して実際のモバイル デバイスを DevTools に接続できます。接続されたモバイル デバイスでインストールを開始するには、 3 つのドットのメニューを開き、 [アプリをインストール]（または [ホーム画面に追加]）をクリックします。

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

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

マニフェスト ファイルで定義したショートカットを検査するには、[マニフェスト] タブの [ショートカット #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 でアプリを開くかどうかを確認するメッセージが表示されたら、[Open Protocol Handler] をクリックして確定します。
5. 次のダイアログで、アプリが web+coffee リンクを処理できるようにします。

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

Service Worker

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

関連ガイド:

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

アプリケーション パネルの [サービス ワーカー] タブは、DevTools でサービス ワーカーを検査してデバッグする主な場所です。

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

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

  

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

サービス ワーカーでエラーが発生すると、[サービス ワーカー] タブの [ソース] 行の横に、エラーの数を示す エラー アイコンが表示されます。番号付きのリンクをクリックすると、記録されたすべてのエラーが表示された [コンソール] に移動します。

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

Service Worker のキャッシュ

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

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

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

割り当て使用量

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

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

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

関連ガイド:

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

ストレージを消去

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

関連ガイド:

• 空き容量を増やす

アプリケーション パネルに関するその他のガイド

[アプリケーション] パネルの他のペインについては、以下のガイドをご覧ください。

関連ガイド:

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