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

プログレッシブ ウェブアプリ(PWA)は、ウェブ テクノロジーを使用して構築された、高品質の最新のアプリケーションです。PWA は、iOS/Android/デスクトップ アプリと同様の機能を備え、不安定なネットワーク状態でも信頼性が高く、インストール可能であるため、ユーザーは簡単に見つけて使用できます。

ほとんどのユーザーは、アプリのインストールと、インストール環境のメリットについて熟知しています。インストールされているアプリケーションは、オペレーティング システムの起動サーフェス(Mac OS X では [アプリケーション] フォルダ、Windows では [スタート] メニュー、Android と iOS ではホーム画面)に表示されます。インストール済みのアプリケーションは、アクティビティ スイッチャー、スポットライトなどのデバイス検索エンジン、コンテンツ共有シートにも表示されます。

ほとんどのブラウザでは、プログレッシブ ウェブアプリ(PWA)が特定の条件を満たしていれば、インストール可能と表示されます。インジケーターの例として、アドレスバー上のインストール ボタンや、オーバーフロー メニュー内の [インストール] メニュー項目が挙げられます。

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

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

インストールの条件

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

  • ウェブアプリがインストールされていない
  • ユーザー エンゲージメント ヒューリスティックを満たしていること:
    • ユーザーがページを少なくとも 1 回クリックまたはタップしている必要があります(前回のページの読み込み中であっても常に同じです)。
    • ユーザーがページを常に 30 秒以上閲覧している必要があります
  • HTTPS で配信されている
  • 以下を含むウェブアプリ マニフェストが含まれている。
    • short_name または name
    • icons - 192 ピクセルと 512 ピクセルのアイコンを含める必要があります
    • start_url
    • display - fullscreenstandaloneminimal-ui のいずれかにする必要があります。
    • prefer_related_applications は指定しないか、false にする必要があります

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