Manifest dosyasında maskelenebilir simge yok

Maskelenebilir simgeler, PWA simgenizin tüm Android cihazlarda mükemmel görünmesini sağlayan yeni bir simge biçimidir. Daha yeni Android cihazlarda, maskelenebilir simge biçimine uymayan PWA simgelerine beyaz arka plan eklenir. Maskelenebilir simge kullandığınızda, simge, Android'in kendisine sağladığı tüm alanı kaplamasını sağlar.

Lighthouse maskelenebilir simge denetiminin başarısız olma şekli

Lighthouse, maskelenebilir simge desteği olmayan sayfaları işaretler:

Lighthouse Raporu kullanıcı arayüzündeki maskelenebilir simge denetimi.

Denetimden geçebilmek için:

  • Bir web uygulaması manifest dosyası bulunmalıdır.
  • Web uygulaması manifest dosyası bir icons dizisi içermelidir.
  • icons dizisi, purpose özelliğine sahip bir nesne içermelidir ve bu purpose özelliğinin değeri maskable içermelidir.

PWA'nıza maskelenebilir simge desteği ekleme

  1. Mevcut bir simgeyi maskelenebilir bir simgeye dönüştürmek için Maskable.app Editor'ı kullanın.

  2. purpose özelliğini web uygulaması manifestinizdeki icons nesnelerinden birine ekleyin. purpose değerini maskable olarak ayarlayın. Değerler bölümünü inceleyin.

    {
  …
  "icons": [
    …
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
  …
}

  3. Maskelenebilir simgenin düzgün şekilde gösterildiğini doğrulamak için Chrome Geliştirici Araçları'nı kullanın. Mevcut simgelerim hazır mı? başlıklı makaleye göz atın.

Kaynaklar