Installer des applications Web avec le nouvel élément d'installation HTML

Patrick Brosset

Publié le 12 mai 2026

L'installation d'applications Web a toujours nécessité JavaScript. Lorsque vous utilisez l'événement beforeinstallprompt, le flux d'installation se déroule entièrement dans le script. Le nouvel <install> élément change la donne : il vous suffit de déposer un seul élément HTML dans votre page pour que le navigateur affiche un bouton d'installation approuvé, sans aucun code JavaScript requis.

L'équipe Microsoft Edge, en collaboration avec l'équipe Chrome, a implémenté l'élément <install> dans Chromium. Vous pouvez désormais le tester à l'aide d'un indicateur dans Chrome ou Edge à partir de la version 148, et en tant qu' essai Origin Trial que vous pouvez utiliser dans les deux navigateurs à partir de la version 148 et jusqu'à la version 153.

Essayez-le et découvrez comment il se compare à l'API Web Install (navigator.install()) impérative, qui dispose de sa propre évaluation d'origine.

Problème

L'installation d'applications Web est fragmentée. Chaque navigateur possède son propre ensemble de points d'entrée, par exemple des icônes dans la barre d'adresse, des éléments de menu et des invites. Les développeurs ont un contrôle limité sur le moment et la manière dont le flux d'installation est présenté.

Il est plus difficile de créer une expérience semblable à celle d'un magasin d'applications qui permet aux utilisateurs d'installer d'autres applications à partir de votre site, car l'installation a toujours été limitée à la page actuelle.

L'élément <install>

Le contenu et la présentation du nouvel élément HTML <install> sont contrôlés par le navigateur. Comme pour d'autres éléments d'autorisation tels que <geolocation>, le contrôle du navigateur sur le texte du libellé, la langue et l'apparence du bouton signifie qu'il peut considérer le clic de l'utilisateur comme un signal d'intention authentique.

Un utilisateur qui clique sur un bouton intitulé "Installer une application géniale" ne sera probablement pas surpris lorsqu'une invite d'installation s'affichera.

Étant donné que le navigateur affiche le bouton, vous bénéficiez d'une fonctionnalité d'installation approuvée avec un minimum de code et sans avoir à orchestrer la cérémonie beforeinstallprompt en JavaScript.

Installer l'application actuelle

Si la page actuelle renvoie vers un fichier manifeste comportant un id champ, un seul élément suffit :

<install></install>

Le navigateur affiche le bouton avec un texte et une iconographie standardisés. Lorsque l'utilisateur clique dessus, le flux d'installation normal du navigateur se déclenche.

Installer une autre application

Pour installer une application Web qui se trouve sur une origine différente de la page actuelle, utilisez l'attribut installurl pour pointer vers l'autre application Web :

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

Si la page à l'adresse https://awesome-app.com renvoie vers un fichier manifeste qui définit un champ id, c'est tout ce que vous avez à faire.

Si aucun champ id n'existe, utilisez l'attribut manifestid pour fournir un fichier manifeste calculé id :

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

Pour obtenir l'id de fichier manifeste calculé :

1. Ouvrez les Outils de développement.
2. Accédez à l'onglet Application.
3. Dans la section Identité, copiez la valeur de Computed App ID (ID d'application calculé).

L'utilisation du bouton <install> pour installer des applications d'autres origines vous permet de créer une page de catalogue qui permet aux utilisateurs d'installer plusieurs applications, chacune avec son propre <install> bouton.

Fournir un contenu de remplacement

Si le navigateur ne prend pas en charge l'élément <install>, le code HTML que vous placez à l'intérieur de l'élément s'affiche :

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

Détecter la compatibilité

Si le contenu de remplacement ne suffit pas pour votre cas d'utilisation et que vous préférez implémenter une expérience utilisateur différente sur les navigateurs qui ne prennent pas en charge l'élément <install> utilisez JavaScript pour détecter la compatibilité :

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

Gérer les événements

L'élément <install> déclenche des événements que vous pouvez écouter pour les erreurs de réussite, de rejet, et de validation :

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);
  }
});

Essayer aujourd'hui

Pour essayer l'élément <install> dès aujourd'hui, vous avez deux options :

• Testez l'élément localement sur votre appareil uniquement.
• Testez l'élément dans des conditions réelles, avec vos utilisateurs, en vous inscrivant à l'évaluation d'origine.

Tester en local

Pour tester l'élément sur votre propre appareil dès aujourd'hui :

1. Utilisez Chrome ou Edge version 148 ou ultérieure.
2. Accédez à about://flags/#web-app-install-element dans un nouvel onglet.
3. Définissez Web App Install Element sur Enabled (Activé).
4. Redémarrez le navigateur.

Tester sur votre site en ligne à l'aide de l'essai Origin Trial

L'essai Origin Trial permet aux utilisateurs réels de votre site de production d'utiliser la fonctionnalité sans avoir à activer l'indicateur au préalable.

1. Ouvrez la page d'inscription à l'essai Origin Trial de l'élément <install> .
2. Connectez-vous.
3. Cliquez sur S'inscrire.
4. Saisissez l'origine de votre site, puis remplissez le reste du formulaire.
5. Une fois le formulaire envoyé, vous recevez une chaîne de jeton.
6. Ajoutez le jeton aux pages de votre site à l'aide d'une balise <meta> :

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

Vous pouvez également envoyer le jeton en tant qu'en-tête de réponse HTTP :

Origin-Trial: YOUR_TOKEN_HERE

L'essai Origin Trial est disponible pour Chrome et Edge dans les versions 148 à 153, et le même jeton fonctionne dans les deux navigateurs. Pour en savoir plus sur les évaluations d'origine, consultez les pages suivantes :

• Premiers pas avec les évaluations d'origine pour Chrome.
• Tester des API et des fonctionnalités expérimentales à l'aide d'évaluations d'origine pourEdge.

Démonstration

Découvrez la démo de la boutique d'éléments <install> Element Store demo, un catalogue de PWA qui utilise l'élément <install> pour vous permettre d'installer plusieurs exemples d'applications.

Comparaison avec l'API Web Install

L'élément <install> n'est pas la seule façon dont nous expérimentons pour améliorer l'installation d'applications sur le Web.

Auparavant, nous avons expérimenté l'API Web Install (navigator.install()), qui est une API JavaScript impérative qui permet également à votre site de déclencher l'installation d'applications Web de même origine ou d'origine croisée. Pour en savoir plus, consultez The Web Install API is ready for testing.

L'API Web Install dispose également de son propre essai Origin Trial.

Voici une comparaison des deux approches :

Donnez-nous votre avis

Nous sommes activement à la recherche de commentaires sur les deux approches. Selon vos besoins, nous pourrions ajouter la compatibilité avec l'élément <install>, l'API navigator.install(), ou les deux.

Pour partager vos commentaires sur l'élément <install>, ouvrez un problème dans le dépôt WICG dédié à cette proposition.

Pour partager vos commentaires sur l'API navigator.install(), ajoutez un commentaire au problème Commentaires des développeurs : navigator.install par rapport à l'élément <install>.

Ressources

• Explication : l'élément <install>
• Démonstration : la boutique d'éléments <install>
• Instructions d'utilisation et source de la démonstration
• Entrée d'état de la plate-forme Chrome
• L'API Web Install est prête à être testée (blog Edge)
• Explication de l'API Web Install