JavaScript Navigator locks Property

What You’ll Learn

navigator.locks is the entry point for the Web Locks API. Learn the LockManager, request() / query(), coordinating tabs, secure context rules, five examples, and try-it labs.

Introduction

Open the same web app in two tabs and both might try to sync data at once. That can corrupt IndexedDB writes or waste bandwidth. Web Locks let those tabs take turns on a named resource.

navigator.locks returns a LockManager. You call request(name, callback) to acquire a lock, do async work inside the callback, and the lock is released automatically when the callback finishes.

Understanding the locks Property

Think of navigator.locks as a lock desk for your origin: request a named lock, hold it while you work, then let the next waiter in.

• LockManager — object returned by navigator.locks.
• request(name, cb) — run cb while holding the lock.
• Auto-release — when the callback (and its awaits) complete.
• query() — snapshot of held and pending locks.
• Modes — default exclusive; optional shared.
• Secure context — HTTPS / localhost required.

📝 Syntax

General form of the property:

navigator.locks

Value

• A LockManager object with request() and query().

Common patterns

// MDN-style request (lock released when callback finishes):
navigator.locks.request("my_resource", async (lock) => {
  // The lock has been acquired.
  await doSomething();
  // Now the lock will be released.
});

// Await the whole request (resolves after release):
await navigator.locks.request("my_resource", async (lock) => {
  await doSomethingWithLock();
});

// Inspect held / pending locks:
const state = await navigator.locks.query();

Examples Gallery

Examples follow MDN Web Locks / navigator.locks patterns. Prefer Try It Yourself on HTTPS. Open two tabs to see exclusive locking in action.

const supported = Boolean(navigator.locks);
console.log(supported ? "Web Locks available" : "Web Locks missing");

Web Locks available
(or "Web Locks missing" on unsupported / insecure pages)

console.log("secure: " + window.isSecureContext);
console.log("locks: " + Boolean(navigator.locks));

if (!window.isSecureContext) {
  console.log("Serve over HTTPS to use navigator.locks");
} else if (!navigator.locks) {
  console.log("Secure, but Web Locks not exposed");
} else {
  console.log("Ready to call request / query");
}

secure: true
locks: true
Ready to call request / query

async function runWithLock() {
  if (!navigator.locks) {
    return "Web Locks not supported.";
  }
  return navigator.locks.request("demo_resource", async (lock) => {
    // The lock has been acquired.
    return "held: " + lock.name + " (mode: " + lock.mode + ")";
  });
}

runWithLock().then(console.log);

held: demo_resource (mode: exclusive)

async function snapshot() {
  if (!navigator.locks) {
    return "Web Locks not supported.";
  }
  const state = await navigator.locks.query();
  return JSON.stringify({
    held: state.held.length,
    pending: state.pending.length
  });
}

snapshot().then(console.log);

{"held":0,"pending":0}
(counts change while another tab holds a lock)

async function tryBecomeLeader() {
  if (!navigator.locks) {
    return { ok: false, reason: "unsupported" };
  }
  return navigator.locks.request(
    "sync_leader",
    { ifAvailable: true },
    async (lock) => {
      if (!lock) {
        return { ok: false, reason: "busy" };
      }
      return { ok: true, name: lock.name };
    }
  );
}

tryBecomeLeader().then((r) => console.log(JSON.stringify(r)));

{"ok":true,"name":"sync_leader"}
(or {"ok":false,"reason":"busy"} if another holder exists)

🚀 Common Use Cases

• Sync leader election — only one tab syncs network ↔ IndexedDB.
• Shared resource guards — serialize access to a named critical section.
• Multi-tab editors — prevent conflicting writes to the same store.
• Worker coordination — same API available in Web Workers.
• Diagnostics — query() to see who holds what.

📝 Notes

• Baseline Widely available (MDN, since about March 2022).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Secure context required (HTTPS / localhost).
• Also available as WorkerNavigator.locks in workers.
• Related: login, languages, JavaScript hub.

💡 Best Practices