Don't miss out on the action at this year's Chrome Dev Summit, happening on Oct 23rd and 24th. Learn more.

Progressive Web App のデバッグ

Kayce Basques
By Kayce Basques
Technical Writer at Google

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

関連ガイド:

このガイドでは、[Application] パネルの Progressive Web App 機能のみについて説明します。 その他のペインの使用方法については、このガイドの最後のセクション、[Application] パネルに関するその他のガイドをご覧ください。

TL;DR

  • ウェブアプリ マニフェストを調べ、ホーム画面への追加イベントをトリガーするには、[App Manifest] ペインを使用します。
  • サービスの登録解除や更新、プッシュ イベントのエミュレート、オフライン操作、Service Worker の停止など、Service Worker に関連する広範なタスクには、[Service Worker] ペインを使用します。
  • [Cache Storage] ペインには、Service Worker のキャッシュが表示されます。
  • [Clear Storage] ペインでは、ボタンを 1 回クリックするだけで、Service Worker の登録を解除し、すべてのストレージとキャッシュを消去することができます。

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

ユーザーがモバイルのホーム画面にアプリを追加できるようにするには、ウェブアプリ マニフェストが必要です。 マニフェストは、ホーム画面でのアプリの表示、ホーム画面から起動したときのユーザーの送信先、起動時のアプリの外観を定義します。

関連ガイド:

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

[Manifest] ペイン

  • マニフェスト ソースを確認するには、[App Manifest] ラベルの下のリンク（上のスクリーンショットでは https://airhorner.com/manifest.json）をクリックします。
  • ホーム画面への追加イベントをシミュレートするには、[Add to homescreen] ボタンをクリックします。 詳細については、次のセクションをご覧ください。
  • [Identity] セクションと [Presentation] セクションには、マニフェスト ソースの項目がわかりやすく表示されます。
  • [Icons] セクションには、指定したすべてのアイコンが表示されます。

ホーム画面への追加イベントのシミュレート

ウェブアプリをホーム画面に追加できるのは、サイトに少なくとも 2 回アクセスし、アクセスの間隔が 5 分以上である場合のみです。 ホーム画面への追加ワークフローを開発またはデバッグする際、この条件が不便な場合があります。[App Manifest] ペインの [Add to homescreen] ボタンを使用すると、必要に応じていつでもホーム画面への追加イベントをシミュレートできます。

ホーム画面への追加を正式にサポートしている Google I/O 2016 Progressive Web App でこの機能をテストすることができます。アプリが開いているときに [Add to homescreen] をクリックすると、Chrome ではバナー「add this site to your shelf」が表示されます。これは、モバイル端末の「add to homescreen」バナーに相当するデスクトップ用のバナーです。

デスクトップ シェルフへの追加

使い方:ホーム画面への追加イベントをシミュレートしている間は [Console] ドロワーを開いたままにしておいてください。 コンソールでは、マニフェストに問題があった場合はそのことが示され、また、ホーム画面への追加のライフサイクルに関するその他の情報がログ記録されます。

[Add to homescreen] 機能は、モバイル端末でのワークフローのシミュレーションにはまだ対応していません。 DevTools が Device Mode であっても、上のスクリーンショットで「add to shelf」プロンプトがトリガーされている点に注意してください。 ただし、デスクトップ シェルフに問題なくアプリを追加できれば、モバイルでも動作します。

モバイル自体で操作をテストするには、リモート デバッグを使用して実際のモバイル端末を DevTools に接続し、（DevTools で）[Add to homescreen] ボタンをクリックして、接続したモバイル端末で「add to homescreen」プロンプトをトリガーします。

Service Worker

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

関連ガイド:

[Application] パネルの [Service Workers] ペインは、DevTools で Service Worker の調査やデバッグを行う際の主要な場所です。

[Service Workers] ペイン

  • 現在開いているページに Service Worker がインストールされている場合、このペインに表示されます。 たとえば、上のスクリーンショットでは、https://events.google.com/io2016/ のスコープについて Service Worker がインストールされています。

  • [Offline] チェックボックスをオンにすると、DevTools はオフライン モードになります。これは、[Network] パネルや、コマンド メニューの [Go offline] オプションから使用できるオフライン モードと同じです。

  • [Update on reload] チェックボックスをオンにすると、ページが読み込まれるたびに Service Worker が強制的に更新されます。
  • [Bypass for network] チェックボックスをオンにすると、Service Worker がバイパスされ、ブラウザは、リクエストされたリソースのためにネットワークにアクセスするよう強制されます。
  • [Update] ボタンを使用すると、指定した Service Worker の 1 回限りの更新が実行されます。
  • [Push] ボタンを使用すると、ペイロードを含まないプッシュ通知（通知とも呼ばれる）がエミュレートされます。
  • [Sync] ボタンを使用すると、バックグラウンド同期イベントがエミュレートされます。
  • [Unregister] ボタンを使用すると、指定した Service Worker の登録が解除されます。1 回のボタンクリックするだけで、Service Worker の登録を解除し、ストレージとキャッシュを消去する方法については、ストレージの消去をご覧ください。
  • [Source] 行では、現在実行中の Service Worker がインストールされた日時を確認できます。 リンクは、Service Worker のソースファイルの名前です。リンクをクリックすると、Service Worker のソースに送信されます。
  • [Status] 行では、Service Worker のステータスを確認できます。この行の数字（上のスクリーンショットでは #1）は、Service Worker が更新された回数を示します。 [Update on reload] チェックボックスをオンにした場合、ページが読み込まれるたびにこの数が増えます。 ステータスの横には、[start] ボタン（Service Worker が停止している場合）または [stop] ボタン（Service Worker が実行中の場合）が表示されます。Service Worker は、ブラウザによっていつでも停止および起動されるように設計されています。 Service Worker を [stop] ボタンを使用して明示的に停止すると、これをシミュレートできます。 Service Worker が再起動されたときにコードがどのように動作するかをテストするには、Service Worker を停止するのが最適な方法です。 これにより、永続的なグローバル状態についての前提が間違っているために発生するバグが明らかになることがよくあります。
  • [Clients] 行では、Service Worker のスコープのオリジンを確認できます。 [focus] ボタンは主に、[Show all] チェックボックスをオンにしている場合に便利です。 このチェックボックスをオンにすると、登録されているすべての Service Worker が表示されます。 別のタブで実行されている Service Worker の横にある [focus] ボタンをクリックすると、そのタブにフォーカスが移動します。

Service Worker でエラーが発生すると、[Errors] という新しいラベルが表示されます。

エラーが発生している Service Worker

Service Worker のキャッシュ

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

Service Worker のキャッシュ ペイン

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

キャッシュを 2 つ以上開いている場合は、[Cache Storage] ドロップダウンの下に表示されます。

Service Worker の複数のキャッシュ

ストレージの消去

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

関連ガイド:

[Application] パネルに関するその他のガイド

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

関連ガイド: