Son kullanılan Android telefona Progresif Web Uygulaması (PWA) yüklediyseniz uygulama simgesinin arka planının beyaz olduğunu fark edebilirsiniz. Android 8.0 kullanıma sunuldu uygulama simgelerini cihazda çeşitli şekillerde görüntüleyen uyarlanabilir simgeler modeller. Bu biçimi kullanmayan simgelerin arka planları beyazdır.
Maskelenebilir simgeler, Chrome ve Firefox için yeni bir simge biçimidir ve Progresif Web Uygulaması, uyarlanabilir simgeler kullanır ve uygulamanız üzerinde daha fazla kontrol sahibi olmanızı nasıl görüneceğini kontrol edebilirsiniz.
Mevcut simgelerim hazır mı?
Maskelenebilir simgelerin çeşitli şekilleri desteklemesi gerektiğinden, tarayıcının gereken şekilde kırpabileceği dolgu içeren opak bir resim istediğiniz tarayıcı veya platform için geçerli şekli ve boyutu.
Maskelenebilir simge spesifikasyonu, standartlaştırılmış "minimum güvenli bölge" her platform için geçerli. Projenizin önemli kısımları simgesini (örneğin, logonuz), ekranın ortasındaki dairesel bir alanda olmalıdır. yarıçapı simge genişliğinin% 40'ına eşit olan bir simge %10'luk dış kenar bazı platformlarda kırpıldı.
Simgelerinizin hangi bölümlerinin güvenli bölgede olduğunu Chrome'u kullanarak kontrol edebilirsiniz Geliştirici Araçları'nı tıklayın. Progresif web uygulamanız açıkken Geliştirici Araçları'nı başlatın ve Uygulama paneline gidin. Simgeler bölümünde şunları seçebilirsiniz: Maskelenebilir simgeler için yalnızca minimum güvenli alanı gösterin. Bu işlem, simgelerinizi kırparak görünür olduğundan emin olun. Logonuz bu güvenli alanda görünüyorsa simgeniz hazır.
Maskelenebilir simgenizi çeşitli Android şekilleriyle test etmek için Tiger Oakes'ın Maskable.app'e gidin. Bir simgeyi açtığınızda Maskable.app şunları yapmanıza olanak sağlar: farklı şekil ve boyutları deneyin ve önizlemeyi ekibinizle paylaşın.
Maskelenebilir simgeleri nasıl kullanmaya başlayabilirim?
Mevcut bir simgeye dayalı maskelenebilir simge oluşturmak için Maskable.app Düzenleyici. Simgenizi yükleyin, seçin, ardından resmi dışa aktarın.
Maskelenebilir bir simge oluşturup Geliştirici Araçları'nda test ettikten sonra,
web uygulaması manifestinizi yeni öğeye işaret edecek şekilde ayarlayın. İlgili içeriği oluşturmak için kullanılan
web uygulaması manifest dosyası, web uygulamanızla ilgili bilgileri JSON dosyasında sağlar.
bir icons dizisi içerir.
purpose alanı, tarayıcıya simgenizin nasıl kullanılması gerektiğini bildirir. Varsayılan olarak
simgelerin "any" amacı vardır. Android'de bu simgeler beyaz bir arka planda yeniden boyutlandırılır.
arka plan.
{
…
"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 purpose değerini "maskable" olarak ayarlayıp
birlikte kullanılması gerektiğidir. Bu işlem, beyaz arka planı kaldırır ve
size simgenin görünümü üzerinde daha fazla kontrol sağlar. Birden çok
isterseniz boşlukla ayrılmış amaçlar (örneğin, "any maskable")
diğer cihazlarda maske olmadan kullanılacak maskelenebilir simge.
Teşekkür
Bu sayfa Joe Medley tarafından incelendi.