Installeer webapps met het nieuwe HTML-installatie-element.

Patrick Brosset

Gepubliceerd: 12 mei 2026

Het installeren van webapplicaties vereiste altijd JavaScript. Bij gebruik van de beforeinstallprompt gebeurtenis verloopt het installatieproces volledig via scripts. Het nieuwe <install> `-element verandert dat: voeg een enkel HTML-element toe aan je pagina en de browser genereert automatisch een betrouwbare installatieknop, zonder dat er JavaScript nodig is.

Het Microsoft Edge-team heeft in samenwerking met het Chrome-team het <install> -element in Chromium geïmplementeerd. Je kunt het nu testen achter een vlag in Chrome of Edge vanaf versie 148, en als een origin trial die je in beide browsers kunt gebruiken vanaf versie 148 tot en met 153.

Probeer het eens en ontdek hoe het zich verhoudt tot de imperatieve Web Install API ( navigator.install() ), die een eigen origin trial heeft.

Het probleem

De installatie van webapplicaties is gefragmenteerd. Elke browser heeft zijn eigen toegangspunten, zoals adresbalkpictogrammen, menu-items en prompts. Ontwikkelaars hebben beperkte controle over wanneer en hoe het installatieproces wordt weergegeven.

Het is lastiger om een ​​appstore-achtige ervaring te creëren waarmee gebruikers andere apps vanaf je website kunnen installeren, omdat installaties van oudsher beperkt zijn tot de huidige pagina.

Het <install> element

De inhoud en presentatie van het nieuwe HTML-element <install> worden door de browser bepaald. Net als bij andere toestemmingselementen zoals <geolocation> , zorgt de controle van de browser over de labeltekst, de taal en het uiterlijk van de knop ervoor dat de browser de klik van de gebruiker als een authentiek signaal van intentie kan beschouwen.

Een gebruiker die op een knop klikt met het opschrift "Installeer de geweldige applicatie" zal waarschijnlijk niet verbaasd zijn als er een installatieprompt verschijnt.

Omdat de browser de knop weergeeft, krijg je een betrouwbare installatiemogelijkheid met minimale code en hoef je de beforeinstallprompt procedure niet in JavaScript te implementeren.

Installeer de huidige app

Als de huidige pagina verwijst naar een manifest met een id veld, volstaat één element:

<install></install>

De browser geeft de knop weer met gestandaardiseerde tekst en iconen, en wanneer de gebruiker erop klikt, wordt het normale installatieproces van de browser gestart.

Installeer een andere app

Om een ​​webapplicatie te installeren die zich op een andere oorsprong bevindt dan de huidige pagina, gebruikt u het attribuut installurl om naar de andere webapplicatie te verwijzen:

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

Als de pagina op https://awesome-app.com verwijst naar een manifest waarin een id veld is gedefinieerd, dan is dat alles wat u hoeft te doen.

Als er geen id veld bestaat, gebruik dan het manifestid attribuut om een ​​berekende manifest- id op te geven:

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

Om de berekende manifest- id te verkrijgen:

1. Open de ontwikkelaarstools.
2. Ga naar het tabblad Toepassing .
3. Kopieer onder het gedeelte 'Identiteit' de waarde van de berekende app-ID .

Door de <install> -knop te gebruiken om andere Origin-apps te installeren, kunt u een cataloguspagina bouwen waarmee gebruikers meerdere apps kunnen installeren, elk met een eigen <install> -knop.

Zorg voor alternatieve inhoud.

Als de browser het <install> -element niet ondersteunt, wordt alle HTML die je binnen het element plaatst weergegeven:

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

Ondersteuning detecteren

Als de fallback-inhoud niet voldoende is voor uw gebruikssituatie en u liever een andere gebruikerservaring implementeert op browsers die het <install> -element niet ondersteunen, gebruik dan JavaScript om de ondersteuning te detecteren:

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

Verwerk gebeurtenissen

Het <install> -element genereert gebeurtenissen waarnaar u kunt luisteren voor succes, afwijzing en validatiefouten:

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

Probeer het vandaag nog!

Om het <install> -element vandaag nog uit te proberen, hebt u twee opties:

• Test het element alleen lokaal op uw apparaat.
• Test het element in de praktijk, met uw gebruikers, door u aan te melden voor de Origin-proefversie.

Test lokaal

Om het element vandaag nog op uw eigen apparaat te testen:

1. Gebruik Chrome of Edge versie 148 of later.
2. Ga in een nieuw tabblad naar about://flags/#web-app-install-element .
3. Stel het installatie-element van de webapp in op ' Ingeschakeld' .
4. Start de browser opnieuw op.

Test op je live website met de Origin-proefversie.

Met de Origin-proefversie kunnen echte gebruikers op uw productiesite de functie gebruiken zonder dat ze eerst de vlag hoeven in te schakelen.

1. Open de pagina voor het registreren van een proefversie van het <install> -element.
2. Inloggen.
3. Klik op Registreren .
4. Voer de herkomst van uw website in en vul de rest van het formulier in.
5. Zodra het formulier is verzonden, ontvangt u een tokenreeks.
6. Voeg het token toe aan de pagina's van uw site met behulp van een <meta> -tag:

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

U kunt het token ook als HTTP-antwoordheader meesturen:

Origin-Trial: YOUR_TOKEN_HERE

De Origin-proefversie is beschikbaar voor zowel Chrome als Edge in versie 148 tot en met 153, en hetzelfde token werkt in beide browsers. Zie voor meer informatie over Origin-proefversies:

• Begin met Origin-proefversies voor Chrome.
• Test experimentele API's en functies met behulp van origin trials voor Edge.

Bekijk het in actie.

Bekijk de <install> Element Store-demo , een PWA-catalogus die het <install> -element gebruikt om verschillende voorbeeld-apps te installeren.

Vergelijking met de Web Install API

Het <install> -element is niet de enige manier waarop we experimenteren met het verbeteren van app-installaties op het web.

Eerder hebben we geëxperimenteerd met de Web Install API ( navigator.install() ), een imperatieve JavaScript API waarmee je site ook de installatie van webapplicaties van dezelfde of een andere oorsprong kan initiëren. Zie De Web Install API is klaar om te testen voor meer informatie.

De Web Install API heeft ook een eigen origin trial .

Hieronder een vergelijking van de twee benaderingen:

Laat ons weten wat je ervan vindt.

We vragen actief om feedback op beide benaderingen. Afhankelijk van uw behoeften kunnen we ondersteuning toevoegen voor het <install> -element, de navigator.install() -API, of beide.

Om feedback te geven over het <install> -element, kunt u een issue openen op de WICG-repository die aan dit voorstel is gewijd .

Om feedback te geven over de navigator.install() API, voeg een opmerking toe aan het ontwikkelaarsfeedback-item: probleem met navigator.install versus <install> -element .

Bronnen

• Uitleg: het <install> -element
• Demo: De <install> -elementopslag
• Gebruiksaanwijzing en demo-broncode
• Chrome Platform Status-item
• De Web Install API is klaar voor testen (Edge-blog).
• Uitleg over de Web Install API