PWA-kuvakkeet: estä leikkautuminen ja pienet valkoiset ruudut
Asennetut verkkosovellukset käyttävät manifestin kuvakkeita. Käynnistin voi rajata niitä muotomaskilla.
Valmistele sovelluskuvat
Aloita PNG-koista 192×192 ja 512×512 ja tarkista alustat. Suhteelliset polut määräytyvät manifestin URL:n mukaan. IcoJetin enintään 256px ei korvaa 512px:n PNG:tä.
Suunnittele maskable-versio
Pidä tärkeä sisältö keskellä olevassa ympyrässä, jonka säde on 40% leveydestä. Jatka taustaa reunoihin. Käytä purpose="maskable" vain tarkistetulle suunnitelmalle.
Testaa asennus
Tarkista manifesti ja maskin esikatselu selaimessa, sitten asenna kohdelaitteeseen. Tarkista tavallinen ja maskattava versio. Vertaa vanhaa asennusta uuteen ennen kuvan muokkaamista.
{
"icons": [
{
"src": "/icons/app-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/app-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/app-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}Lähteet ja lisätietoa
MDN — Manifest icons ↗web.dev — Web app manifest ↗