インストール

ユーザーが PWA をインストールすると、次の処理が行われます。

  • ランチャー、ホーム画面、スタート メニュー、ローンチパッドにアイコンを表示する。
  • ユーザーがデバイスでアプリを検索した際に表示されます。
  • オペレーティング システム内で別のウィンドウを用意します。
  • 特定の機能をサポートします。

設置条件

どのブラウザにも、ウェブサイトまたはウェブアプリがプログレッシブ ウェブアプリであるかどうかを示す基準があり、スタンドアロンのエクスペリエンスとしてインストールできます。PWA のメタデータは、ウェブアプリ マニフェストと呼ばれる JSON ベースのファイルで設定されます。これについては、次のモジュールで詳しく説明します。

インストールを可能にするための最小要件として、この API をサポートするほとんどのブラウザでは、ウェブアプリ マニフェスト ファイルと特定のプロパティ（アプリの名前、インストール済みエクスペリエンスの設定など）が使用されています。ただし、macOS 用の Safari は例外で、インストールができません。

インストールの要件はブラウザによって異なります。こちらの記事では Google Chrome の要件を詳しく説明しています。その他のブラウザの要件へのリンクも記載しています。

PWA がインストール可否の要件を満たしているかどうかのテストには数秒かかる場合があるため、URL のレスポンスを受け取ってもインストール可能性自体を利用できない場合があります。

デスクトップ インストール

デスクトップ PWA のインストールは現在、Linux、Windows、macOS、Chromebook の Google Chrome と Microsoft Edge でサポートされています。これらのブラウザでは、現在のサイトがインストール可能であることを示すインストール バッジ（アイコン）が URL バーに表示されます（下の画像を参照）。

URL バーにインストール バッジが表示されたパソコンの Chrome と Edge

ユーザーがサイトにアクセスすると、以下のようなポップアップが表示され、アプリをインストールするようユーザーに促すことがあります。

PWA のインストールを提案する Google Chrome のサービス内ヘルプ。

ブラウザのプルダウン メニューには [インストール] という項目もあり、ユーザーはここでインストールすることができます。

PWA インストール用の Chrome と Edge のメニュー項目。

デスクトップ オペレーティング システムでは、スタンドアロンと最小 UI の表示モードのみがサポートされています。

パソコンにインストールされた PWA:

  • アイコンがある場所は、スタート メニューまたはスタート画面（Windows PC の場合）、ドックまたはデスクトップ（Linux GUI の場合）、macOS のローンチパッド、Chromebook のアプリ ランチャーにあります。
  • アプリがアクティブなとき、最近使用されたとき、またはバックグラウンドで開いたときに、アプリ スイッチャーやホルダーにアイコンを表示する。
  • Windows や macOS のスポットライトなど、アプリの検索で表示される。
  • アイコンにバッジ番号を設定して、新しい通知を示すことができる。これには Badging API を使用します。
  • アプリのショートカットを使用して、アイコンのコンテキスト メニューを設定できます。
  • 同じブラウザで 2 回インストールすることはできません。

デスクトップにアプリをインストールした後、ユーザーは about:apps に移動して PWA を右クリックし、[ログイン時にアプリを起動] を選択して、起動時にアプリを自動的に起動できます。

iOS と iPadOS のインストール

iOS と iPadOS では、PWA のインストールを求めるブラウザ メッセージが存在しません。これらのプラットフォームでは、PWA はホーム画面ウェブアプリとも呼ばれます。こうしたアプリは、Safari でのみ利用可能なメニューから手動でホーム画面に追加する必要があります。apple-touch-icon タグを HTML に追加することをおすすめします。 アイコンを定義するには、次のように、HTML の <head> セクションにアイコンへのパスを指定します。

<link rel="apple-touch-icon" href="/icons/ios.png">

Safari はこの情報を使用してショートカットを作成します。Apple デバイス用の特定のアイコンを指定しない場合、ホーム画面のアイコンはユーザーがインストールしたときの PWA のスクリーンショットになります。

ユーザーが Safari からウェブサイトを閲覧する場合にのみ、PWA をインストールできることを理解することが重要です。App Store で提供されている他のブラウザ（Google Chrome、Firefox、Opera、Microsoft Edge など）では、ホーム画面に PWA をインストールできません。

ホーム画面にアプリを追加する手順は次のとおりです。

  1. ブラウザの下部または上部にある [共有] メニューを開きます。
  2. [ホーム画面に追加] をクリックします。
  3. アプリの名前を確認します。名前はユーザーが編集できます。
  4. [追加] をクリックします。iOS と iPadOS では、ウェブサイトと PWA のブックマークはホーム画面で同じように表示されます。

iOS と iPadOS では、スタンドアロンの表示モードのみがサポートされます。そのため、最小 UI モードを使用する場合はブラウザのショートカットにフォールバックし、全画面表示を使用する場合はスタンドアロンにフォールバックします。

