Jika telah menginstal Progressive Web App (PWA) di ponsel Android terbaru, Anda mungkin melihat ikon aplikasi memiliki latar belakang berwarna putih. Android 8.0 memperkenalkan ikon adaptif yang menampilkan ikon aplikasi dalam berbagai bentuk pada semua model perangkat. Ikon yang tidak menggunakan format ini memiliki latar belakang putih.
![Ikon PWA dalam lingkaran putih di Android](https://web.dev/static/articles/maskable-icon/image/pwa-icons-white-circles-7fce0dc6ce82f.png?authuser=7&hl=id)
Ikon Maskable adalah format ikon baru untuk Chrome dan Firefox yang memungkinkan Progressive Web App menggunakan ikon adaptif dan memberi Anda lebih banyak kontrol atas tampilan ikon.
![Ikon PWA yang menutupi seluruh lingkaran di Android](https://web.dev/static/articles/maskable-icon/image/pwa-icons-covering-entir-011491639007f.png?authuser=7&hl=id)
Apakah ikon saya saat ini sudah siap?
Karena ikon yang dapat disamarkan perlu mendukung berbagai bentuk, Anda harus menyediakan gambar buram dengan beberapa padding yang dapat dipangkas oleh browser sesuai dengan bentuk dan ukuran yang diperlukan untuk browser atau platform apa pun.
Spesifikasi ikon maskable mencakup "zona aman minimum" standar yang dipatuhi oleh semua platform. Bagian penting ikon, seperti logo, harus berada dalam area lingkaran di tengah ikon dengan radius yang sama dengan 40% dari lebar ikon. Tepi luar 10% mungkin terpangkas pada beberapa platform.
Anda dapat memeriksa bagian ikon mana yang berada dalam zona aman menggunakan Chrome DevTools. Saat Progressive Web App terbuka, luncurkan DevTools dan buka panel Application. Di bagian Icons, Anda dapat memilih Show only the area aman minimum untuk ikon maskable. Ini akan memangkas ikon Anda sehingga hanya area aman yang terlihat. Jika logo Anda terlihat di dalam area aman ini, berarti ikon Anda sudah siap.
![Panel aplikasi di DevTools menampilkan ikon PWA dengan tepi yang dipangkas](https://web.dev/static/articles/maskable-icon/image/applications-panel-devto-a75aad0ea167e.png?authuser=7&hl=id)
Untuk menguji ikon yang dapat disamarkan dengan berbagai bentuk Android, gunakan Maskable.app milik Tiger Oakes. Buka ikon, dan Maskable.app akan memungkinkan Anda mencoba berbagai bentuk dan ukuran serta membagikan pratinjau kepada tim.
Bagaimana cara menggunakan ikon maskable?
Untuk membuat ikon maskable berdasarkan ikon yang ada, Anda dapat menggunakan Maskable.app Editor. Upload ikon Anda, sesuaikan warna dan ukuran, lalu ekspor gambar tersebut.
![Screenshot Maskable.app Editor](https://web.dev/static/articles/maskable-icon/image/maskableapp-editor-scree-fdc82299dbabb.png?authuser=7&hl=id)
Setelah membuat ikon maskable dan mengujinya di DevTools, Anda perlu memperbarui
manifes aplikasi web agar mengarah ke aset baru. Manifes
aplikasi web memberikan informasi tentang aplikasi web Anda dalam file JSON, dan
menyertakan array icons
.
Kolom purpose
memberi tahu browser bagaimana ikon Anda harus digunakan. Secara default,
ikon memiliki tujuan "any"
. Di Android, ukuran ikon ini diubah pada latar belakang
putih.
{
…
"icons": [
…
{
"src": "path/to/regular_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "any"
},
{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "maskable" // <-- New property value `"maskable"`
},
…
],
…
}
Agar ikon dapat disamarkan, tetapkan nilai purpose
-nya ke "maskable"
untuk menunjukkan bahwa ikon tersebut harus digunakan dengan mask ikon. Tindakan ini akan menghapus latar belakang putih dan
memberi Anda lebih banyak kontrol atas tampilan ikon. Anda juga dapat menentukan beberapa
tujuan yang dipisahkan spasi (misalnya, "any maskable"
) jika ingin
ikon maskable Anda digunakan tanpa mask di perangkat lain.
Ucapan terima kasih
Halaman ini ditinjau oleh Joe Medley.