Soalan dan skop
Sebuah PWA yang dipasang sepatutnya memaparkan bilangan belum dibaca pada ikon aplikasinya. Terangkan pengesanan keupayaan, aliran kemas kini dan pembersihan untuk Badging API, serta sandaran apabila pelayar tidak menyokongnya atau panggilan tersebut gagal.
Perkara yang dinilai oleh penemu duga
- Mengetahui bahawa
navigator.setAppBadge()danclearAppBadge()memerlukan konteks selamat yang disokong. - Membezakan keupayaan
WorkerNavigatorhalaman dan Service Worker serta mengendalikan kegagalan Promise. - Menganggap API sebagai petunjuk persembahan dan bukannya punca kebenaran (source of truth) bagi data belum dibaca.
- Menyediakan sandaran yang boleh dilihat/disedari seperti tajuk, bilangan dalam aplikasi, dan teks status yang boleh diakses sambil mengehadkan kadar (throttling) kemas kini.
Soalan penjelasan
- Adakah sasarannya ialah ikon PWA yang dipasang atau tab pelayar biasa?
- Apakah punca berwibawa bagi bilangan belum dibaca, dan bagaimanakah muat semula serta berbilang tab kekal konsisten?
- Adakah kemas kini luar talian, tolak latar belakang (background push), dan gabungan pelayar/OS tertentu diperlukan?
- Bagaimanakah pengguna pembaca skrin harus menerima keadaan yang sama, dan patutkah bilangan dihadkan atau diredaksikan?
Rangka jawapan 30 saat
Saya akan menganggap lencana sebagai lapisan persembahan pilihan. Dalam HTTPS, kesan navigator.setAppBadge, kemas kininya daripada bilangan belum dibaca yang disegerakkan, periksa kegagalan Promise, dan panggil clearAppBadge apabila sifar. Jika tidak disokong atau gagal, kekalkan bilangan dalam aplikasi, penunjuk tajuk atau favicon, serta teks status yang boleh diakses. Halaman dan Service Worker berkongsi satu protokol bilangan berversi, kemas kini dihadkan kadarnya, dan membaca mesej tidak pernah bergantung pada lencana.
Penyelaman mendalam langkah demi langkah
1. Tentukan sempadan keupayaan dan paparan
Badging API menyasarkan ikon aplikasi web yang dipasang; Draf Kerja W3C 2026 mendedahkan setAppBadge dan clearAppBadge pada Navigator dan WorkerNavigator. Ia merupakan keupayaan konteks selamat, dan ejen pengguna mungkin mengabaikannya atau mengubah cara nilai dipaparkan, jadi nombor rentas platform yang tepat tidak boleh dijanjikan.
2. Pacu kemas kini daripada data belum dibaca yang berwibawa
Dapatkan integer bukan negatif daripada pelayan atau lapisan penyegerakan, hadkan dan nyahduplikasi, kemudian panggil navigator.setAppBadge(count). Pada nilai sifar, panggil clearAppBadge(); untuk menunjukkan bendera sahaja, tinggalkan nombor tersebut. Kendalikan setiap penolakan Promise dan log jenis keupayaan atau ralat, jangan sekali-kali kandungan mesej.
3. Reka laluan latar depan dan latar belakang
Halaman boleh mengemas kini selepas peristiwa penyegerakan; Service Worker boleh menggunakan keupayaan worker yang sepadan untuk peristiwa latar belakang, tertakluk kepada sokongan pelayar sebenar. Kedua-dua laluan menulis bilangan berversi yang sama supaya peristiwa lama tidak dapat menulis ganti nilai yang lebih baharu. Semasa permulaan, segerakkan semula bilangan berwibawa; lencana bukanlah pangkalan data.
4. Kendalikan kegagalan dan kebolehcapaian
Jika keupayaan tiada, konteks tidak selamat, PWA tidak dipasang, atau panggilan gagal, kekalkan senarai dalam aplikasi, bilangan navigasi, dan petunjuk tajuk dokumen, ditambah teks yang boleh dibaca seperti “3 mesej belum dibaca.” Hadkan pengumuman aria-live kepada perubahan sahaja. Lencana tidak boleh menjadi satu-satunya saluran, dan kegagalan tidak boleh menyekat pembacaan atau penandaan mesej sebagai telah dibaca.
Contoh jawapan berkualiti tinggi
Saya akan terlebih dahulu mengesahkan bahawa produk tersebut menyasarkan ikon PWA yang dipasang dan bukannya tab biasa. Dalam halaman HTTPS, saya akan mengesan navigator.setAppBadge, memacunya dengan bilangan belum dibaca bukan negatif yang disegerakkan, mengosongkannya pada nilai sifar, dan menangkap kegagalan Promise. Halaman dan Service Worker akan menggunakan satu bilangan berversi dan menyegerakkan semula semasa permulaan, menghalang peristiwa lapuk daripada mengatasi yang baharu. Oleh kerana sokongan adalah terhad dan sesuatu platform mungkin memaparkan nilai yang besar sebagai penanda, saya akan mengekalkan bilangan dalam aplikasi, sandaran tajuk atau favicon, serta teks status boleh diakses yang dihadkan kadarnya. Lencana hanyalah petunjuk; kegagalannya tidak boleh menyekat pembacaan mesej.
Kesilapan lazim
- Menganggap setiap tab pelayar menyokong lencana berangka yang tepat.
- Melangkau pemeriksaan HTTPS, pemasangan, kewujudan kaedah, atau penolakan Promise.
- Menggunakan lencana sebagai satu-satunya stor data belum dibaca, menyebabkan drift semasa muat semula dan merentasi berbilang peranti.
- Membiarkan halaman dan Service Worker mengekalkan bilangan secara bebas sehingga peristiwa lapuk mengatasi yang baharu.
- Hanya menawarkan perubahan warna tanpa tajuk, bilangan dalam aplikasi, atau sandaran yang boleh diakses.
- Memanggil API untuk setiap mesej, menyebabkan churn, penggunaan bateri, dan kemas kini yang tidak perlu.
Soalan susulan dan jawapan
Mengapa tidak mengemas kini favicon sahaja?
Favicon mempengaruhi tab atau penanda halaman dan tidak boleh mewakili ikon aplikasi yang dipasang. Gabungkan Badging API, favicon, tajuk, dan bilangan dalam aplikasi sebagai lapisan persembahan yang bergantung pada keupayaan.
Apakah yang berlaku jika saya menghantar 4000?
Ejen pengguna mungkin memampatkan nilai yang besar kepada 99+ atau hanya menunjukkan penanda. Hadkan nilai visual dan simpan bilangan tepat dalam aplikasi.
Bagaimanakah anda akan menguji sandaran?
Liputi konteks selamat dan tidak selamat, PWA yang tidak dipasang, kaedah yang tiada, penolakan Promise, pembersihan sifar, peristiwa latar belakang yang tidak mengikut turutan, dan teks pembaca skrin; dalam setiap kes, sahkan bahawa aliran data mesej masih berfungsi.