Yeni bir Android telefona Progresif Web Uygulaması (PWA) yüklediyseniz uygulama simgesinin beyaz bir arka plana sahip olduğunu fark edebilirsiniz. Android 8.0, uygulama simgelerini cihaz modellerinde çeşitli şekillerde gösteren uyarlanabilir simgeleri kullanıma sundu. Bu biçimi kullanmayan simgelerin arka planları beyazdır.
Maskelenebilir simgeler, Chrome ve Firefox için yeni bir simge biçimidir. Progresif Web Uygulamanızın uyarlanabilir simgeler kullanmasına olanak tanır ve simgenizin görünümü üzerinde daha fazla kontrol sağlar.
Mevcut simgelerim hazır mı?
Maskelenebilir simgelerin çeşitli şekilleri desteklemesi gerektiğinden, tarayıcının herhangi bir tarayıcı veya platform için gereken şekil ve boyuta göre kırpabileceği dolgulu opak bir resim sağlamanız gerekir.
Maskelenebilir simge spesifikasyonu, tüm platformların uyduğu standartlaştırılmış bir "minimum güvenli bölge" içerir. Simgenizin, logonuz gibi önemli bölümleri, simgenin ortasındaki dairesel bir alanda olmalı ve yarıçapı, simge genişliğinin% 40'ına eşit olmalıdır. Dış% 10'luk kenar bazı platformlarda kırpılabilir.
Chrome Geliştirici Araçları'nı kullanarak simgelerinizin hangi bölümlerinin güvenli bölgede olduğunu kontrol edebilirsiniz. Progresif Web Uygulamanız açıkken Geliştirici Araçları'nı başlatın ve Uygulama paneline gidin. Simgeler bölümünde Maskelenebilir simgeler için yalnızca minimum güvenli alanı göster'i seçebilirsiniz. Bu işlem, simgelerinizi kırparak yalnızca güvenli alanın görünmesini sağlar. Logonuz bu güvenli alanda görünüyorsa simgeniz hazır demektir.
Maskelenebilir simgenizi çeşitli Android şekilleriyle test etmek için Tiger Oakes'un Maskable.app uygulamasını kullanın. Bir simge açtığınızda Maskable.app çeşitli şekil ve boyutları denemenize ve önizlemeyi ekibinizle paylaşmanıza olanak tanır.
Maskelenebilir simgeleri nasıl benimseyebilirim?
Mevcut bir simgeye dayalı maskelenebilir simge oluşturmak için Maskable.app Editor'ı kullanabilirsiniz. Simgenizi yükleyin, renk ve boyutu ayarlayın, ardından resmi dışa aktarın.
Maskelenebilir bir simge oluşturup bunu Geliştirici Araçları'nda test ettikten sonra web uygulaması manifestinizi yeni öğeye işaret edecek şekilde güncellemeniz gerekir. Web uygulaması manifest dosyası, web uygulamanızla ilgili bilgileri JSON dosyasında sağlar ve bir icons dizisi içerir.
purpose alanı, tarayıcıya simgenizin nasıl kullanılması gerektiğini bildirir. Simgelerin varsayılan olarak "any" amacı vardır. Android'de, bu simgeler beyaz bir arka plan üzerinde
yeniden boyutlandırılır.
{
…
"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"`
},
…
],
…
}
Bir simgeyi maskelenebilir hale getirmek için simgenin maskelerle kullanılması gerektiğini belirtmek üzere purpose değerini "maskable" olarak ayarlayın. Bu işlem beyaz arka planı kaldırır ve simgenin görünümü üzerinde daha fazla kontrol sahibi olmanızı sağlar. Maskelenebilir simgenizin diğer cihazlarda maske olmadan kullanılmasını istiyorsanız boşlukla ayrılmış birden fazla amaç da (örneğin, "any maskable") belirtebilirsiniz.
Bildirimler
Bu sayfa Joe Medley tarafından incelendi.