インストール

ユーザーが PWA をインストールすると、次のようになります。

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

インストール条件

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

インストールを可能にするための最小要件として、Web App Manifest をサポートしているほとんどのブラウザでは、ウェブアプリ マニフェスト ファイルと、アプリの名前、インストール環境の構成などの特定のプロパティを使用します。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 のメニュー項目。

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

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

  • Windows PC のスタート メニューまたはスタート画面、Linux GUI のドックやデスクトップ、macOS ランチャー、Chromebook のアプリ ランチャーにアイコンがある。
  • アプリがアクティブなとき、最近使用されたとき、バックグラウンドで開かれているときに、アプリ スイッチャーやドックにアイコンを表示する。
  • Windows での検索、macOS の Spotlight などのアプリの検索に表示されます。
  • アイコンにバッジ番号を設定して、新しい通知を知らせる。そのためには、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 のスクリーンショットになります。

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

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

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

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

をご覧ください。

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

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

Safari のオペレーティング システムでは、Web Clips というネイティブ テクノロジーを使用して PWA アイコンを作成しています。これは Apple のプロパティ リスト形式の XML ファイルであり、ファイル システムに保存されます。

Android でのインストール

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

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

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

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

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

WebAPKs

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

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

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

で確認できます。

ショートカット

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

ショートカットでインストールされた PWA:

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

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

QuickApps

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

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

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

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

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

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

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

PWA の公開をサポートするアプリのカタログとストアは次のとおりです。

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

リソース