PWA'larda maskelenebilir simgelerle uyarlanabilir simge desteği

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.

Android'de beyaz dairelerin içindeki PWA simgeleri
Android'de şeffaf PWA simgeleri beyaz dairelerin içinde görünüyor.

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.

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

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.

Platforma özel farklı simge şekilleri.

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.

Geliştirici Araçları'nda, kenarları kırpılmış PWA simgelerinin gösterildiği uygulamalar paneli
Kırpılmış PWA simgelerinin gösterildiği Uygulamalar paneli

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.

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

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.