Manifest dosyasında maskelenebilir simge yok

Maskelenebilen simgeler, PWA simgesinin tüm Android cihazlarda harika görünmesini sağlayan yeni bir simge biçimidir. Yeni Android cihazlarda, maskelenebilir simge biçimini kullanmayan PWA simgelerine beyaz arka plan verilir. Maskelenebilir simge kullandığınızda simge, Android'in sağladığı tüm alanı kaplar.

Lighthouse maskelenebilir simge denetimi neden başarısız olur?

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

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

Denetime geçebilmek için:

  • Bir web uygulaması manifesti bulunmalıdır.
  • Web uygulaması manifestinde bir icons dizisi olmalıdır.
  • 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 mülkünü web uygulaması manifest dosyanızdaki icons nesnelerinden birine ekleyin. purpose değerini maskable olarak ayarlayın. Değerler bölümüne bakın.

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

  3. Maskelenebilir simgesinin doğru şekilde gösterildiğini doğrulamak için Chrome Geliştirici Araçları'nı kullanın. Mevcut simgelerimiz hazır mı? başlıklı makaleyi inceleyin.

Kaynaklar