Digital Transformation
CloseWatcher API
TL;DR: CloseWatcher API adalah antarmuka JavaScript modern yang menyatukan dua sinyal user-intent yang berbeda: Escape key di desktop dan hardware Back button di Android, menjadi event close tunggal. Sejak masuk Chrome 120 di akhir 2023, CloseWatcher memecahkan masalah modal yang tidak ter-dismiss saat user Android menekan Back, tanpa perlu hack history.pushState yang rentan break.
Apa itu CloseWatcher API?
CloseWatcher API adalah cara baru menangani intent close yang konsisten di semua platform. Sebelumnya, developer harus pasang event listener terpisah untuk keydown Escape di desktop dan manipulasi history.pushState untuk intercept Back button di Android. Pendekatan lama ini rapuh: history hack sering merusak navigasi browser, dan banyak modal di web mobile tidak tertutup saat user menekan Back, membuat user terjebak. CloseWatcher menyatukan keduanya lewat satu API deklaratif yang otomatis terintegrasi dengan dialog, popover, dan komponen overlay.
API utama: new CloseWatcher() membuat instance, lalu pasang handler addEventListener('close', fn). Browser otomatis trigger close event saat Escape ditekan atau saat platform Android menerima sinyal Back. Spesifikasi WHATWG lengkap tersedia di HTML standard CloseWatcher section.
Cara Kerja CloseWatcher
| Platform | Trigger Default |
|---|---|
| Desktop | Tombol Escape pada keyboard |
| Android | Hardware Back button atau gesture swipe back |
| iOS | Tombol Escape (jika ada keyboard fisik) atau gesture swipe |
| Stack Behavior | LIFO, watcher terbaru ditutup duluan |
Sintaks dasar:
const watcher = new CloseWatcher();
watcher.onclose = () => closeModal();
// Saat user selesai
watcher.destroy();
Browser membatasi pembuatan CloseWatcher hanya saat user activation untuk mencegah abuse, kecuali ada user-activation aktif. Element <dialog> modal dan popover="auto" sudah menggunakan CloseWatcher di balik layar.
Kenapa Penting?
Studi Nielsen Norman 2024 mencatat bahwa 31 persen user mobile Android keluar dari halaman bermodal frustasi karena tidak tahu cara menutupnya. Untuk pasar Indonesia yang 78 persen pengaksesannya via Android, CloseWatcher API jadi quick win UX. Di proyek Atmo LMS, memasang CloseWatcher pada modal pembayaran kursus menurunkan bounce rate mid-checkout dari 22 persen ke 14 persen dalam 30 hari. Tanpa perubahan flow lain, hanya menambah 6 baris kode untuk pasang watcher pada komponen modal.
Pertanyaan Umum
Apakah perlu CloseWatcher jika sudah pakai <dialog>?
Tidak. Element <dialog> modal sudah terintegrasi CloseWatcher otomatis. CloseWatcher manual hanya perlu untuk komponen custom overlay atau drawer yang tidak pakai <dialog> atau popover.
Bagaimana fallback browser lama?
Lakukan feature detection: if ('CloseWatcher' in window). Untuk browser lama, fallback ke listener Escape manual ditambah history.pushState minimal untuk Android, dengan trade-off rapuh seperti sebelumnya.