PWA'larda maskelenebilir simgelerle uyarlanabilir simge desteği

Son model bir Android telefona Progresif Web Uygulaması (PWA) yüklediyseniz uygulamanın simgesinin beyaz 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.

Android'de beyaz daire içinde PWA simgeleri
Android'de şeffaf PWA simgeleri beyaz daireler içinde görünür.

Maskelenebilir simgeler, Progresif Web Uygulamanızın uyarlanabilir simgeler kullanmasına olanak tanıyan ve simgenizin görünümü üzerinde daha fazla kontrol sahibi olmanızı sağlayan Chrome ve Firefox için yeni bir simge biçimidir.

Android'de dairenin tamamını kaplayan PWA simgeleri
Maskelenebilir simgeler ise dairenin tamamını kaplar.

Mevcut simgelerimiz hazır mı?

Maskelenebilir simgelerin çeşitli şekilleri desteklemesi gerektiğinden, tarayıcı veya platform için gerekli şekil ve boyuta göre kırpabileceği, biraz dolgu içeren opak bir resim sağlamanız gerekir.

Platforma özgü farklı simge şekilleri.

Maskelenebilir simge spesifikasyonu, tüm platformların uyduğu standartlaştırılmış bir "minimum güvenli bölge" içerir. Simgenizin önemli kısımları (ör. logonuz), simgenin ortasındaki dairesel bir alan içinde yer almalıdır. Yarıçapı simge genişliğinin% 40'ına eşit olmalıdır. Dıştaki %10 kenar bazı platformlarda kırpılabilir.

Simgelerinizin hangi bölümlerinin güvenli bölgede olduğunu Chrome Geliştirici Araçları'nı kullanarak 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 asgari güvenli alanı göster'i seçebilirsiniz. Bu işlem, simgelerinizi yalnızca güvenli alanın görünür olacağı şekilde kırpar. Logonuz bu güvenli alanda görünüyorsa simgeniz hazırdır.

Kenarları kırpılmış PWA simgelerini gösteren DevTools'daki Uygulamalar paneli
Kırpılmış PWA simgelerini gösteren Uygulamalar paneli.

Maskelenebilir simgenizi çeşitli Android şekilleriyle test etmek için Tiger Oakes'in Maskable.app uygulamasını kullanın. Bir simgeyi 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 kullanabilirim?

Mevcut bir simgeyi temel alan maskelenebilir bir simge oluşturmak için Maskable.app Düzenleyici'yi kullanabilirsiniz. Simgenizi yükleyin, rengi ve boyutu ayarlayın, ardından resmi dışa aktarın.

Maskable.app Düzenleyici ekran görüntüsü
Maskable.app Düzenleyici'de simge oluşturma.

Maskelenebilir bir simge oluşturup DevTools'ta test ettikten sonra web uygulaması manifestinizi yeni öğeyi işaret edecek şekilde güncellemeniz gerekir. Web uygulaması manifest'i, web uygulamanızla ilgili bilgileri JSON dosyası biçiminde sağlar ve bir icons dizisi içerir.

purpose alanı, tarayıcıya simgenizin nasıl kullanılacağını bildirir. Simgelerin varsayılan amacı "any"'tür. Android'de bu simgeler beyaz arka planda 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 simge maskeleriyle kullanılması gerektiğini belirtmek amacıyla 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 maskesiz kullanılmasını istiyorsanız boşlukla ayrılmış birden fazla amaç da belirtebilirsiniz (örneğin, "any maskable").

Teşekkür ederiz

Bu sayfa Joe Medley tarafından incelendi.