Manifes tidak memiliki ikon maskable

Ikon Maskable adalah format ikon baru yang memastikan bahwa ikon PWA Anda terlihat bagus di semua perangkat Android. Di perangkat Android yang lebih baru, ikon PWA yang tidak mengikuti format ikon maskable diberi latar belakang putih. Saat Anda menggunakan , ini memastikan bahwa ikon memenuhi semua ruang yang disediakan Android untuknya.

Bagaimana audit ikon maskable Lighthouse gagal

Mercusuar menandai halaman yang tidak memiliki dukungan ikon maskable:

Audit ikon maskable di UI Laporan Lighthouse.

Agar lulus audit:

  • Manifes aplikasi web harus ada.
  • Manifes aplikasi web harus memiliki array icons.
  • Array icons harus berisi satu objek dengan properti purpose, dan nilai properti purpose tersebut harus menyertakan maskable.

Cara menambahkan dukungan ikon maskable ke PWA Anda

  1. Gunakan Maskable.app Editor untuk mengonversi ikon yang ada menjadi ikon maskable.

  2. Tambahkan properti purpose ke salah satu objek icons di manifes aplikasi web Anda. Setel nilai purpose ke maskable. Lihat Nilai.

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

  3. Gunakan Chrome DevTools untuk memverifikasi bahwa ikon yang dapat disamarkan ditampilkan dengan benar. Lihat Apakah ikon saya saat ini sudah siap?

Resource