ライブラリ、フレームワーク、コードエディタ、ビルダー、デベロッパー ツール、デバッガなど、ウェブ開発に利用できるすべてのツールは、プログレッシブ ウェブアプリの開発にも役立ちます。ただし、インストール可能性、Service Worker、オフライン サポートなど、PWA 固有の機能を使用する場合は、PWA 用の特定のツールが特に役立ちます。実際に操作してみましょう。
シミュレータとデバイス
基礎の章で説明したように、あらゆる状況ですべてのユーザーに最適なエクスペリエンスを提供するには、依存しないデザイン パターンを使用する必要があります。ただし、さまざまなデバイスでエクスペリエンスをテストすることをおすすめします。
iPhone、Android スマートフォン、タブレット、オペレーティング システムの異なるデスクトップ パソコンやノートパソコンなど、実機はそれほど多くないでしょう。そのため、シミュレータとエミュレータがあります。
シンプルなシミュレータ
ブラウザのほとんどのデベロッパー ツールでは、1 つのデスクトップ ブラウザ エンジンを使用して、さまざまな画面サイズやネットワーク条件で PWA をテストできます。一部のツールでは、シミュレーションで別のユーザー エージェントを強制的に適用することもできます。
次のようなシミュレーションを利用できます。
- Chromium DevTools: Device Mode、ネットワーク スロットリング、複数のセンサー シミュレーションが利用可能
- Firefox デベロッパー ツール: レスポンシブ デザイン モード
- Safari ウェブ インスペクタ: レスポンシブ デザイン モード
商用および無料のソリューションの中には、オープンソースの レスポンシブ アプリなど、デベロッパーやデザイナー向けに最適化されたものがあります。
Apple シミュレータ
Apple が提供する Simulator アプリ（旧称 iOS Simulator）を使用すると、さまざまなバージョンのオペレーティング システムを搭載したさまざまな iPhone や iPad でウェブアプリをテストできます。
Simulator アプリは macOS パソコンでのみ使用できます。また、[Xcode、AppStore で入手可能] に付属しており、さまざまなデバイス設定で iOS と iPadOS をシミュレートできます。実際の Mobile Safari アプリと PWA をホーム画面にインストールする際に使用する Web.app エンジンが含まれているため、表示される最終的なエクスペリエンスは実際のデバイスをかなり反映しています。
アプリを起動するには、Xcode をインストールしたら、Xcode メニューで Open Developer Tools、Simulator の順に選択してシミュレータを開きます。シミュレータでは、実際の iPhone または iPad と同じように Safari を開くことができます。他のデバイスを開くには、File メニュー、[Open Simulator] の順に選択します。
Simulator を使用して PWA をテストする際に、ウェブ デベロッパーが便利なショートカットをいくつか紹介します。
Command-Shift-H: ホーム画面に移動します。Control-Command-Shift-H: アプリ スイッチャーにアクセスします。Command-Right、Command-Left: デバイスを回転させます。
Simulator は仮想マシンではありませんが、iPhone や iPad のように見える macOS 上で実行されるアプリであるため、独自の TCP スタックはありません。そのため、Simulator 内で localhost を使用すると、Safari は macOS localhost デバイスを参照します。
デフォルトでは、Xcode は最新バージョンの iOS のみをインストールしますが、Xcode に移動して Preferences メニューを使用し、Components タブから古いシミュレータをダウンロードできます。
PWA は、最新バージョンの iOS、以前のマイナー バージョン、少なくとも 1 つのメジャー バージョンでテストすることをおすすめします。
Android Emulator
Android エコシステムにはさまざまなエミュレータが用意されていますが、最も一般的なのは Android SDK で利用できるエミュレータです。
PWA デベロッパーは Android Emulator にもブラウザが必要になります。AOSP（Android オープンソース プロジェクト）にはブラウザをダウンロードするための Google Chrome や Google Play ストアが含まれていないため、テストが複雑になります。そのため、すべての Android Emulator が PWA のテストに役立つわけではありません。
Android SDK には、エミュレーションに役立つ 2 つのツールが用意されています。
- SDK Manager: さまざまなオペレーティング システムのバージョンとプラグインをダウンロードして更新します。
- AVD Manager: Android Virtual Device（AVD）を追加、編集、削除します。AVD は仮想マシン インスタンスと同様に、1 つの Android OS がインストールされている 1 つのデバイスを表します。
インストールできるのは、Android SDK または Android Studio（エミュレータと Android SDK を含む無料の IDE）のみです。この SDK では、コマンドラインを使用してエミュレータを開いてセットアップする必要があります。Android Studio では、ウェルカム画面のメニューから必要なツールを開くことができます。AVD Manager では、画面サイズ、機能、Android OS バージョンをさまざまに組み合わせて、必要な数のデバイスを作成できます。
Android Emulator では、PWA のインストールのサポート、ユーザー エクスペリエンス全体、使用している機能が想定どおりに動作しているかどうかをチェックできます。
Google Chrome を使用している
Android Emulator で Google Chrome を使用するには、Play 開発者サービスを使用して AVD を作成する必要があります。そのためには、次の図のように、AVD に使用する SDK に Play アイコンがあることを確認します。
Play 開発者サービスを使用する AVD には Google Play ストアも含まれているため、Google アカウントでアカウントを設定した後に Chrome を最新バージョンに更新できます。
他のブラウザを使用する
Play 開発者サービスで AVD を使用している場合は、Google Play ストアからブラウザをダウンロードすることもできます。
Samsung Internet、Microsoft Edge、Opera、Firefox、Brave など、Android 対応のほとんどのブラウザは APK（Android パッケージ）として提供されています。テストするブラウザ用の APK がある場合は、ファイルをエミュレータにドラッグするか、ADB を使用してコマンドラインからインストールできます。
デスクトップ エミュレータ
別のデスクトップ コンピュータのエミュレーションは通常、VirtualBox や VMWare などの仮想マシンシステムを介して行われます。これらのツールを使用する場合でも、Windows または Linux で macOS をエミュレートするなど、一部の環境のエミュレートは不可能です。また、macOS または Windows で Windows をエミュレートするなど、他のオプションにはライセンスが必要になる場合があります。
実機の使用
実際のデバイスを使用して PWA をテストするのも良いアイデアです。物理デバイスをリモートで使用できるクラウドベースのソリューションもあるため、複数のデバイスを所有する必要はありません。無料のソリューションと、無料枠を利用できる商用ソリューションがあります。
利用可能なソリューションの一つに、Samsung Remote Test Lab があります。これは、スマートフォン、タブレット、折りたたみ式デバイスなどの Samsung デバイスで PWA をテストできる無料のソリューションです。
リモート検査
実際のデバイス、シミュレータ、エミュレータでプログレッシブ ウェブアプリをデバッグする場合は、リモート検査セッションをパソコンのブラウザツールに接続することをおすすめします。
市販のツールもありますが、すべてのブラウザで次のような方法も提供されています。
- WebKit Remote Inspector を使用して、Safari に接続し、iOS または iPadOS に接続されたデバイスやシミュレータで PWA をインストールします。
- Chromium DevTools のリモート デバッグを使用して、Android 上の Chrome、Edge、Samsung Internet、その他の Chromium ベースのブラウザ、およびそれらのブラウザからインストールされた PWA（接続された実機やエミュレータなど）に接続します。
- Firefox のリモート デバッグ: 接続された実際のデバイスとエミュレータで Android 版 Firefox に接続します。
Android のポート転送
localhost で利用可能な PWA を Android の実機またはエミュレータでテストすると、localhost が開発マシンではなく Android TCP スタックを参照するため問題が発生します。
ローカル IP アドレスを localhost の代わりに使用することもできますが、これは Service Worker や、localhost を除き HTTPS 接続でのみ機能する機能であるためおすすめできません。そのため、PWA はオフラインでは動作せず、PWA の基準を満たしません。
この問題は、パソコンの Chromium ブラウザでポート転送を有効にすることで解決できます。その場合、Android デバイスの localhost のポートを、開発用コンピュータの localhost など、ホスト コンピュータの任意の送信元とポートにブリッジできます。詳しくは、こちらのガイドをご覧ください。
Chromium ブラウザ
Chromium ブラウザには、プログレッシブ ウェブアプリのデバッグとテストを行うための各種ツールが DevTools から用意されています。
Samsung Internet、Microsoft Edge、Google Chrome など、Chromium ベースのほとんどのブラウザは Stable、Beta、Canary などのさまざまなチャンネルを提供しています。パソコンと Android に別々のバージョンをインストールして、今後のバージョンのブラウザで PWA をテストできます。これにより、まだ一般公開されていない機能の構築とテスト、非推奨や変更のテスト、新しいバージョンでのアプリの動作を検証できます。
リモート検査を使用すると、これらのすべてのツールを使用して、パソコンと Android デバイスで PWA のデバッグとテストを行うことができます。
Service Worker ツール
Chromium DevTools には、Service Worker とその API の [アプリケーション] タブをデバッグするためのツール一式が用意されています。[Service Worker] セクションでは、次のことができます。
- Service Worker のインストール ステータスとライフサイクルを確認する。
- Service Worker を更新して登録を解除します。
- アップデート サイクルに沿って対応します。
- 現在の Service Worker のクライアントを表示します。
- push メッセージを Service Worker に送信します。
- バックグラウンド同期オペレーションと定期的なバックグラウンド同期オペレーションを登録する。
ストレージ ツール
Application、Storage 内では、送信元のデータ（Web Storage エントリや IndexedDB ストアなど）を表示、プレビュー、更新、削除できます。Application、Cache、Cache Storage 内で、現在のオリジンに保存されているすべてのキャッシュの表示、コンテンツのプレビュー、エントリの削除を行うことができます。キャッシュ ツールの詳細
また、Application、Storage のいずれかを選択すると、現在使用されている割り当ての確認、カスタム割り当てストレージのシミュレーション、Service Worker の登録などのすべてのデータの消去を Clear site data で行うことができます。
バックグラウンド サービス
Chromium DevTools には、バックグラウンド サービスのイベント記録ツールがいくつかあります。このツールは、Application、Background Services をクリックすると、これにより、Service Worker の API 上で、一部のイベントがバックグラウンドでどのようになるかを確認できます。これらのツールの詳細をご確認ください。
ウェブアプリ マニフェスト ツール
Chromium DevTools には、ウェブアプリ マニフェストとインストール可能性の基準に関するセクションが Application、Manifest にあります。このセクションでは、マニフェストが正しく読み込まれたかどうか、マニフェストの値、アイコンの外観、アプリ ID、マスク可能なアイコンのクイック チェッカーを確認できます。
このセクションには、インストールに関する基準の問題に関する警告やエラーも表示されます。
インストールのデバッグ
WebAPK インストール モードを使用している Android デバイスでは、Chromium ブラウザで about:webapk を開くと、インストール済みのアプリのリストにアクセスできます。
ここから現在のアップデート ステータスを確認し、WebAPK のアップデートをリクエストできます。
デスクトップ パソコンでは、about:apps を開くとインストール済みの PWA のユーザー フレンドリーなリストが表示され、about:app-service-internals を開くとデバッグ バージョンを確認できます。
Safari
執筆時点で、Safari は PWA のテストとデバッグに使用できるツールが限られています。Service Worker の状態とライフサイクルを確認してデバッグするためのツール、キャッシュの内容のインスペクタ、ウェブアプリ マニフェストのサポートと iOS と iPadOS へのインストールを可能にするツールはありません。
Safari は安定版でのみ使用可能ですが、macOS 用の Safari テクノロジー プレビューでは、Safari の今後のバージョンの機能を事前に試すことが可能となります。iOS と iPadOS のベータ版プログラムには、テストに使用できる Safari の新しいバージョンが含まれる場合があります。
Service Worker ツール
Safari（macOS の場合、iOS と iPadOS の場合はリモートで）でできることは、現在実行中の Service Worker のインスペクタ ウィンドウを開くことです。
macOS の Safari では、Develop、Service Workers メニューに現在実行中のすべての Service Worker セッションが一覧表示されます。リモート検査を行うには、検査するデバイスを Develop メニューで選択する必要があります。Service Worker のコンテキストは、オリジンまたは PWA のインストール済み名の下で、ウィンドウ コンテキストと同じサブメニューに表示されます。
いずれかを選択すると、Safari で制限付きインスペクタ（Consoles、Sources、Network Tabs のみ）を含む新しいウィンドウが開きます。
Firefox
Firefox は、すべてのプラットフォームの Service Worker をサポートし、Android にのみインストールする場合、アプリ マニフェストをサポートします。パソコンと Android で PWA 用のツールにアクセスするには、USB リモート検査セッションを使用します。
Firefox Developer Edition というデスクトップ版をお使いください。Chromium ブラウザと同様に、Firefox もパソコン版と Android 版のさまざまなチャンネル（安定版、ベータ版、開発版など）を用意しています。
PWA 用のツール
Firefox の Service Worker Inspector は、デベロッパー ツールの Application、Service Workers から利用できる基本的なツールです。これにより、現在登録されている Service Worker を表示し、その実行ステータスを確認して、登録を解除できます。Service Worker のコードのデバッグは、Firefox の一部のデベロッパー版でのみ可能です。
マニフェスト ツールは Application と Manifest で使用できます。マニフェストの値は、アイコンのプレビューでのみレンダリングされます。
Storage では、IndexedDB やキャッシュ ストレージなど、送信元のストレージを管理できます。
詳しくは、ウェブアプリ用の Firefox デベロッパー ツールをご覧ください。