Ikon Maskable adalah format ikon baru yang memastikan ikon PWA Anda terlihat bagus di semua perangkat Android. Pada perangkat Android yang lebih baru, ikon PWA yang tidak mengikuti format ikon maskable diberi latar belakang putih. Saat Anda menggunakan ikon maskable, ikon tersebut akan menggunakan semua ruang yang disediakan Android untuknya.
Bagaimana audit ikon maskable Lighthouse gagal
Lighthouse menandai halaman yang tidak memiliki dukungan ikon yang dapat disamarkan:
![Audit ikon maskable di UI Laporan Lighthouse.](https://developer.chrome.google.cn/static/docs/lighthouse/pwa/maskable-icon-audit/image/the-maskable-icon-audit-841c7d6b5f214.jpg?hl=id)
Agar lulus audit:
- Manifes aplikasi web harus ada.
- Manifes aplikasi web harus memiliki array
icons
. - Array
icons
harus berisi satu objek dengan propertipurpose
, dan nilai propertipurpose
tersebut harus menyertakanmaskable
.
Cara menambahkan dukungan ikon yang dapat disamarkan ke PWA
- Gunakan Maskable.app Editor untuk mengonversi ikon yang ada menjadi ikon maskable.
Tambahkan properti
purpose
ke salah satu objekicons
di manifes aplikasi web Anda. Tetapkan nilaipurpose
kemaskable
. Lihat Nilai.{ … "icons": [ … { "src": "path/to/maskable_icon.png", "sizes": "196x196", "type": "image/png", "purpose": "maskable" } ] … }
Gunakan Chrome DevTools untuk memverifikasi bahwa ikon maskable ditampilkan dengan benar. Lihat Apakah ikon saya saat ini sudah siap?