Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

新しい HTML インストール要素でウェブアプリをインストールする

Patrick Brosset

公開: 2026 年 5 月 12 日

ウェブアプリのインストールには常に JavaScript が必要でした。beforeinstallprompt イベントを使用すると、インストールフローはスクリプト内で完結します。新しい <install>要素では、この点が変更されます。HTML 要素を 1 つページにドロップするだけで、ブラウザが信頼できるインストールボタンをレンダリングします。JavaScript は不要です。

イメージ

Microsoft Edge チームは、Chrome チームと協力して、Chromium に <install> 要素を実装しました。現在、Chrome または Edge バージョン 148 以降ではフラグの背後でテストできます。また、148 から 153 までの両方のブラウザで使用できるオリジントライアルとしても利用できます。

ぜひお試しください。独自のオリジントライアルがある命令型Web Install API (navigator.install())との比較もご覧ください。

問題

ウェブアプリのインストールは断片化されています。ブラウザごとに、アドレスバーのアイコン、メニュー項目、プロンプトなど、独自の開始点があります。デベロッパーは、インストールフローが表示されるタイミングと方法を限定的にしか制御できません。

インストールはこれまで現在のページに限定されていたため、ユーザーがサイトから他のアプリをインストールできるアプリストアのようなエクスペリエンスを構築するのは困難です。

`<install>` 要素

新しい <install> HTML 要素のコンテンツとプレゼンテーションはブラウザによって制御されます。<geolocation> などの他の権限要素と同様に、ボタンのラベルテキスト、言語、外観をブラウザが制御することで、ユーザーのクリックを意図の真のシグナルとして信頼できます。

[素晴らしいアプリケーションをインストール] というラベルのボタンをクリックしたユーザーは、インストールプロンプトが表示されても驚かないでしょう。

ブラウザがボタンをレンダリングするため、最小限のコードで信頼できるインストールアフォーダンスを実現できます。JavaScript で beforeinstallprompt の処理を調整する必要はありません。

現在のアプリをインストールする

現在のページが id フィールドを持つマニフェストにリンクしている場合は、要素を 1 つだけ使用します。

<install></install>

ブラウザは標準化されたテキストとアイコンでボタンをレンダリングします。ユーザーがクリックすると、ブラウザの通常のインストールフローが開始されます。

別のアプリをインストールする

現在のページとは異なるオリジンにあるウェブアプリをインストールするには、installurl 属性を使用して別のウェブアプリを指定します。

<install installurl="https://awesome-app.com/"></install>

https://awesome-app.com のページがフィールドを定義するマニフェストにリンクしている場合は、これで完了です。id

id フィールドが存在しない場合は、manifestid 属性を使用して計算されたマニフェスト id を指定します。

<install installurl="https://awesome-app.com/"
  manifestid="https://awesome-app.com/?source=pwa">
</install>

計算されたマニフェスト id を取得するには:

DevTools を開きます。
[アプリケーション] タブに移動します。
[ID] セクションで、[計算されたアプリ ID] の値をコピーします。

<install> ボタンを使用して他のオリジンアプリをインストールすると、ユーザーが複数のアプリをインストールできるカタログページを作成できます。各アプリには独自の<install> ボタンがあります。

代替コンテンツを提供する

ブラウザが <install> 要素をサポートしていない場合は、要素内に配置した HTML が表示されます。

<install installurl="https://awesome-app.com/">
  <a href="https://awesome-app.com/">Launch Awesome App</a>
</install>

サポートを検出する

代替コンテンツではユースケースに対応できない場合や、要素をサポートしていないブラウザで別のユーザーエクスペリエンスを実装する場合は、JavaScript を使用してサポートを検出します。<install>

if ('HTMLInstallElement' in window) {
  // The <install> element is supported.
}

イベントを処理する

<install> 要素は、成功、破棄、検証エラーをリッスンできるイベントを発生させます。

const button = document.querySelector('install');

button.addEventListener('promptaction', () => {
  console.log('Installation succeeded');
});

