Gli store offrono agli sviluppatori uno spazio in cui mostrare le loro app prima dell'installazione, con screenshot e informazioni di testo che aiutano gli utenti a scegliere se installarla. Una UI di installazione più completa offre uno spazio simile in cui gli sviluppatori di app web possono invitare gli utenti a installare l'app, direttamente dal browser. Questa UI migliorata è disponibile in Chrome per Android e in ambiente desktop.
Prompt predefinito
Consulta l'esempio riportato di seguito per l'esperienza predefinita, che non fornisce un contesto sufficiente.
UI di installazione più completa
Per visualizzare la finestra di dialogo dell'interfaccia utente di installazione più completa anziché la normale richiesta predefinita di piccole dimensioni, aggiungi i campi screenshots e description al file manifest web. Guarda l'esempio di Squoosh.app riportato di seguito:
La finestra di dialogo dell'interfaccia utente di installazione più completa è composta dai contenuti dei campi description e screenshots nel file manifest web.
Per attivare la finestra di dialogo devi solo aggiungere almeno uno screenshot per il fattore di forma corrispondente, ma ti consigliamo di aggiungere anche la descrizione. Controlla le specifiche per i campi di seguito.
Screenshot
Gli screenshot aggiungono davvero la parte "più ricca" alla nuova interfaccia utente di installazione e ne consigliamo vivamente l'utilizzo. Nel file manifest aggiungi il membro screenshots, che prende un array che richiede almeno un'immagine. Chrome ne mostrerà al massimo otto. Di seguito è riportato un esempio.
"screenshots": [
{
"src": "source/image1.gif",
"sizes": "640x320",
"type": "image/gif",
"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 al massimo.
- La lunghezza della dimensione massima non può superare di 2,3 volte la dimensione minima.
- Tutti gli screenshot con lo stesso fattore di forma devono avere proporzioni identiche.
- Sono supportati solo i formati immagine JPEG e PNG.
- Verranno visualizzati solo otto screenshot. Se ne vengono aggiunti altri, lo user agent semplicemente ignora.
Inoltre, devi includere le dimensioni e il tipo dell'immagine in modo che venga visualizzata correttamente. Guarda questa demo.
L'icona form_factor indica al browser se lo screenshot deve essere visualizzato in ambienti desktop (wide) o mobile (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 description, ma è consigliata.
Esiste un limite massimo che viene inserito 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."
}
La descrizione viene visualizzata nella parte superiore della richiesta di installazione.
Potresti aver notato dagli screenshot che le finestre di dialogo di installazione elencano anche l'origine dell'app. Le origini troppo lunghe per essere adatte alla UI vengono troncate. In questo caso, si parla anche di eliding e come misura di sicurezza per la protezione degli 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();
});
}