iOS と iPadOS にインストールされている PWA:

  • ホーム画面、スポットライトの検索、Siri の候補、アプリ ライブラリの検索に表示されます。
  • アプリギャラリーのカテゴリ フォルダには表示されません。
  • バッジやアプリのショートカットなどの機能に対するサポートがない。

なお、Safari では、ウェブクリップと呼ばれるネイティブ技術を使用して、オペレーティング システムで PWA アイコンが作成されます。ファイルシステムに保存されている単なる Apple のプロパティ リスト形式の XML ファイルです。

Android のインストール

Android では、PWA インストール プロンプトはデバイスやブラウザによって異なります。表示される情報:

  • インストール用のメニュー項目の言い回しの違い（「インストール」や「ホーム画面に追加」など）。
  • 詳細なインストール ダイアログ

次の図は、インストール ダイアログの 2 つの異なるバージョンを示しています。1 つはシンプルなミニ情報バー（左）で、もう 1 つは詳細なインストール ダイアログ（右）です。

Android のミニ情報バーとインストール ダイアログ

デバイスとブラウザに応じて、PWA は WebAPK、ショートカット、または QuickApp としてインストールされます。

WebAPKs

WebAPK は、ユーザーのデバイスの信頼できるプロバイダ（通常はクラウド上）が WebAPK ミンティング サーバー上に作成する Android パッケージ（APK）です。この方法は、Google モバイル サービス（GMS）がインストールされているデバイスの Google Chrome と Samsung インターネット ブラウザで使用されますが、Samsung 製デバイス（Galaxy のスマートフォンやタブレットなど）でのみ使用できます。これらを合わせると、Android ユーザーの大部分を占めます。

ユーザーが Google Chrome から PWA をインストールし、WebAPK が使用されると、作成サーバーは PWA 用の APK を「ミント」（パッケージ）して署名します。この処理には時間がかかりますが、APK の準備が整うと、ブラウザはアプリをユーザーのデバイスにサイレント インストールします。APK は信頼できるプロバイダ（Play 開発者サービスまたは Samsung）によって署名されているため、ストアから提供されるアプリの場合と同様に、スマートフォンではセキュリティが無効になることなく APK がインストールされます。アプリをサイドローディングする必要はありません。

WebAPK 経由でインストールされた PWA:

ショートカット

WebAPK は Android ユーザーにとって最適なエクスペリエンスを提供しますが、常に作成できるとは限りません。作成できない場合、ブラウザは代わりにウェブサイトのショートカットを作成します。Firefox、Microsoft Edge、Opera、Brave、Samsung Internet（Samsung 以外のデバイスの場合）には信頼できる作成サーバーがないため、ショートカットが作成されます。作成サービスが利用できない場合や、PWA がインストール要件を満たしていない場合は、Google Chrome も同様に動作します。

ショートカットを使用してインストールされた PWA:

  • ホーム画面にブラウザのバッジ付きアイコンを表示する（次の例を参照）。
  • ランチャーまたは [設定] の [アプリ] にアイコンを表示しない。
  • インストールが必要な機能は使用できません。
  • アイコンとアプリのメタデータを更新できません。
  • 同じブラウザを使用しても何度でもインストールできます。その場合、すべてが同じインスタンスをポイントし、同じストレージを使用します。

同じデバイスに異なるブラウザでインストールされた PWA。

QuickApps

Huawei や ZTE など一部のメーカーは、PWA に似た軽量ウェブアプリを作成するための QuickApps というプラットフォームを提供していますが、使用するテクノロジー スタックが異なります。これらのデバイス上の一部のブラウザ（Huawei ブラウザなど）では、QuickApp スタックを使用していない場合でも、QuickApp としてパッケージ化された PWA をインストールできます。

PWA を QuickApp としてインストールすると、ショートカットを使用する場合と同様のエクスペリエンスが得られますが、QuickApps アイコンのバッジが付いたアイコン（稲妻の画像）が表示されます。アプリは、QuickApp Center から起動することもできます。

Huawei または ZTE のホーム画面の QuickApps。

インストールを求めるメッセージを表示する

デスクトップ デバイスと Android デバイスの Chromium ベースのブラウザでは、PWA からブラウザのインストール ダイアログをトリガーできます。インストール プロンプトの章では、そのためのパターンとその実装方法について説明します。

アプリのカタログとストア

また、PWA をアプリのカタログやストアに掲載してリーチを拡大し、他のアプリを探すのと同じ場所でユーザーに表示することもできます。 ほとんどのアプリ カタログやストアは、ウェブアプリ全体を含んでいないパッケージ（HTML やアセットなど）を公開できるテクノロジーをサポートしています。これらのテクノロジーを使用すると、アプリを読み込み、Service Worker が必要なアセットをキャッシュに保存するスタンドアロンのウェブ レンダリング エンジンへのランチャーを作成できます。

PWA の公開に対応しているアプリのカタログとストアは次のとおりです。

PWA をアプリのカタログやストアに公開する方法の詳細については、BubbleWrap CLI と PWA ビルダーをご覧ください。

リソース