Installare app web con il nuovo elemento di installazione HTML

Patrick Brosset
Patrick Brosset
Homepage

Data di pubblicazione: 12 maggio 2026

L'installazione di app web ha sempre richiesto JavaScript. Quando utilizzi l'evento beforeinstallprompt, il flusso di installazione risiede interamente nello script. Il nuovo <install> elemento cambia questa situazione: inserisci un singolo elemento HTML nella pagina e il browser esegue il rendering di un pulsante di installazione attendibile, senza richiedere JavaScript.

immagine

Il team di Microsoft Edge, in collaborazione con il team di Chrome, ha implementato l'elemento <install> in Chromium. Ora è disponibile per i test dietro un flag in Chrome o Edge dalla versione 148 e come un origin trial che puoi utilizzare in entrambi i browser a partire dalla versione 148 e fino alla versione 153.

Provalo e scopri come si confronta con l'API Web Install imperativa (navigator.install()), che ha la sua origin trial.

Il problema

L'installazione di app web è frammentata. Ogni browser ha il proprio insieme di punti di ingresso, ad esempio icone della barra degli indirizzi, voci di menu e prompt. Gli sviluppatori hanno un controllo limitato su quando e come viene visualizzato il flusso di installazione.

Creare un'esperienza simile a quella di un app store che consenta agli utenti di installare altre app dal tuo sito è più difficile, perché l'installazione è stata storicamente limitata alla pagina corrente.

L'elemento <install>

I contenuti e la presentazione del nuovo elemento HTML <install> sono controllati dal browser. Analogamente ad altri elementi di autorizzazione come <geolocation>, il controllo del browser sul testo dell'etichetta, sulla lingua e sull'aspetto del pulsante significa che può considerare il clic dell'utente come un segnale di intento autentico.

È improbabile che un utente che fa clic su un pulsante con l'etichetta "Installa applicazione fantastica" si sorprenda quando viene visualizzato un prompt di installazione.

Poiché il browser esegue il rendering del pulsante, ottieni un'interfaccia di installazione attendibile con un codice minimo e senza dover orchestrare la cerimonia beforeinstallprompt in JavaScript.

Installare l'app corrente

Se la pagina corrente rimanda a un manifest con un id campo, è sufficiente un solo elemento:

<install></install>

Il browser esegue il rendering del pulsante con testo e iconografia standardizzati e, quando l'utente fa clic, viene avviato il normale flusso di installazione del browser.

Installare un'altra app

Per installare un'app web che si trova su un'origine diversa dalla pagina corrente, utilizza l'attributo installurl per rimandare all'altra app web:

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

Se la pagina all'indirizzo https://awesome-app.com rimanda a un manifest che definisce un campo id, non devi fare altro.

Se non esiste un campo id, utilizza l'attributo manifestid per fornire un manifest id calcolato:

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

Per ottenere l'id del manifest calcolato:

  1. Apri DevTools.
  2. Vai alla scheda Applicazione.
  3. Nella sezione Identità, copia il valore ID app calcolato.

L'utilizzo del pulsante <install> per installare app di altre origini ti consente di creare una pagina di catalogo che consente agli utenti di installare più app, ognuna con il proprio <install> pulsante.

Fornire contenuti di riserva

Se il browser non supporta l'elemento <install>, viene visualizzato il codice HTML inserito nell'elemento:

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

Rilevare il supporto

Se i contenuti di riserva non sono sufficienti per il tuo caso d'uso e preferisci implementare un'esperienza utente diversa sui browser che non supportano l' <install> elemento, utilizza JavaScript per rilevare il supporto:

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

Gestire gli eventi

L'elemento <install> attiva eventi che puoi ascoltare per errori di successo, chiusura, e convalida:

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

Prova subito

Per provare l'elemento <install> oggi, hai due opzioni:

  • Testa l'elemento localmente solo sul tuo dispositivo.
  • Testa l'elemento in condizioni reali, con i tuoi utenti, registrandoti alla prova dell'origine.

Testare localmente

Per testare l'elemento sul tuo dispositivo oggi:

  1. Utilizza Chrome o Edge versione 148 o successive.
  2. Vai a about://flags/#web-app-install-element in una nuova scheda.
  3. Imposta Elemento di installazione dell'app web su Attivato.
  4. Riavvia il browser.

Testare il sito pubblicato utilizzando la prova dell'origine

La prova dell'origine consente agli utenti reali del tuo sito di produzione di utilizzare la funzionalità senza dover prima attivare il flag.

  1. Apri la pagina di registrazione della prova dell'origine dell'elemento <install> .
  2. Accedi.
  3. Fai clic su Registrati.
  4. Inserisci l'origine del tuo sito e compila il resto del modulo.
  5. Una volta inviato il modulo, riceverai una stringa di token.
  6. Aggiungi il token alle pagine del tuo sito utilizzando un tag <meta>:
<meta http-equiv="origin-trial" content="YOUR_TOKEN_HERE">

In alternativa, puoi inviare il token come intestazione della risposta HTTP:

Origin-Trial: YOUR_TOKEN_HERE

La prova dell'origine è disponibile sia per Chrome che per Edge nelle versioni da 148 a 153 e lo stesso token funzionerà in entrambi i browser. Per saperne di più sulle origin trial, vedi:

Guarda come funziona

Dai un'occhiata alla <install> Element Store demo, un catalogo PWA che utilizza l'elemento <install> per consentirti di installare diverse app di esempio.

Confronto con l'API Web Install

L'elemento <install> non è l'unico modo in cui stiamo sperimentando come migliorare le installazioni di app sul web.

In precedenza, abbiamo sperimentato l'API Web Install (navigator.install()), un'API JavaScript imperativa che consente anche al tuo sito di attivare l'installazione di app web della stessa origine o di origini diverse. Per saperne di più, consulta The Web Install API is ready for testing.

Anche l'API Web Install ha la sua prova dell'origine.

Ecco come si confrontano i due approcci:

elemento API navigator.install()
Approccio HTML dichiarativo JavaScript imperativo
Codice richiesto Un singolo elemento HTML JavaScript per chiamare navigator.install() e gestire la promessa restituita
Attendibilità del browser Alta: il browser controlla i contenuti e l'aspetto del pulsante, in modo simile agli elementi di autorizzazione Bassa: richiede un'attivazione dell'utente (clic, tocco) come indicatore di fiducia
Installazione multiorigine Sì, con installurl Sì, passando un URL a navigator.install()
Personalizzazione Minima: il browser decide l'aspetto del pulsante Completa: puoi progettare la tua UI e chiamare l'API da qualsiasi interazione
Fallback Integrato: i contenuti secondari vengono visualizzati se l'elemento non è supportato Scrivi la tua logica di rilevamento delle funzionalità e di fallback
Ideale per Pulsanti di installazione drop-in con codice minimo; scenari in cui è auspicabile un'interfaccia utente attendibile dal browser Flussi di installazione personalizzati, UI di catalogo dinamiche, integrazione in interfacce esistenti con un utilizzo intensivo di JavaScript

Facci sapere la tua opinione

Stiamo cercando attivamente feedback su entrambi gli approcci. A seconda delle tue esigenze, potremmo aggiungere il supporto per l'elemento <install>, l'API navigator.install() o entrambi.

Per condividere il tuo feedback sull'elemento <install>, apri un problema nel repository WICG dedicato a questa proposta.

Per condividere il tuo feedback sull'API navigator.install(), aggiungi un commento al problema Feedback degli sviluppatori: elemento navigator.install rispetto a <install>.

Risorse