Ikon aplikasi yang dapat beradaptasi dengan platform.
Apa itu ikon yang dapat disamarkan?
Jika menginstal Progressive Web App di ponsel Android terbaru, Anda mungkin melihat ikon muncul dengan latar belakang putih. Android Oreo memperkenalkan ikon adaptif, yang menampilkan ikon aplikasi dalam berbagai bentuk pada berbagai model perangkat. Ikon yang tidak mengikuti format baru ini diberi latar belakang putih.
Ikon Maskable adalah format ikon baru yang memberi Anda lebih banyak kontrol dan memungkinkan Progressive Web App Anda menggunakan ikon adaptif. Jika Anda menyediakan ikon maskable, ikon Anda dapat mengisi seluruh bentuk dan terlihat bagus di semua perangkat Android. Firefox dan Chrome baru-baru ini menambahkan dukungan untuk format baru ini, dan Anda dapat menerapkannya di aplikasi.
Apakah ikon saya saat ini sudah siap?
Karena ikon yang dapat disamarkan perlu mendukung berbagai bentuk, Anda menyediakan gambar buram dengan beberapa padding yang dapat dipangkas oleh browser sesuai bentuk dan ukuran yang diperlukan. Sebaiknya jangan mengandalkan bentuk tertentu, karena bentuk akhir bervariasi sesuai browser dan platform.
Untungnya, ada "zona aman minimum" yang didefinisikan dan distandarkan dengan baik yang dipatuhi oleh semua platform. Bagian penting ikon, seperti logo, harus berada dalam area lingkaran di tengah ikon dengan radius yang sama dengan 40% lebar ikon. Tepi luar 10% mungkin akan dipangkas.
Anda dapat memeriksa bagian mana dari ikon Anda yang berada dalam zona aman dengan Chrome DevTools. Saat Progressive Web App terbuka, luncurkan DevTools dan buka panel Application. Di bagian Icons, Anda dapat memilih Show only the area aman area untuk ikon yang dapat disamarkan. Ikon Anda akan dipangkas sehingga hanya area aman yang terlihat. Jika logo Anda terlihat di dalam area aman ini, Anda sudah siap.
Untuk menguji ikon maskable dengan berbagai bentuk Android, gunakan alat Maskable.app yang dibuat Tiger. Buka ikon, lalu Maskable.app akan memungkinkan Anda mencoba berbagai bentuk dan ukuran, dan Anda dapat membagikan pratinjau kepada orang lain di tim Anda.
Bagaimana cara menggunakan ikon maskable?
Jika ingin membuat ikon maskable berdasarkan ikon yang ada, Anda dapat menggunakan Maskable.app Editor. Unggah ikon, sesuaikan warna dan ukuran, lalu ekspor gambar.
Setelah membuat ikon maskable dan mengujinya di DevTools, Anda harus 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.
Untuk penyertaan ikon yang dapat disamarkan, kolom purpose akan memberi tahu browser cara ikon Anda
harus digunakan. Secara default, ikon akan memiliki tujuan "any". Ikon ini akan
diubah ukurannya di atas latar belakang putih di Android.
{
…
"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"`
},
…
],
…
}
Ikon yang dapat disamarkan harus menggunakan nilai yang berbeda untuk purpose: "maskable". Hal ini menunjukkan
bahwa gambar dimaksudkan untuk digunakan dengan mask ikon, sehingga Anda dapat lebih mengontrol hasilnya.
Dengan demikian, ikon Anda tidak akan memiliki latar belakang putih. Anda juga dapat menentukan beberapa
tujuan yang dipisahkan spasi (misalnya, "any maskable"), jika ingin ikon yang dapat disamarkan
digunakan tanpa mask di perangkat lain.
Dengan ini, Anda dapat membuat ikon yang dapat disamarkan, memastikan aplikasi Anda terlihat bagus dari tepi ke tepi (dan sesuai dengan manfaatnya, lingkaran-ke-lingkaran, oval-ke-oval ).
Ucapan terima kasih
Artikel ini ditinjau oleh Joe Medley.