Dukungan ikon adaptif di PWA dengan ikon yang dapat disamarkan

Thomas Steiner
Tiger Oakes

Jika Anda menginstal Progressive Web App (PWA) di ponsel Android terbaru, mungkin memperhatikan bahwa ikon aplikasi memiliki latar belakang putih. Android 8.0 diperkenalkan ikon adaptif, yang menampilkan ikon aplikasi dalam berbagai bentuk di seluruh perangkat jaringan. Ikon yang tidak menggunakan format ini memiliki latar belakang putih.

Ikon PWA dalam lingkaran putih di Android
Ikon PWA transparan muncul di dalam lingkaran putih di Android.

Ikon yang dapat disamarkan adalah format ikon baru untuk Chrome dan Firefox yang memungkinkan Progressive Web App menggunakan ikon adaptif dan memberi Anda lebih banyak kontrol tampilan ikon.

Ikon PWA yang mencakup seluruh lingkaran di Android
Ikon yang dapat disamarkan menutupi seluruh lingkaran.

Apakah ikon saya saat ini sudah siap?

Karena ikon yang dapat disamarkan harus mendukung berbagai bentuk, Anda harus menyediakan gambar buram dengan beberapa padding yang dapat dipangkas oleh browser sesuai kebutuhan bentuk dan ukuran untuk semua {i>browser<i} atau platform.

Bentuk ikon khusus platform yang berbeda.

Spesifikasi ikon maskable mencakup standar standar "zona aman minimum" yang dihormati semua platform. Bagian penting dari ikon, seperti logo, harus berada dalam area lingkaran di tengah ikon dengan radius yang sama dengan 40% dari lebar ikon. Tepi 10% bagian luar mungkin berupa terpangkas di beberapa platform.

Anda dapat memeriksa bagian ikon mana yang berada dalam zona aman menggunakan Chrome DevTools. Dengan Progressive Web App terbuka, luncurkan DevTools dan buka panel Application. Di bagian Ikon, Anda dapat memilih untuk Hanya tampilkan area aman minimum untuk ikon yang dapat disamarkan. Ini memangkas ikon Anda sehingga hanya area aman yang terlihat. Jika logo Anda terlihat di dalam area aman ini, ikon Anda sudah siap.

Panel aplikasi di DevTools yang menampilkan ikon PWA dengan tepi yang dipangkas
Panel Aplikasi, yang menampilkan ikon PWA yang dipangkas.

Untuk menguji ikon yang dapat disamarkan dengan berbagai bentuk Android, gunakan Tiger Oakes' Maskable.app. Buka ikon, dan Maskable.app memungkinkan Anda coba berbagai bentuk dan ukuran dan bagikan pratinjau dengan tim Anda.

Bagaimana cara menggunakan ikon yang dapat disamarkan?

Untuk membuat ikon maskable berdasarkan ikon yang ada, Anda dapat menggunakan Editor Maskable.app. Upload ikon Anda, sesuaikan warna dan ukuran, lalu ekspor gambar.

Screenshot Maskable.app Editor
Membuat ikon di Editor Maskable.app.

Setelah membuat ikon maskable dan mengujinya di DevTools, Anda perlu memperbarui manifes aplikasi web Anda agar mengarah ke aset baru. Tujuan manifes aplikasi web menyediakan informasi tentang aplikasi web Anda dalam file JSON, dan menyertakan array icons.

Kolom purpose memberi tahu browser cara menggunakan ikon Anda. Secara {i>default<i}, ikon memiliki tujuan "any". Di Android, ikon-ikon ini diubah ukurannya dengan warna putih latar belakang.

{
  …
  "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"`
    },
    …
  ],
  …
}

Untuk membuat ikon dapat disamarkan, setel nilai purpose-nya ke "maskable" untuk menunjukkan bahwa ini harus digunakan dengan {i>ikon mask<i}. Cara ini akan menghilangkan latar belakang putih dan memberi Anda lebih banyak kontrol atas tampilan ikon. Anda juga dapat menentukan tujuan yang dipisahkan spasi (misalnya, "any maskable") jika Anda menginginkan ikon maskable untuk digunakan tanpa mask di perangkat lain.

Ucapan terima kasih

Halaman ini telah ditinjau oleh Joe Medley.