Badge untuk ikon aplikasi

App Badging API memungkinkan aplikasi web terinstal menyetel badge di seluruh aplikasi pada ikon aplikasi.

Pete LePage

Apa itu App Badging API?

Contoh Twitter dengan delapan notifikasi dan aplikasi lainnya menampilkan badge jenis bendera.
Contoh Twitter dengan delapan notifikasi dan aplikasi lain menampilkan bendera badge jenis ini.

App Badging API memungkinkan aplikasi web terinstal menyetel badge di seluruh aplikasi, yang ditampilkan di tempat khusus sistem operasi yang terkait dengan aplikasi (seperti rak atau layar utama).

Badge memudahkan Anda memberi tahu pengguna secara halus bahwa ada aktivitas baru yang mungkin membutuhkan perhatian mereka, atau untuk menunjukkan sejumlah kecil informasi, seperti jumlah yang belum dibaca.

Badge cenderung lebih mudah digunakan daripada notifikasi, dan dapat diperbarui dengan frekuensi yang jauh lebih tinggi, karena tidak mengganggu pengguna. Dan, karena tidak mengganggu pengguna, mereka tidak memerlukan izin pengguna.

Kemungkinan kasus penggunaan

Contoh aplikasi yang mungkin menggunakan API ini antara lain:

  • Chat, email, dan aplikasi sosial, untuk menunjukkan bahwa ada pesan baru yang masuk, atau menunjukkan jumlah item yang belum dibaca.
  • Aplikasi produktivitas, untuk menandakan bahwa tugas latar belakang yang berjalan lama (seperti rendering gambar atau video) selesai.
  • Game, untuk menandakan bahwa pemain memerlukan tindakan (misalnya, dalam Catur, jika adalah giliran pemain).

Dukungan

App Badging API berfungsi di Windows dan macOS, di Chrome 81 dan Edge 81 atau yang lebih baru. Dukungan untuk ChromeOS sedang dalam pengembangan dan akan tersedia pada masa mendatang data. Di Android, Badging API tidak didukung. Sebagai gantinya, Android otomatis menampilkan badge di ikon aplikasi untuk aplikasi web yang diinstal saat ada notifikasi yang belum dibaca, seperti halnya aplikasi Android.

Coba

  1. Buka Demo App Badging API.
  2. Saat diminta, klik Instal untuk menginstal aplikasi, atau gunakan Chrome untuk menginstalnya.
  3. Buka sebagai PWA yang diinstal. Perlu diperhatikan bahwa aplikasi harus berjalan sebagai PWA terinstal (di taskbar atau dok).
  4. Klik tombol Setel atau Hapus untuk menyetel atau menghapus badge dari aplikasi ikon. Anda juga dapat memberikan angka untuk Nilai badge.

Cara menggunakan App Badging API

Untuk menggunakan App Badging API, aplikasi web Anda harus memenuhi Kriteria kemampuan penginstalan Chrome, dan pengguna harus menambahkannya ke layar utama mereka.

Badge API terdiri dari dua metode di navigator:

  • setAppBadge(number): Menetapkan badge aplikasi. Jika nilai tersedia, setel atribut ke nilai yang diberikan, tampilkan titik putih polos (atau flag yang sesuai untuk platform). Menyetel number ke 0 sama dengan memanggil clearAppBadge().
  • clearAppBadge(): Menghapus badge aplikasi.

Keduanya menampilkan promise kosong yang dapat Anda gunakan untuk penanganan error.

Badge dapat disetel dari halaman saat ini atau dari halaman yang terdaftar pekerja layanan. Untuk menetapkan atau menghapus badge (baik di halaman latar depan atau pekerja layanan), panggil:

// Set the badge
const unreadCount = 24;
navigator.setAppBadge(unreadCount).catch((error) => {
  //Do something with the error.
});

// Clear the badge
navigator.clearAppBadge().catch((error) => {
  // Do something with the error.
});

Pada beberapa kasus, sistem operasi mungkin tidak mengizinkan representasi badge yang sebenarnya. Dalam kasus tersebut, browser akan berupaya memberikan representasi terbaik untuk perangkat tersebut. Misalnya, karena Badging API tidak didukung di Android, Android hanya menampilkan titik, bukan nilai numerik.