button.addEventListener('promptdismiss', () => {
  console.log('User dismissed the install prompt');
});

button.addEventListener('validationstatuschanged', (e) => {
  if (e.target.invalidReason === 'install_data_invalid') {
    console.error('Invalid install data:', e.target.invalidReason);
  }
});

今すぐ試す

現在 <install> 要素を試すには、次の 2 つの方法があります。

デバイスで要素をローカルでテストする。
オリジントライアルに登録して、ユーザーと一緒に実際の条件で要素をテストする。

ローカルでテストする

デバイスで要素をテストするには:

Chrome または Edge バージョン 148 以降を使用します。
新しいタブで about://flags/#web-app-install-element に移動します。
[Web App Install Element] を [有効] に設定します。
ブラウザを再起動します。

オリジントライアルを使用してライブサイトでテストする

オリジントライアルを使用すると、本番環境の実際のユーザーは、最初にフラグを有効にすることなく機能を使用できます。

<install> 要素のオリジントライアル登録ページを開きます。
ログインします。
[Register] をクリックします。
サイトのオリジンを入力し、フォームの残りの部分を入力します。
フォームを送信すると、トークン文字列が届きます。
<meta> タグを使用して、トークンをサイトのページに追加します。

<meta http-equiv="origin-trial" content="YOUR_TOKEN_HERE">

または、トークンを HTTP レスポンスヘッダーとして送信することもできます。

Origin-Trial: YOUR_TOKEN_HERE

オリジントライアルは、バージョン 148 ～ 153 の Chrome と Edge の両方で利用できます。同じトークンが両方のブラウザで機能します。オリジントライアルの詳細については、以下をご覧ください。

Chrome のオリジントライアルを使ってみる。
Edge のオリジントライアルを使用して試験運用版の API と機能をテストする。

実例を見る

<install> 要素ストアのデモをご覧ください。これは、<install> 要素を使用して複数のサンプルアプリをインストールできる PWA カタログです。

Web Install API との比較

<install> 要素は、ウェブでのアプリのインストールを改善する方法を試す唯一の方法ではありません。

以前は、Web Install API（navigator.install()）を試しました。これは、同じオリジンまたはクロスオリジンのウェブアプリのインストールをサイトでトリガーできる命令型 JavaScript API です。詳細については、The Web Install API is ready for testingをご覧ください。

Web Install API には独自のオリジントライアルもあります。

2 つの方法の比較は次のとおりです。

	要素	`navigator.install()` API
方法	宣言型 HTML	命令型 JavaScript
必要なコード	1 つの HTML 要素	`navigator.install()` を呼び出し、返された Promise を処理する JavaScript
ブラウザの信頼	高: 権限要素と同様に、ブラウザがボタンのコンテンツと外観を制御する	低: 信頼シグナルとしてユーザー操作（クリック、タップ）が必要
クロスオリジンインストール	可能（`installurl` を使用）	可能（URL を `navigator.install()` に渡す）
カスタマイズ	最小限: ブラウザがボタンの外観を決定する	完全: 独自の UI を設計し、任意の操作から API を呼び出す
代替	組み込み: 要素がサポートされていない場合は子コンテンツがレンダリングされる	独自の機能検出と代替ロジックを作成する
最適な用途	最小限のコードでインストールボタンをドロップインする。ブラウザが信頼する UI が望ましいシナリオ	カスタムインストールフロー、動的カタログ UI、既存の JavaScript を多用するインターフェースへの統合

ご意見をお寄せください

Google では、両方の方法についてフィードバックを積極的に募集しています。必要に応じて、 <install> 要素、navigator.install() API、またはその両方のサポートを追加できます。

<install> 要素に関するフィードバックを共有するには、この提案専用の WICG リポジトリで問題を報告してください。

navigator.install() API に関するフィードバックを送信するには、デベロッパーフィードバック: navigator.install と <install> 要素の問題にコメントを追加してください。

新しい HTML インストール要素でウェブアプリをインストールする コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

問題

<install> 要素