Icone delle app che si adattano alle piattaforme.
Che cosa sono le icone mascherabili?
Se hai installato un'app web progressiva su uno smartphone Android recente, potresti notare che l'icona viene visualizzata con uno sfondo bianco. Android Oreo ha introdotto le icone adattive, che mostrano le icone delle app in varie forme su diversi modelli di dispositivi. Alle icone che non seguono questo nuovo formato vengono assegnati uno sfondo bianco.
Le icone mascherabili sono un nuovo formato di icona che ti offre un maggiore controllo e consente alla tua Progressive Web App di utilizzare icone adattive. Se fornisci un'icona mascherabile, l'icona può riempire l'intera forma e avere un aspetto ottimale su tutti i dispositivi Android. Firefox e Chrome hanno recentemente aggiunto il supporto per questo nuovo formato e puoi adottarlo nelle tue app.
Le mie icone attuali sono pronte?
Poiché le icone mascherabili devono supportare una varietà di forme, fornisci un'immagine opaca con una certa spaziatura interna che il browser può ritagliare nella forma e nelle dimensioni richieste. È preferibile non fare affidamento su una forma particolare, poiché quella finale varia a seconda del browser e della piattaforma.
Fortunatamente, esiste una "zona sicura minima" ben definita e standardizzata rispettata da tutte le piattaforme. Le parti importanti dell'icona, come il logo, devono trovarsi all'interno di un'area circolare al centro dell'icona con un raggio pari al 40% della larghezza dell'icona. Il bordo esterno al 10% potrebbe essere ritagliato.
Con Chrome DevTools puoi controllare quali parti delle tue icone rientrano nella zona sicura. Con l'app web progressiva aperta, avvia DevTools e vai al riquadro Applicazione. Nella sezione Icone, puoi scegliere Mostrare solo l'area di sicurezza minima per le icone mascherabili. Le icone verranno tagliate in modo che sia visibile solo l'area di sicurezza. Se il tuo logo è visibile in quest'area di sicurezza, non devi fare altro.
Per testare l'icona mascherabile con la varietà di forme Android, utilizza lo strumento Maskable.app creato da Tigre. Apri un'icona, quindi Maskable.app ti consente di provare varie forme e dimensioni e condividere l'anteprima con gli altri membri del team.
Come faccio ad adottare le icone mascherabili?
Se vuoi creare un'icona mascherabile in base a un'icona esistente, puoi utilizzare l'editor mascherabile.app. Carica l'icona, regola il colore e le dimensioni ed esporta l'immagine.
Dopo aver creato un'icona mascherabile e averla testata in DevTools, devi aggiornare il file manifest dell'app web in modo che rimandi al nuovo asset. Il file manifest dell'app web fornisce informazioni sulla tua app web in un file JSON e include un array icons.
Per includere icone mascherabili, il campo purpose indica al browser come utilizzare l'icona. Per impostazione predefinita, le icone avranno lo scopo di "any". Queste icone verranno ridimensionate su uno sfondo bianco su Android.
{
…
"icons": [
…
{
"src": "path/to/regular_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "any"
},
{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "maskable" // <-- New property value `"maskable"`
},
…
],
…
}
Le icone mascherabili devono utilizzare un valore diverso per purpose: "maskable". Questo indica
che un'immagine deve essere utilizzata con maschere delle icone, per consentirti di avere un maggiore controllo sul risultato.
In questo modo, le icone non avranno uno sfondo bianco. Puoi anche specificare più scopi separati da spazi (ad esempio "any maskable"), se vuoi che l'icona mascherabile venga utilizzata senza maschera su altri dispositivi.
In questo modo, puoi creare le tue icone mascherabili, assicurandoti che l'app venga visualizzata correttamente da un lato all'altro (e da un cerchio all'altro o da ovale all'ovale 👀).
Ringraziamenti
Questo articolo è stato esaminato da Joe Medley.