HTMLの新しい要素「<install>」はJavaScriptなしで、Webアプリのインストールが簡単にできるようになります
Post on:2026年5月20日
sponsorsr
安定版のサポートはまだ先ですが、Chrome 148+でフラグを有効にすることで、HTMLの新しい要素「<install>」が利用できるようになっています。
<install>でインストールボタンを設置すると、JavaScriptなしで、Webアプリ（複数可）のインストールが簡単にできるようになります。
Install web apps with the new HTML install element
by Patrick Brosset
install-element -GitHub
下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。
はじめに
これまでWebアプリのインストールには、常にJavaScriptが必要でした。beforeinstallpromptイベントを使用する場合、インストール処理はすべてスクリプトで処理されます。
HTMLの新しい要素「<install>」は、この状況を一変させます。WebページにHTML要素を一つ追加するだけで、JavaScriptは一切使用せずに、ブラウザが信頼できるインストールボタンを自動的に表示してくれます。
MicrosoftのEdgeチームは、Chromeのチームと協力し、Chromiumに<install>要素を実装しました。2025年5月現在、ChromeおよびEdgeのバージョン148以降でフラグを有効にすることでテストが可能です。また、148から153まで、オリジントライアルも提供されます。
ぜひ試してみて、独自のオリジントライアルが提供されている命令型Web Install API（navigator.install()）との違いを確認してください。
これまでの問題点
これまで、Webアプリのインストール方法は統一されていませんでした。各ブラウザごとにアドレスバーのアイコン、メニュー項目、プロンプトなど、独自の起動手段が用意されています。デベロッパーは、インストールフローの表示タイミングや方法を自由に制御できませんでした。
ユーザーがサイトから他のアプリをインストールできるようなエクスペリエンスを構築するのは、困難です。なぜなら、これまでインストールは現在のページに限定されていたからです。
HTMLの新しい要素「<install>」
HTMLの新しい要素「<install>」の内容と表示は、ブラウザによって制御されます。<geolocation>などの他のパーミッション要素と同様にボタンのラベルテキスト、言語、外観をブラウザが制御することで、ユーザーのクリックを正当な意思表示として信頼できるようになります。
「素晴らしいWebアプリケーションをインストール」というラベルの付いたボタンをクリックしたユーザーが、インストールプロンプトが表示されても驚くことはまずないでしょう。
<install>によるボタンはブラウザによってレンダリングされるため、最小限のコードで信頼性の高いインストールアフォーダンスを実現でき、JavaScriptでbeforeinstallprompt処理を組み立てる必要もありません。
現在のアプリをインストール
現在のページがidフィールドを持つマニフェストにリンクしている場合、必要な要素は1つだけです。
|
1 |
<install></install> |
ブラウザは標準化されたテキストとアイコンを使用してボタンを表示し、ユーザーがそれをクリックすると、ブラウザの通常のインストール手順が開始されます。
別のアプリをインストール
現在のページとは異なるオリジンにあるWebアプリをインストールするには、installurl属性を使用して別のWebアプリを指定します。
|
1 |
<install installurl="https://awesome-app.com/"></install> |
https://awesome-app.comのページがidフィールドを定義したマニフェストにリンクしている場合は、これだけで十分です。
idフィールドを定義していない場合は、manifestid属性を使用して計算されたマニフェストidを設定します。
|
1 2 3 |
<install installurl="https://awesome-app.com/" manifestid="https://awesome-app.com/?source=pwa"> </install> |
計算されたマニフェストidを取得するには、
- デベロッパーツールを開きます。
- 「Application」タブに移動します。
- 「id」セクションで、計算されたアプリ
idの値をコピーします。
<install>によるボタンを使用してオリジンアプリをインストールすることで、ユーザーが複数のアプリをインストールできるカタログページも作成できます。各アプリには独自の<install>ボタンが用意されます。
フォールバック：代替コンテンツの提供
ブラウザが<install>要素をサポートしていない場合、要素内に記述されたHTMLコンテンツがそのまま表示されます。
|
1 2 3 |
<install installurl="https://awesome-app.com/"> <a href="https://awesome-app.com/">Launch Awesome App</a> </install> |
イベントの処理
<install>要素は、インストールの成功・キャンセル・検証エラーを検知するためのイベントを発火し、これらのイベントをリッスンできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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>要素のデモページ
<install>要素を今すぐに試すには、2つの方法があります。
- 自身のデバイスでローカル環境でテストする。
- オリジントライアルに登録して、実際のユーザー環境でテストする。
ローカル環境でテスト
- ChromeまたはEdgeのバージョン148+をご使用します。
- 新しいタブで
about://flags/#web-app-install-elementにアクセス。 - 「Web App Install Element」を有効（Enabled）にします。
- ブラウザを再起動します。
ユーザー環境でテスト
オリジントライアルでは、本番環境の実際のユーザーが事前にフラグを有効にすることなくこの機能を使用できます。
- <install>要素オリジンのトライアル登録ページを開きます。
- サインインして、登録します。
- サイトのオリジンを入力し、フォームの残りの項目を入力します。
- フォームを送信すると、トークン文字列が発行されます。
<meta>タグに、サイトのページにトークンを追加します。
|
1 |
<meta http-equiv="origin-trial" content="YOUR_TOKEN_HERE"> |
あるいは、トークンをHTTPレスポンスヘッダとして送信することもできます。
|
1 |
Origin-Trial: YOUR_TOKEN_HERE |
オリジントライアルは、ChromeとEdgeのバージョン148から153までで利用可能で、同じトークンが両方のブラウザで機能します。オリジントライアルの詳細については、以下をご覧ください。
- Get started with origin trials for Chrome
- Test experimental APIs and features by using origin trials for IE
<install>要素を使ったデモページを用意しました。
このデモは、<install>要素を使用した複数のWebアプリをインストールできるPWAカタログです。
sponsors
