Come aggiungere un'interfaccia utente di installazione più completa

Gli store offrono agli sviluppatori uno spazio in cui mostrare le loro app prima dell'installazione, con screenshot e informazioni di testo che aiutano l'utente a scegliere se installare l'app. L'UI di installazione più completa offre uno spazio simile in cui gli sviluppatori di app web possono invitare i propri utenti a installare la loro app direttamente dal browser. Questa UI avanzata è disponibile in Chrome per ambienti Android e desktop.

Prompt predefinito

Di seguito è riportato l'esempio dell'esperienza predefinita, che non fornisce un contesto sufficiente.

La finestra di dialogo di installazione predefinita del browser per desktop.
. Finestra di dialogo di installazione predefinita su computer


La finestra di dialogo di installazione predefinita del browser per dispositivi mobili.
. Finestra di dialogo di installazione predefinita su dispositivo mobile

UI di installazione più completa

Per visualizzare la finestra di dialogo dell'interfaccia utente di installazione avanzata anziché il normale prompt predefinito, aggiungi i campi screenshots e description al tuo file manifest web. Guarda l'esempio di Squoosh.app riportato di seguito:

UI di installazione avanzata su computer e dispositivi mobili
. UI di installazione più completa su computer e dispositivi mobili.

La finestra di dialogo dell'interfaccia utente di installazione più completa è composta dai contenuti dei campi description e screenshots del file manifest web.

Per attivare la finestra di dialogo devi solo aggiungere almeno uno screenshot per il fattore di forma corrispondente, ma è consigliabile aggiungere anche la descrizione. Consulta le specifiche per questi campi riportati di seguito.

Screenshot

Gli screenshot arricchiscono ulteriormente alla nuova UI di installazione e ne consigliamo vivamente l'utilizzo. Nel file manifest aggiungi il membro screenshots, che accetta un array che richiede almeno un'immagine e Chrome ne mostrerà fino a otto. Di seguito è riportato un esempio.

 "screenshots": [
    {
     "src": "source/image1.png",
      "sizes": "640x320",
      "type": "image/png",
      "form_factor": "wide",
      "label": "Wonder Widgets"
    }
]

Gli screenshot devono rispettare i seguenti criteri:

  • La larghezza e l'altezza devono essere comprese tra 320 px e 3840 px.
  • La dimensione massima non può superare 2,3 volte la dimensione minima.
  • Tutti gli screenshot con lo stesso fattore di forma devono avere proporzioni identiche.
  • Sono supportati solo i formati di immagine JPEG e PNG.
  • Verranno mostrati solo otto screenshot. Se ne vengono aggiunti altri, lo user agent li ignora.

Inoltre, devi includere le dimensioni e il tipo di immagine in modo che venga visualizzata correttamente. Guarda questa demo.

L'elemento form_factor indica al browser se lo screenshot deve essere visualizzato in ambienti desktop (wide) o mobili (narrow).

Descrizione

Il membro description descrive l'applicazione nella richiesta di installazione per invitare l'utente a mantenere l'app.

La finestra di dialogo verrebbe visualizzata anche senza un description, ma è consigliabile. Esiste un limite massimo che viene attivato dopo 7 righe di testo (circa 324 caratteri), mentre le descrizioni più lunghe vengono troncate e vengono aggiunti i puntini di sospensione (come puoi vedere in questo esempio).

{
…
"description": "Compress and compare images with different codecs
right in your browser."
}
Descrizione aggiunta
Descrizione aggiunta.
Una descrizione più lunga che è stata troncata.
Le descrizioni più lunghe vengono troncate.

La descrizione viene visualizzata nella parte superiore della richiesta di installazione.

Potresti aver notato dagli screenshot che anche le finestre di dialogo di installazione elencano l'origine dell'app. Le origini troppo lunghe per adattarsi all'interfaccia utente vengono troncate (sono note anche come eliding) come misura di sicurezza per proteggere gli utenti.

Per approfondire

Demo

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="color-scheme" content="dark light" />
    <link rel="manifest" href="manifest.json" />
    <title>How to add Richer Install UI to your web app</title>
    <!-- TODO: Devsite - Removed inline handlers -->
    <!-- <script>
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
          navigator.serviceWorker.register('sw.js');
        });
      }
    </script>
    <script type="module" src="script.js"></script> -->
  </head>
  <body>
    <h1>How to add Richer Install UI to your web app</h1>
    <ol>
      <li>
        Install the app by clicking the button below. After the installation,
        the button is disabled.
        <p>
          <button disabled type="button">Install</button>
        </p>
      </li>
      <li>
        When you click on install a dialog similar to the ones from app stores
        will be displayed.
      </li>
      <li>
        The dialog includes the `description` and `screenshots` set in the app
        manifest.
      </li>
      <li>
        Screenshots should be different depending if the app is being installed
        on a mobile or desktop device, according to the `form_factor` value set
        for the screenshots on the manifest
      </li>
    </ol>
  </body>
</html>

JS


        // The install button.
const installButton = document.querySelector('button');

// Only relevant for browsers that support installation.
if ('BeforeInstallPromptEvent' in window) {
  // Variable to stash the `BeforeInstallPromptEvent`.
  let installEvent = null;

  // Function that will be run when the app is installed.
  const onInstall = () => {
    // Disable the install button.
    installButton.disabled = true;
    // No longer needed.
    installEvent = null;
  };

  window.addEventListener('beforeinstallprompt', (event) => {
    // Do not show the install prompt quite yet.
    event.preventDefault();
    // Stash the `BeforeInstallPromptEvent` for later.
    installEvent = event;
    // Enable the install button.
    installButton.disabled = false;
  });

  installButton.addEventListener('click', async () => {
    // If there is no stashed `BeforeInstallPromptEvent`, return.
    if (!installEvent) {
      return;
    }
    // Use the stashed `BeforeInstallPromptEvent` to prompt the user.
    installEvent.prompt();
    const result = await installEvent.userChoice;
    // If the user installs the app, run `onInstall()`.
    if (result.outcome === 'accepted') {
      onInstall();
    }
  });

  // The user can decide to ignore the install button
  // and just use the browser prompt directly. In this case
  // likewise run `onInstall()`.
  window.addEventListener('appinstalled', () => {
    onInstall();
  });
}