HTMLの新要素<install>でWebアプリのインストールが劇的に変わる！JSなしでPWA導入を加速しよう

HTMLの新要素<install>登場！Webアプリのインストールが超シンプルに

Web制作やアプリ開発に携わる皆さん、こんにちは！
今回は、Webアプリのインストール体験を劇的に変えるかもしれない、HTMLの新しい要素<install>について深掘りしていきます。これまでJavaScriptが必須だったPWA（Progressive Web Apps）のインストールが、なんとHTMLタグ一つで実現できるようになるという、開発者にとってはまさに朗報です！

これまでのWebアプリインストール、何が課題だった？

これまでWebアプリをインストールするには、常にJavaScriptの力を借りる必要がありました。特にbeforeinstallpromptイベントを使ったインストール処理は、すべてスクリプトでゴリゴリと実装するのが一般的でしたね。
また、ブラウザごとにアドレスバーのアイコンやメニュー項目、プロンプトなど、インストールへの導線がバラバラで、デベロッパーはインストールフローの表示タイミングや方法を自由に制御しにくいという課題もありました。
さらに、ユーザーがサイトから他のアプリをインストールできるような、柔軟な体験を構築するのも一苦労。インストールはあくまで現在のページに限定されることが多かったため、複数のアプリを扱うカタログページのような実装は困難だったんです。

新要素<install>で何ができるようになるのか？

そんな課題を解決してくれるのが、この新しいHTML要素<install>です！
この要素を使えば、WebページにHTMLタグを一つ追加するだけで、JavaScriptを一切書かずに、ブラウザが自動的に信頼性の高いインストールボタンを表示してくれます。まるで魔法のようですよね！

重要なポイントは以下の通りです。

• JavaScript不要: これまで必須だったJavaScriptによるインストール処理が不要になります。
• ブラウザが制御: ボタンのラベルテキスト、言語、外観といった表示内容はブラウザが制御します。これにより、ユーザーはボタンをクリックすることで「インストールされる」という意図を明確にブラウザに伝えられ、信頼性が向上します。
• 最小限のコード: beforeinstallprompt処理を複雑に組み立てる必要がなく、最小限のHTMLコードでインストールボタンを設置できます。

MicrosoftのEdgeチームもChromeチームと協力してChromiumにこの<install>要素を実装しており、主要ブラウザでのサポートが期待されます。

どう使える？<install>要素の具体的な利用例

では、実際に<install>要素をどのように活用できるのか、具体的なコード例を交えて見ていきましょう。

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

もし現在のページが、idフィールドを持つマニフェストにリンクしているPWAであれば、実装は非常にシンプルです。

<install></install>

これだけで、ブラウザが標準化されたテキストとアイコンを持つインストールボタンを表示してくれます。ユーザーがこのボタンをクリックすると、ブラウザの通常のインストール手順が開始されます。

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

現在のページとは異なるオリジンにあるWebアプリをインストールしたい場合でも、<install>要素は対応可能です。その際は、installurl属性を使って対象のWebアプリを指定します。

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

この場合、https://awesome-app.comのページがidフィールドを定義したマニフェストにリンクしていれば、これでインストールボタンが表示されます。

もし、対象のWebアプリがidフィールドを定義していない場合は、manifestid属性を使用して計算されたマニフェストIDを設定する必要があります。

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

計算されたマニフェストIDは、ブラウザのデベロッパーツールで簡単に取得できます。

1. デベロッパーツールを開きます。
2. 「Application」タブに移動します。
3. 「id」セクションで、計算されたアプリIDの値をコピーします。

複数のWebアプリをインストールできるカタログページを作る

この<install>要素の大きなメリットの一つは、ユーザーが複数のアプリをインストールできるカタログページを簡単に作成できる点です。各アプリごとに独自の<install>ボタンを設置するだけで、ユーザーはスムーズに複数のWebアプリを導入できるようになります。これまでの課題だった「インストールが現在のページに限定される」という制約が解消されますね。

サポートされていないブラウザへのフォールバック

もしユーザーのブラウザが<install>要素をサポートしていない場合でも安心してください。<install>要素の内部に記述されたHTMLコンテンツがそのまま表示されるように設計されています。これにより、サポート外のブラウザを使用しているユーザーに対しても、代替のコンテンツを提供し、ユーザー体験を損ねることを防げます。

今すぐ<install>を試すには？

この画期的な<install>要素、早く試してみたいですよね！
安定版のサポートはまだ先ですが、Chrome 148+でフラグを有効にすることで、現在テストが可能です。2025年5月現在、ChromeおよびEdgeのバージョン148以降でフラグを有効にすることで試せます。さらに、バージョン148から153まで、オリジントライアルも提供される予定です。
ぜひ、ご自身の環境でフラグを有効にして、この新しい要素の可能性を体験してみてください。また、命令型Web Install API（navigator.install()）との違いも確認してみると、より理解が深まるでしょう。

まとめ

HTMLの新しい<install>要素は、Webアプリのインストール体験を大幅に簡素化し、開発者の負担を軽減する強力なツールとなるでしょう。JavaScriptなしで信頼性の高いインストールボタンを設置できるこの機能は、PWAの普及をさらに加速させる可能性を秘めています。

今日の情報が皆さんのWeb制作やアプリ開発のヒントになれば幸いです。新しい技術を積極的に試して、より良いWeb体験をユーザーに提供していきましょう！