App Badging API memungkinkan aplikasi web terinstal menetapkan badge di seluruh aplikasi pada ikon aplikasi.
Apa itu App Badging API?
App Badging API memungkinkan aplikasi web terinstal menetapkan badge di seluruh aplikasi, yang ditampilkan di tempat spesifik per sistem operasi yang terkait dengan aplikasi (seperti rak atau layar utama).
Badge memudahkan pengguna secara halus memberi tahu pengguna bahwa ada aktivitas baru yang mungkin memerlukan 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:
- Aplikasi chat, email, dan sosial untuk menandakan bahwa ada pesan baru yang masuk, atau untuk menampilkan jumlah item yang belum dibaca.
- Aplikasi produktivitas, untuk menandakan bahwa tugas latar belakang yang berjalan lama (seperti merender gambar atau video) telah selesai.
- Game, untuk menandakan bahwa pemain diperlukan tindakan (misalnya, dalam Catur, saat giliran pemain).
Dukungan
App Badging API berfungsi di Windows dan macOS, di Chrome 81 serta Edge 81 atau yang lebih baru. Dukungan untuk ChromeOS sedang dalam pengembangan dan akan tersedia dalam rilis mendatang. Pada Android, Badging API tidak didukung. Sebagai gantinya, Android secara otomatis menampilkan badge di ikon aplikasi untuk aplikasi web yang terinstal saat ada notifikasi yang belum dibaca, seperti pada aplikasi Android.
Coba
- Buka demo App Badging API.
- Saat diminta, klik Instal untuk menginstal aplikasi, atau gunakan menu Chrome untuk menginstalnya.
- Buka sebagai PWA yang diinstal. Perhatikan bahwa aplikasi ini harus berjalan sebagai PWA yang diinstal (di taskbar atau dok Anda).
- Klik tombol Setel atau Hapus untuk menetapkan atau menghapus badge dari ikon aplikasi. 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.
Badge API terdiri dari dua metode di navigator
:
setAppBadge(
number
)
: Menetapkan badge aplikasi. Jika nilai diberikan, setel badge ke nilai yang disediakan jika tidak, tampilkan titik putih biasa (atau tanda lain yang sesuai untuk platform). Menyetelnumber
ke0
sama dengan memanggilclearAppBadge()
.clearAppBadge()
: Menghapus badge aplikasi.
Keduanya menampilkan promise kosong yang dapat Anda gunakan untuk penanganan error.
Badge dapat ditetapkan dari halaman saat ini atau dari pekerja layanan terdaftar. Untuk menetapkan atau menghapus badge (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.
});
Dalam beberapa kasus, sistem operasi mungkin tidak mengizinkan representasi badge yang tepat. Dalam kasus seperti itu, browser akan mencoba memberikan representasi terbaik untuk perangkat tersebut. Misalnya, karena Badging API tidak didukung di Android, Android hanya akan menampilkan titik, bukan nilai numerik.
Jangan berasumsi apa pun tentang cara agen pengguna menampilkan badge.
Beberapa agen pengguna mungkin menggunakan angka seperti "4000" dan menulisnya ulang sebagai
"99+". Jika Anda sendiri yang menjenuhkan badge (misalnya, dengan menyetelnya ke "99"), tanda "+" tidak akan muncul. Berapa pun nomor sebenarnya, cukup panggil
setAppBadge(unreadCount)
dan biarkan agen pengguna menangani
menampilkannya sebagaimana mestinya.
Meskipun App Badging API di Chrome memerlukan aplikasi terinstal, Anda tidak boleh melakukan panggilan ke Badging API bergantung pada status penginstalan. Cukup panggil API saat ada, karena browser lain mungkin menampilkan badge di tempat lain. Jika berhasil, maka akan berhasil. Jika tidak, tidak demikian.
Menetapkan dan membersihkan badge di latar belakang dari pekerja layanan
Anda juga dapat menyetel badge aplikasi di latar belakang menggunakan pekerja layanan. Lakukan hal ini melalui sinkronisasi latar belakang berkala, Push API, atau kombinasi keduanya.
Sinkronisasi berkala latar belakang
Sinkronisasi latar belakang berkala memungkinkan pekerja layanan
melakukan polling pada server secara berkala, yang dapat digunakan untuk mendapatkan status terbaru,
dan memanggil navigator.setAppBadge()
.
Namun, frekuensi pemanggilan sinkronisasi tidak sepenuhnya dapat diandalkan, dan dipanggil sesuai pertimbangan browser.
API Web Push
Push API memungkinkan server mengirim pesan ke pekerja layanan, yang dapat menjalankan kode JavaScript meskipun tidak ada halaman latar depan yang berjalan. Dengan demikian,
push server dapat memperbarui badge dengan memanggil navigator.setAppBadge()
.
Namun, sebagian besar browser, termasuk Chrome, mengharuskan notifikasi ditampilkan setiap kali pesan push diterima. Hal ini tidak menjadi masalah untuk beberapa kasus penggunaan (misalnya menampilkan notifikasi saat memperbarui badge), tetapi tidak mungkin untuk secara halus memperbarui badge tanpa menampilkan notifikasi.
Selain itu, pengguna harus memberikan izin notifikasi situs Anda untuk menerima pesan push.
Kombinasi keduanya
Meskipun tidak sempurna, penggunaan Push API dan sinkronisasi latar belakang berkala secara bersamaan memberikan solusi yang baik. Informasi berprioritas tinggi dikirimkan melalui Push API, yang menampilkan notifikasi dan memperbarui badge. Selain itu, informasi berprioritas lebih rendah akan dikirimkan dengan memperbarui badge, baik saat halaman dibuka maupun 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 apakah ada metode atau properti yang hilang yang Anda butuhkan untuk menerapkan ide Anda? Apakah Anda memiliki pertanyaan atau komentar tentang model keamanan ini?
- Laporkan masalah spesifikasi di repo GitHub Badging API, atau tambahkan ide Anda ke masalah yang sudah ada.
Melaporkan masalah terkait penerapan
Apakah Anda menemukan bug pada implementasi Chrome? Atau apakah implementasinya berbeda dengan spesifikasi?
- Laporkan bug di https://new.crbug.com. Pastikan Anda menyertakan detail
sebanyak mungkin, petunjuk sederhana untuk mereproduksi, dan setel Komponen ke
UI>Browser>WebAppInstalls
. Glitch sangat cocok untuk membagikan reproduksi yang cepat dan mudah.
Menunjukkan dukungan untuk API
Berencana menggunakan App Badging API di situs Anda? Dukungan publik Anda membantu tim Chrome untuk memprioritaskan fitur, dan menunjukkan kepada vendor browser lain betapa pentingnya mendukung fitur tersebut.
- Kirim tweet ke @ChromiumDev menggunakan hashtag
#BadgingAPI
dan beri tahu kami di mana dan bagaimana Anda menggunakannya.
Link bermanfaat
- Penjelasan untuk umum
- Draf spesifikasi
- Demo Badging API | Sumber Demo API Badging
- Bug pelacakan
- Entri ChromeStatus.com
- Komponen Blink:
UI>Browser>WebAppInstalls
Foto utama oleh Prateek Katyal di Unsplash