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

Kayce Basques

Sofia Emelianova

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

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

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

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

概要

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

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

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

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

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

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

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

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

最小セーフエリアのみが表示されるようにアイコンを切り抜くには、[ マスク可能なアイコンの最小セーフエリアのみを表示] をオンにします。

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

トリガーの取り付け

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

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

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

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

   

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

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

[アプリをインストール] 機能では、モバイル デバイスのワークフローをシミュレートすることはできません。デスクトップ版 Chrome ブラウザでは、DevTools がデバイスモードになっているにもかかわらず、インストール ボタンがアドレスバーに表示されています。ただし、パソコンにアプリを正常に追加できれば、モバイルでも機能します。

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

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

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

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

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

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

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

スクリーンショットを検査するには、[マニフェスト] タブの [スクリーンショット #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

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

関連するガイド:

• サービス ワーカーの概要
• プッシュ通知: タイムリー、関連性、正確性

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

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

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

  

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

サービス ワーカーがエラーを引き起こしている場合、[Service Workers] タブに エラー アイコンと、[ソース] 行の横にエラーの数が表示されます。番号が記載されたリンクをクリックすると、ログに記録されたすべてのエラーが表示されるコンソールに移動します。

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

Service Worker キャッシュ

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

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

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

割り当て使用量

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

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

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

関連するガイド:

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

ストレージを消去

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

関連するガイド:

• 空き容量を増やす

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

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

関連するガイド:

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