Pertanyaan dan cakupan
PWA yang terinstal harus menampilkan jumlah pesan yang belum dibaca pada ikon aplikasinya. Jelaskan deteksi kapabilitas, alur pembaruan dan penghapusan untuk Badging API, serta fallback ketika browser tidak mendukungnya atau pemanggilan gagal.
Yang dievaluasi oleh pewawancara
- Mengetahui bahwa
navigator.setAppBadge()danclearAppBadge()memerlukan konteks aman (secure context) yang didukung. - Membedakan kapabilitas
WorkerNavigatorpada halaman dan Service Worker serta menangani kegagalan Promise. - Memperlakukan API sebagai petunjuk presentasi dan bukan sebagai sumber kebenaran (source of truth) untuk data yang belum dibaca.
- Menyediakan fallback yang dapat dipersepsikan seperti judul, jumlah dalam aplikasi, dan teks status yang aksesibel sambil membatasi frekuensi pembaruan (throttling).
Pertanyaan klarifikasi
- Apakah targetnya adalah ikon PWA yang terinstal atau tab browser biasa?
- Apa yang menjadi otoritas untuk jumlah belum dibaca, dan bagaimana refresh serta beberapa tab tetap konsisten?
- Apakah pembaruan offline, push latar belakang, dan kombinasi browser/OS tertentu diperlukan?
- Bagaimana pengguna pembaca layar (screen reader) menerima status yang sama, dan apakah jumlah harus dibatasi nilainya atau disamarkan?
Kerangka jawaban 30 detik
Saya akan memperlakukan lencana sebagai lapisan presentasi opsional. Dalam HTTPS, deteksi navigator.setAppBadge, perbarui dari jumlah belum dibaca yang telah disinkronkan, periksa kegagalan Promise, dan panggil clearAppBadge saat bernilai nol. Jika tidak didukung atau gagal, pertahankan jumlah dalam aplikasi, indikator judul atau favicon, serta teks status yang aksesibel. Halaman dan Service Worker berbagi satu protokol jumlah berversi, pembaruan dibatasi frekuensinya, dan membaca pesan tidak pernah bergantung pada lencana.
Pembahasan mendalam langkah demi langkah
1. Tentukan batasan kapabilitas dan tampilan
Badging API menargetkan ikon aplikasi web yang terinstal; W3C Working Draft 2026 mengekspos setAppBadge dan clearAppBadge pada Navigator dan WorkerNavigator. Ini adalah kapabilitas secure-context, dan user agent dapat meniadakannya atau mengubah cara nilai ditampilkan, sehingga angka persis lintas platform tidak dapat dijamin.
2. Jalankan pembaruan dari data belum dibaca yang otoritatif
Dapatkan bilangan bulat non-negatif dari server atau lapisan sinkronisasi, batasi nilai maksimumnya dan hapus duplikasi, lalu panggil navigator.setAppBadge(count). Saat bernilai nol, panggil clearAppBadge(); untuk menampilkan hanya penanda (flag), hilangkan angkanya. Tangani setiap penolakan Promise dan catat kapabilitas atau jenis kesalahan dalam log, jangan pernah mencatat konten pesan.
3. Rancang jalur latar depan dan latar belakang
Halaman dapat memperbarui setelah peristiwa sinkronisasi; Service Worker dapat menggunakan kapabilitas worker yang sesuai untuk peristiwa latar belakang, bergantung pada dukungan browser yang sebenarnya. Kedua jalur menulis jumlah berversi yang sama sehingga peristiwa lama tidak dapat menimpa nilai yang lebih baru. Saat startup, sinkronkan ulang jumlah otoritatif; lencana bukanlah basis data.
4. Tangani kegagalan dan aksesibilitas
Jika kapabilitas tidak tersedia, konteks tidak aman, PWA tidak terinstal, atau pemanggilan gagal, pertahankan daftar dalam aplikasi, jumlah navigasi, dan petunjuk judul dokumen, ditambah teks yang dapat dibaca seperti “3 pesan belum dibaca.” Batasi pengumuman aria-live hanya pada saat terjadi perubahan. Lencana tidak boleh menjadi satu-satunya saluran, dan kegagalan tidak boleh menghalangi pembacaan atau penandaan pesan telah dibaca.
Contoh jawaban berkualitas tinggi
Pertama-tama saya akan mengonfirmasi bahwa produk menargetkan ikon PWA yang terinstal alih-alih tab normal. Di halaman HTTPS, saya akan mendeteksi navigator.setAppBadge, menjalankannya dengan jumlah belum dibaca non-negatif yang tersinkronisasi, menghapusnya saat nol, dan menangkap kegagalan Promise. Halaman dan Service Worker akan menggunakan satu jumlah berversi dan melakukan sinkronisasi ulang saat startup, mencegah peristiwa usang menimpa data. Karena dukungan terbatas dan platform mungkin merender nilai besar sebagai penanda, saya akan mempertahankan jumlah dalam aplikasi, fallback judul atau favicon, dan teks status aksesibel yang dibatasi frekuensinya. Lencana hanyalah petunjuk; kegagalannya tidak boleh menghalangi pembacaan pesan.
Kesalahan umum
- Menganggap setiap tab browser mendukung lencana numerik yang tepat.
- Melewatkan pemeriksaan HTTPS, instalasi, keberadaan metode, atau penolakan Promise.
- Menggunakan lencana sebagai satu-satunya penyimpan data belum dibaca, menyebabkan pergeseran data saat refresh dan pada multi-perangkat.
- Membiarkan halaman dan Service Worker mempertahankan hitungan independen sehingga peristiwa usang menimpa data baru.
- Hanya menawarkan perubahan warna tanpa judul, jumlah dalam aplikasi, atau fallback yang aksesibel.
- Memanggil API untuk setiap pesan, menyebabkan churn, penggunaan baterai berlebih, dan pembaruan yang tidak perlu.
Pertanyaan lanjutan dan jawaban
Mengapa tidak memperbarui favicon saja?
Favicon memengaruhi tab atau bookmark dan tidak dapat mewakili ikon aplikasi yang terinstal. Gabungkan Badging API, favicon, judul, dan jumlah dalam aplikasi sebagai lapisan presentasi yang bergantung pada kapabilitas.
Apa yang terjadi jika saya mengirimkan 4000?
User agent dapat memadatkan nilai yang besar menjadi 99+ atau hanya menampilkan penanda. Batasi nilai visual dan simpan jumlah persisnya di dalam aplikasi.
Bagaimana Anda akan menguji fallback?
Cakup konteks aman dan tidak aman, PWA yang belum terinstal, metode yang tidak ada, penolakan Promise, pembersihan nilai nol, peristiwa latar belakang yang tidak berurutan, dan teks pembaca layar; dalam setiap kasus, verifikasi bahwa alur data pesan tetap berfungsi.