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

Sofia Emelianova
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 を入力し、[プロトコルをテスト] をクリックします。ハンドラをテストする。 この例では、ハンドラは americanochailatte-macchiato を処理できます。
  4. アプリを開くことができるかどうかを尋ねられたら、[プロトコル ハンドラを開く] をクリックして確定します。 アプリを起動します。
  5. 次のダイアログで、アプリが web+coffee リンクを処理できるようにします。 リンクの処理を許可する。

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

Service Worker

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

関連ガイド:

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

[Service Workers] タブ。

  • 現在開いているページに 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 Worker の情報を表示するには、[Service Workers] タブの下部にある [すべての登録を表示] をクリックします。このリンクは chrome://serviceworker-internals/?devtools に進み、Service Worker をさらにデバッグできます。

serviceworker-internals での Service Worker の登録。

Service Worker のキャッシュ

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

Service Worker の [キャッシュ] タブ。

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

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

複数の Service Worker キャッシュ。

割り当て使用量

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

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

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

関連ガイド:

ストレージの消去

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

関連ガイド:

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

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

関連ガイド: