Web Locks API

• Web Locks API memungkinkan satu tab atau web worker memperoleh lock secara asinkron, menjalankan tugas, lalu melepaskan lock setelah selesai
• Selama lock dipegang, skrip lain dalam origin yang sama tidak dapat memperoleh lock yang sama, sehingga resource dapat dikoordinasikan dengan aman di beberapa tab atau worker
• Hanya dapat digunakan di Secure Context (HTTPS), dan tersedia di Web Workers

Konsep utama dan cara penggunaan

• Lock adalah resource abstrak yang diidentifikasi dengan nama yang ditentukan oleh aplikasi web
• Sebagai contoh, saat beberapa tab melakukan sinkronisasi IndexedDB dan jaringan, lock bernama “my_net_db_sync” dapat digunakan agar hanya satu tab yang melakukan sinkronisasi pada satu waktu
• Alur penggunaan:
  1. Meminta lock
  2. Menjalankan tugas asinkron
  3. Setelah tugas selesai, lock dilepas secara otomatis

Contoh kode

navigator.locks.request("my_resource", async (lock) => {
await do_something();
await do_something_else();
});

• Selama lock dipegang, permintaan lain untuk lock yang sama akan ditambahkan ke antrean, dan ketika lock dilepas, permintaan pertama akan diproses

Opsi

• mode: mode default adalah “exclusive” (eksklusif), dan mode “shared” (berbagi) juga tersedia. “exclusive” hanya mengizinkan satu permintaan, sedangkan “shared” dapat mengizinkan beberapa permintaan
• ifAvailable: jika lock tidak bisa diperoleh segera, permintaan gagal, dan callback mengembalikan null
• steal: melepaskan lock yang sudah ada dengan nama yang sama dan memprioritaskan permintaan baru
• signal: permintaan dapat dibatalkan melalui AbortSignal (misalnya untuk menerapkan timeout)

Pemantauan

• navigator.locks.query() dapat digunakan untuk melihat status lock saat ini pada origin tersebut
• Ini berguna saat debugging, dan memungkinkan pengecekan lock mana yang sedang dipegang serta lock apa saja yang diminta

Penggunaan lanjutan

• Untuk mengontrol secara eksplisit kapan tugas asinkron selesai, Anda dapat mengembalikan Promise

let resolve;
const p = new Promise((res) => { resolve = res });

navigator.locks.request("my_resource", (lock) => p);

• Saat resolve() dipanggil, lock akan dilepas

Mencegah deadlock

• Deadlock adalah situasi ketika permintaan yang berbeda saling berbenturan karena urutan, sehingga tidak ada yang bisa melanjutkan
• Sebagai contoh, jika tab 1 memegang lock A dan tab 2 memegang lock B, lalu tab 1 meminta lock B dan tab 2 meminta lock A, keduanya akan saling menunggu
• Untuk mencegahnya:
• Hindari permintaan lock yang bersarang
• Jalankan permintaan lock sesuai urutan
• Tetapkan timeout untuk membatalkan permintaan

Antarmuka

• Lock: menyediakan nama dan mode dari lock yang diminta
• LockManager: menyediakan metode untuk meminta lock baru atau melihat lock yang sudah ada
• Instance dapat diperoleh melalui navigator.locks
• WorkerNavigator.locks dapat digunakan di Web Workers

Spesifikasi dan dukungan browser

• Spesifikasi: Web Locks API
• Kompatibilitas browser: hanya didukung di sebagian browser, dan dukungan pada browser terbaru dapat diperiksa di MDN

Pendapat GN⁺

• Web Locks API berguna untuk menyelesaikan masalah sinkronisasi resource di lingkungan asinkron
• Karena ada kemungkinan deadlock, penggunaannya perlu hati-hati, dan sebaiknya mempertimbangkan pengaman seperti pengaturan timeout
• Mode shared dapat meningkatkan performa pada tugas read-only, tetapi tetap memerlukan peninjauan menyeluruh terhadap race condition
• API ini dapat dimanfaatkan sebagai alternatif untuk mengatasi masalah sinkronisasi pada localStorage atau IndexedDB