Digital Transformation
Web Locks API (navigator.locks)
TL;DR: Web Locks API (
navigator.locks) memungkinkan beberapa tab, worker, atau service worker dalam satu origin mengantri akses ke resource bersama, seperti IndexedDB atau API endpoint, sehingga tidak terjadi double-write atau duplicate request. Per 2026, API ini sudah dukungan luas di Chrome, Edge, Safari, dan Firefox.
Apa itu Web Locks API?
Web Locks API adalah mekanisme penguncian asynchronous yang disediakan browser lewat navigator.locks. Saat satu tab atau worker memegang lock dengan nama tertentu, tab lain dalam origin yang sama harus menunggu hingga lock dilepas. Konsep ini mirip mutex di backend, tapi diatur sepenuhnya oleh browser dan otomatis dilepas saat tab ditutup atau crash.
Contoh kasus paling jelas: pengguna membuka 3 tab dashboard Anda. Tanpa lock, ketiga tab bisa sama-sama menjalankan refresh token atau menulis cart yang sama, menyebabkan race condition. Dengan Web Locks API, hanya tab pertama yang aktif yang menjalankan refresh, sisanya menunggu hasil dan langsung membaca cache.
Cara Kerja dan Pola Pemakaian
API ini punya dua mode: exclusive (default, hanya satu pemegang) dan shared (banyak pemegang asal tidak ada exclusive lock). Format dasar:
| Pola | Kegunaan |
|---|---|
navigator.locks.request('cart-sync', cb) | Antri eksklusif sampai callback selesai |
navigator.locks.request('feed-read', { mode: 'shared' }, cb) | Multi-reader, blok hanya jika ada writer |
navigator.locks.query() | Inspeksi lock aktif untuk debugging |
Callback selalu di-await, jadi browser otomatis melepas lock saat callback selesai atau melempar error. Ini lebih aman daripada manual mutex karena tidak ada risiko deadlock akibat lupa unlock.
Kenapa Penting?
Untuk aplikasi yang punya state shared antar tab, seperti dashboard analitik, keranjang e-commerce, atau LMS dengan progres pelajaran, Web Locks API mengurangi bug duplikasi yang biasanya sulit di-reproduce. Pada beberapa proyek Next.js yang saya kerjakan, migrasi dari mekanisme custom (pakai BroadcastChannel + flag di localStorage) ke navigator.locks memangkas 60 sampai 80 baris kode dan menghilangkan bug refresh token ganda yang sering memicu rate limit.
Dokumentasi resmi tersedia di MDN Web Locks API dan Chrome Status. Untuk marketer yang memantau performa, dampak bisnisnya nyata: lebih sedikit error 429 dari API pihak ketiga, lebih sedikit duplicate order, dan Total Blocking Time yang lebih stabil karena tidak ada thrashing antar tab.
Pertanyaan Umum
Apakah Web Locks API bekerja lintas origin?
Tidak. Lock hanya berlaku di dalam satu origin (kombinasi protocol + host + port). Tab di subdomain lain tidak akan saling memengaruhi.
Bagaimana kalau pengguna memakai browser lama yang belum mendukung?
Lakukan feature detection dengan if ('locks' in navigator). Untuk browser lama, fallback ke pola lama seperti flag di localStorage plus storage event. Per 2026, fallback ini diperlukan untuk kurang dari 2 persen pengguna.
Istilah Terkait