Modifiche da aggiungere al comportamento della schermata Home

Da quando abbiamo lanciato per la prima volta il banner per l'aggiunta alla schermata Home, ci stiamo adoperando per etichettare le app web progressive in modo più chiaro e semplificare il modo in cui gli utenti possono installarle. Il nostro obiettivo finale è fornire un pulsante di installazione nella omnibox su tutte le piattaforme e in Chrome 68 stiamo apportando modifiche per raggiungere questo obiettivo.

Che cosa cambia

A partire da Chrome 68 su Android (stabile a luglio 2018), Chrome non mostrerà più il banner Aggiungi alla schermata Home. Se il sito soddisfa i criteri per l'aggiunta a schermata Home, Chrome mostrerà la mini barra delle informazioni. Quindi, se l'utente fa clic sulla mini-barra delle informazioni o se chiami prompt() sull'evento beforeinstallprompt dall'interno di un gesto dell'utente, Chrome mostrerà un'aggiunta modale alla finestra di dialogo della schermata Home.

La mini-barra delle informazioni

Mini-infobar è un componente dell'interfaccia utente di Chrome e non è controllabile dal sito, ma può essere facilmente ignorata dall'utente. Una volta ignorato dall'utente, non verrà visualizzato di nuovo finché non sarà trascorso un periodo di tempo sufficiente (attualmente 3 mesi). La mini-barra delle informazioni viene visualizzata quando il sito soddisfa i criteri Aggiungi a schermata Home, indipendentemente dal fatto che preventDefault() per l'evento beforeinstallprompt o meno.

La mini-barra delle informazioni è un'esperienza provvisoria per Chrome su Android mentre lavoriamo per creare un'esperienza coerente su tutte le piattaforme che include un pulsante di installazione nella omnibox. ## Attivazione della finestra di dialogo Aggiungi alla schermata Home

Anziché chiedere all'utente al caricamento della pagina (un anti-pattern per le richieste di autorizzazione), puoi indicare che la tua app può essere installata con alcune UI, che mostreranno la richiesta di installazione modale. Ad esempio, questa PWA desktop aggiunge un pulsante "Installa app" appena sopra il nome del profilo dell'utente.

Chiedere all'utente di installare l'app con un gesto sembra meno spam e aumenta la probabilità che l'utente faccia clic su "Aggiungi" anziché su "Annulla". Incorporare un pulsante Installa nell'app significa che, anche se l'utente sceglie di non installare l'app oggi, il pulsante rimarrà lì domani o quando sarà pronto per l'installazione.

In ascolto dell'evento beforeinstallprompt

Se il tuo sito soddisfa i criteri Aggiungi a schermata Home, Chrome attiva un evento beforeinstallprompt, salva un riferimento all'evento e aggiorna l'interfaccia utente per indicare che l'utente può aggiungere la tua app alla schermata Home.

let installPromptEvent;

window.addEventListener('beforeinstallprompt', event => {
  // Prevent Chrome <= 67 from automatically showing the prompt
  event.preventDefault();
  // Stash the event so it can be triggered later.
  installPromptEvent = event;
  // Update the install UI to notify the user app can be installed
  document.querySelector('#install-button').disabled = false;
});

L'evento beforeinstallprompt non viene attivato se l'app è già installata (consulta i criteri per l'aggiunta alla schermata Home). Tuttavia, se l'utente in seguito disinstalla l'app, l'evento beforeinstallprompt verrà nuovamente attivato su ogni navigazione nelle pagine.

Visualizzazione della finestra di dialogo con prompt()

Per visualizzare la finestra di dialogo Aggiungi a schermata Home, chiama prompt() sull'evento salvato dall'interno di un gesto dell'utente. Chrome mostrerà la finestra di dialogo modale che chiede all'utente di aggiungere la tua app alla schermata Home. Quindi, ascolta la promessa restituita dalla proprietà userChoice dell'evento beforeinstallprompt. La promessa restituisce un oggetto con una proprietà outcome dopo che la richiesta è stata mostrata e l'utente ha risposto.

btnInstall.addEventListener('click', () => {
  // Update the install UI to remove the install button
  document.querySelector('#install-button').disabled = true;
  // Show the modal add to home screen dialog
  installPromptEvent.prompt();
  // Wait for the user to respond to the prompt
  installPromptEvent.userChoice.then(choice => {
    if (choice.outcome === 'accepted') {
      console.log('User accepted the A2HS prompt');
    } else {
      console.log('User dismissed the A2HS prompt');
    }
    // Clear the saved prompt since it can't be used again
    installPromptEvent = null;
  });
});

Puoi chiamare prompt() per l'evento differito solo una volta. Se l'utente fa clic su Annulla nella finestra di dialogo, dovrai attendere che l'evento beforeinstallprompt venga attivato nella navigazione nella pagina successiva. A differenza delle richieste di autorizzazione tradizionali, facendo clic su Annulla non verranno bloccate le chiamate future a prompt() perché la chiamata deve essere chiamata all'interno di un gesto dell'utente.

Altre risorse

Controlla i banner per l'installazione di app per ulteriori informazioni, tra cui:

• Dettagli sull'evento beforeinstallprompt
• Monitoraggio della risposta dell'utente alla richiesta di aggiungere la schermata Home
• Monitorare se l'app è stata installata
• Determinare se la tua app è in esecuzione come app installata