PWA’larda maskelenebilir simgelerle uyarlanabilir simge desteği

Maskelenebilir simgeler nelerdir? #

Yeni bir Android telefona bir Aşamalı Web Uygulaması yüklediyseniz, simgenin beyaz bir arka planda göründüğünü fark edebilirsiniz. Android Oreo, uygulama simgelerini farklı cihaz modellerinde çeşitli şekillerde görüntüleyen uyarlanabilir simgeleri kullanıma sundu. Bu yeni biçime uymayan simgelere beyaz arka plan verilir.

Maskelenebilir simgeler, size daha fazla kontrol sağlayan ve Progresif Web Uygulamanızın uyarlanabilir simgeler kullanmasına izin veren yeni bir simge biçimidir. Maskelenebilir bir simge sağlarsanız, simgeniz tüm şekli doldurabilir ve tüm Android cihazlarda harika görünebilir. Firefox ve Chrome yakın zamanda bu yeni biçim için destek eklemiştir ve siz de uygulamalarınızda bunu kullanabilirsiniz.

Mevcut simgelerim hazır mı? #

Maskelenebilir simgelerin çeşitli şekilleri desteklemesi gerektiğinden, tarayıcının gereken şekle ve boyuta kırpabilmesi için biraz dolgu içeren opak bir görüntü sağlarsınız. Nihai şekil tarayıcıya ve platforma göre değiştiğinden, belirli bir şekle güvenmemek en iyisidir.

Neyse ki, iyi tanımlanmış ve standartlaştırılmış tüm platformların saygı duyduğu “minimum güvenli bölge”. Logonuz gibi simgenizin önemli kısımları, simgenin ortasında, simge genişliğinin %40’ına eşit yarıçapa sahip dairesel bir alan içinde olmalıdır. Dış %10’luk kenar kırpılabilir.

Chrome DevTools ile simgelerinizin hangi bölümlerinin güvenli bölgeye geldiğini kontrol edebilirsiniz. Aşamalı Web Uygulamanız açıkken DevTools’u başlatın ve şuraya gidin: Başvuru panel. İçinde simgeler bölümünde seçebilirsiniz Maskelenebilir simgeler için yalnızca minimum güvenli alanı göster. Simgeleriniz, yalnızca güvenli alan görünecek şekilde kırpılacaktır. Logonuz bu güvenli alanda görünüyorsa hazırsınız.

Maskelenebilir simgenizi çeşitli Android şekilleriyle test etmek için Maskable.app Tiger aracı oluşturuldu. Bir simge açın, ardından Maskable.app çeşitli şekilleri ve boyutları denemenize izin verir ve önizlemeyi ekibinizdeki diğer kişilerle paylaşabilirsiniz.

Maskelenebilir simgeleri nasıl benimserim? #

Mevcut bir simgeye dayalı olarak maskelenebilir bir simge oluşturmak istiyorsanız, Maskable.app Düzenleyicisi. Simgenizi yükleyin, rengi ve boyutu ayarlayın, ardından görüntüyü dışa aktarın.

Maskelenebilir bir simge oluşturup DevTools’ta test ettikten sonra, web uygulaması bildiriminizi yeni varlığa işaret edecek şekilde güncellemeniz gerekir. Web uygulaması bildirimi, web uygulamanız hakkında bir JSON dosyasında bilgi sağlar ve bir icons sıralamak.

Maskelenebilir simgelerin dahil edilmesi için, purpose alanı, tarayıcıya simgenizin nasıl kullanılması gerektiğini söyler. Varsayılan olarak, simgelerin bir amacı olacaktır: "any". Bu simgeler, Android’de beyaz bir arka planın üzerinde yeniden boyutlandırılacaktı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" // &LT-- New property value `"maskable"`
    },
    …
  ],
  …
}

Maskelenebilir simgeler, için farklı bir değer kullanmalıdır. purpose: "maskable". Bu, bir görüntünün simge maskeleriyle kullanılmasının amaçlandığını gösterir ve size sonuç üzerinde daha fazla kontrol sağlar. Bu şekilde, simgelerinizin arka planı beyaz olmayacaktır. Ayrıca birden çok boşlukla ayrılmış amaç belirtebilirsiniz (örneğin, "any maskable"), maskelenebilir simgenizin diğer cihazlarda maskesiz kullanılmasını istiyorsanız.

Bununla, uygulamanızın uçtan uca harika göründüğünden (ve değeri ne olursa olsun, daireden daireye, ovalden ovale 😄) emin olarak kendi maskelenebilir simgelerinizi oluşturabilirsiniz.

teşekkürler #

Bu makale tarafından incelendi Joe Karışık.