Jangan berasumsi apa pun tentang cara agen pengguna menampilkan badge. Beberapa agen pengguna mungkin menggunakan nomor seperti "4000" dan menulisnya ulang sebagai "99+". Jika Anda menyesuaikan badge sendiri (misalnya dengan menyetelnya ke "99") lalu "+" tidak akan muncul. Tidak peduli nomor sebenarnya, hubungi saja setAppBadge(unreadCount) dan biarkan agen pengguna menangani menampilkannya secara sesuai.

Meskipun App Badging API di Chrome memerlukan aplikasi terinstal, Anda tidak perlu melakukan panggilan ke Badging API yang bergantung pada status penginstalan. Cukup panggil API jika ada, karena browser lain mungkin menampilkan badge di tempat lain. Jika berhasil, maka akan berfungsi. Jika tidak, maka tidak.

Menyetel dan menghapus badge di latar belakang dari pekerja layanan

Anda juga dapat menyetel badge aplikasi di latar belakang menggunakan pekerja layanan. Lakukan dengan sinkronisasi latar belakang berkala, Push API, atau kombinasi keduanya.

Sinkronisasi berkala latar belakang

Sinkronisasi berkala di latar belakang memungkinkan pekerja layanan untuk memeriksa server secara berkala, yang dapat digunakan untuk mendapatkan status terbaru, dan panggil navigator.setAppBadge().

Namun, frekuensi di mana sinkronisasi dipanggil tidak sepenuhnya dapat diandalkan, dan disebut sesuai diskresi browser.

API Web Push

Push API memungkinkan server mengirim pesan ke pekerja layanan, yang dapat menjalankan kode JavaScript bahkan ketika tidak ada halaman latar depan yang berjalan. Dengan demikian, push server dapat memperbarui badge dengan memanggil navigator.setAppBadge().

Namun, sebagian besar browser, termasuk Chrome, memerlukan notifikasi untuk yang ditampilkan setiap kali pesan push diterima. Tidak apa-apa untuk penggunaan tertentu kasus (misalnya menampilkan notifikasi saat mengupdate lencana), tetapi tidak mungkin memperbarui lencana secara halus tanpa menampilkan notifikasi.

Selain itu, pengguna harus memberikan izin notifikasi situs Anda untuk menerima pesan push.

Kombinasi keduanya

Meski tidak sempurna, penggunaan Push API dan sinkronisasi latar belakang berkala secara bersamaan menghasilkan solusi yang baik. Informasi prioritas tinggi dikirim melalui Push API, yang menampilkan notifikasi dan memperbarui badge. Dan prioritas yang lebih rendah informasi dikirim dengan memperbarui lencana, baik saat halaman terbuka, atau melalui sinkronisasi latar belakang berkala.

Masukan

Tim Chrome ingin mengetahui pengalaman Anda saat menggunakan App Badging API.

Beri tahu kami tentang desain API

Apakah ada sesuatu di API yang tidak berfungsi seperti yang Anda harapkan? Atau ada metode atau properti yang hilang yang diperlukan untuk menerapkan ide Anda? Apakah Anda memiliki pertanyaan atau komentar mengenai model keamanan?

Laporkan masalah terkait penerapan

Apakah Anda menemukan bug pada implementasi Chrome? Ataukah implementasi berbeda dengan spesifikasi?

  • Laporkan bug di https://new.crbug.com. Pastikan untuk menyertakan detail sebanyak Anda bisa, petunjuk sederhana untuk mereproduksi, dan mengatur Komponen untuk UI>Browser>WebAppInstalls. Glitch sangat cocok untuk berbagi reproduksi dengan cepat dan mudah.

Menunjukkan dukungan untuk API

Berencana menggunakan App Badging API di situs Anda? Dukungan publik Anda membantu Tim Chrome memprioritaskan fitur, dan menunjukkan kepada vendor browser lainnya betapa pentingnya adalah untuk mendukung mereka.

  • Kirim tweet ke @ChromiumDev menggunakan hashtag #BadgingAPI dan beri tahu kami tempat serta cara Anda menggunakannya.

Link bermanfaat

Banner besar foto oleh Prateek Katyal aktif Buka Percikan