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

プログレッシブ ウェブアプリ(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 - fullscreenstandaloneminimal-uiwindow-controls-overlay のいずれかにする必要があります。
    • prefer_related_applications は存在しないか、false にする必要があります。

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