Se hai installato un'app web progressiva (PWA) su un telefono Android recente, potresti notare che l'icona dell'app ha uno sfondo bianco. Android 8.0 ha introdotto le icone adattive, che mostrano le icone delle app in diverse forme sui modelli di dispositivi. Le icone che non utilizzano questo formato hanno uno sfondo bianco.
Le icone mascherabili sono un nuovo formato di icone per Chrome e Firefox che consente alle app web progressive di utilizzare icone adattive e ti offre un maggiore controllo sull'aspetto delle icone.
Le mie icone attuali sono pronte?
Poiché le icone mascherabili devono supportare una varietà di forme, devi fornire un'immagine opaca con una spaziatura interna che il browser possa ritagliare nella forma e nella dimensione richieste per qualsiasi browser o piattaforma.
La specifica delle icone mascherabili include una "zona sicura minima" standardizzata che viene 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 del 10% potrebbe essere ritagliato su alcune piattaforme.
Puoi controllare quali parti delle icone si trovano nella zona sicura con Chrome DevTools. Con l'app web progressiva aperta, avvia DevTools e vai al riquadro Applicazione. Nella sezione Icone, puoi scegliere di mostrare solo l'area di sicurezza minima per le icone mascherabili. Le icone vengono tagliate in modo che sia visibile solo l'area di sicurezza. Se il tuo logo è visibile in quest'area di sicurezza, l'icona è pronta.
Per testare l'icona mascherabile con varie forme Android, usa Maskable.app di Tiger Oakes. Apri un'icona e Maskable.app ti consentirà di provare varie forme e dimensioni e di condividere l'anteprima con il tuo team.
Come faccio ad adottare le icone mascherabili?
Per creare un'icona mascherabile basata su 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 verificata 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.
Il campo purpose indica al browser come utilizzare l'icona. Per impostazione predefinita, lo scopo delle icone è "any". In Android, queste icone vengono ridimensionate su uno sfondo bianco.
{
…
"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"`
},
…
],
…
}
Per rendere un'icona mascherabile, imposta il relativo valore purpose su "maskable" per indicare che deve essere utilizzata con le maschere delle icone. In questo modo viene rimosso lo sfondo bianco e
hai un maggiore controllo sull'aspetto dell'icona. 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.
Ringraziamenti
Questa pagina è stata esaminata da Joe Medley.