Manifest dosyasında maskelenebilir simge yok

Maskelenebilir simgeler, PWA simgenizin görünmesini sağlayan yeni bir simge biçimidir tüm Android cihazlarda mükemmeldir. Yeni Android cihazlarda, artık uyumlu olmayan PWA simgeleri maskelenebilir simge biçiminde beyaz bir arka plan verilir. Maskelenebilir simgenin, Android'in bunun için sağladığı alanın tamamını kaplamasını sağlar.

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

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ı manifesti bulunmalıdır.
  • Web uygulaması manifest'inde icons dizisi olmalıdır.
  • icons dizisi, purpose özelliği olan bir nesne içermelidir. purpose özelliğinin değeri maskable içermelidir.
ziyaret edin.

PWA'nıza maskelenebilir simge desteği ekleme

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

  2. purpose özelliğini, web uygulaması manifestinizdeki icons nesneden 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ı? bölümünü inceleyin.

Kaynaklar