Prompt predefinito
Di seguito è riportato l'esempio dell'esperienza predefinita, che non fornisce un contesto sufficiente.
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:
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."
}
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();
});
}