Se hai installato un'app web progressiva (PWA) su un telefono Android recente, potresti notare che l'icona dell'app ha uno sfondo bianco. Introduzione di Android 8.0 icone adattive, che mostrano icone delle app in diverse forme sul dispositivo di grandi dimensioni. 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 Le app web progressive utilizzano icone adattive e ti offrono un maggiore controllo sulle l'aspetto dell'icona.
Le mie icone attuali sono pronte?
Poiché le icone mascherabili devono supportare diverse forme, è necessario fornire un'immagine opaca con una spaziatura interna che il browser può ritagliare nel forma e dimensione per qualsiasi browser o piattaforma.
La specifica delle icone mascherabili include una proprietà standardizzata "zona di sicurezza minima" rispettate da tutte le piattaforme. Le parti importanti ad esempio il tuo logo, deve trovarsi all'interno di un'area circolare al centro della con un raggio pari al 40% della larghezza dell'icona. Il bordo esterno del 10% potrebbe essere ritagliati su alcune piattaforme.
Puoi controllare quali parti delle icone si trovano all'interno della zona sicura utilizzando Chrome DevTools. Con l'app web progressiva aperta, avvia DevTools e vai al nel riquadro Applicazione. Nella sezione Icone puoi scegliere di Mostra solo l'area di sicurezza minima per le icone mascherabili. In questo modo le icone vengono tagliate è visibile solo l'area sicura. Se il tuo logo è visibile all'interno di quest'area sicura, la tua icona è pronta.
Per testare l'icona mascherabile con varie forme Android, utilizza Maskable.app. Apri un'icona e Maskable.app ti consente prova forme e dimensioni diverse e condividi l'anteprima con il tuo team.
Come faccio ad adottare le icone mascherabili?
Per creare un'icona mascherabile in base a un'icona esistente, puoi utilizzare la Editor Maskable.app. Carica la tua icona, regola colore e dimensione, quindi 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 punti al nuovo asset. La
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 deve essere utilizzata l'icona. Per impostazione predefinita,
hanno lo scopo "any". In Android, queste icone vengono ridimensionate su uno sfondo bianco
sfondo.
{
…
"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 valore purpose su "maskable" per indicare
da usare con le maschere delle icone. In questo modo lo sfondo bianco viene rimosso
ti offre un maggiore controllo sull'aspetto dell'icona. Puoi anche specificare più
separati da spazi (ad esempio, "any maskable") se vuoi che
icona mascherabile da utilizzare senza maschera su altri dispositivi.
Ringraziamenti
Questa pagina è stata esaminata da Joe Medley.