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

Pete LePage

プログレッシブ ウェブアプリ（PWA）は、ウェブ技術を使用して構築された最新の高品質のアプリです。PWA は、iOS/Android/デスクトップ アプリと同様の機能を提供し、不安定なネットワーク状況でも信頼性があります。また、インストール可能であるため、ユーザーが簡単に見つけて使用できます。

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

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

インストール インジケーターが表示されたアドレスバーのスクリーンショット。
ブラウザ提供のインストール プロモーション（パソコン）
ブラウザ提供のインストール プロモーションのスクリーンショット。
ブラウザ提供のインストール プロモーション（モバイル）

また、条件が満たされると、多くのブラウザで 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 にする必要があります。

他のブラウザでもインストールの条件は似ていますが、若干異なる場合があります。詳しくは、以下のサイトをご覧ください。