インストール可能になるには何が必要ですか？

Pete LePage

プログレッシブ ウェブアプリ（PWA）は、ウェブ テクノロジーで構築された最新の高品質なアプリケーションです。PWA はモバイルアプリやパソコン用アプリと同様の機能を提供し、ネットワーク環境が不安定な場合でも信頼性が高く、インストール可能であるため、ユーザーが簡単に見つけて使用できます。

ほとんどのユーザーは、アプリのインストールと、インストールされたエクスペリエンスのメリットをよく理解しています。インストールされたアプリケーションは、オペレーティング システムの起動サーフェス（macOS X のアプリケーション フォルダ、Windows のスタート メニュー、Android と iOS のホーム画面など）に表示されます。インストールされたアプリは、アクティビティ切り替えツール、Spotlight などのデバイス検索エンジン、コンテンツ共有シートにも表示されます。

ほとんどのブラウザでは、プログレッシブ ウェブアプリ（PWA）が特定の条件を満たしている場合、インストール可能であることをユーザーに示します。たとえば、アドレスバーの [インストール] ボタンや、オーバーフロー メニューの [インストール] メニュー項目などがあります。

パソコンの URL バーにある [インストール] ボタンのクローズアップ。
ブラウザが提供するインストール プロモーション（パソコン）
モバイル画面の下部に表示されたバナーのクローズアップ。ユーザーに「Airhorner をホーム画面に追加」するよう促しています。
ブラウザが提供するインストール プロモーション（モバイル）

また、条件が満たされると、多くのブラウザで beforeinstallprompt イベントが発火し、アプリ内でインストール フローをトリガーするカスタムのアプリ内 UX を提供できるようになります。

インストール条件

Chrome でプログレッシブ ウェブアプリが beforeinstallprompt イベントを発生させ、ブラウザ内インストール プロモーションを表示するには、次の条件を満たしている必要があります。

  • ウェブアプリがまだインストールされていない。
  • ユーザー エンゲージメント ヒューリスティックを満たしている:
    • ユーザーがページを少なくとも 1 回クリックまたはタップしている必要があります（以前のページ読み込み時でも可）。
    • ユーザーがページを 30 秒以上閲覧している必要があります。
  • HTTPS で配信される。
  • 次のものを含むウェブアプリ マニフェストが含まれています。
    • short_name または name
    • icons - 192 ピクセルと 512 ピクセルのアイコンを含める必要があります
    • start_url
    • display - fullscreen、standalone、minimal-ui、window-controls-overlay のいずれかにする必要があります
    • prefer_related_applications は存在しないか、false である必要があります

他のブラウザにも同様のインストール条件がありますが、若干の違いがある場合があります。詳しくは、各サイトをご覧ください。