navigator.locks is a read-only Navigator property that returns a LockManager (MDN) — the entry point for the Web Locks API. Tabs and workers on the same origin can request named locks and take turns on shared work.
Read the notes below before you rely on this property. Prefer feature detection when support is limited.
Use navigator.locks. Start with this line.
navigator.locks| Call | What it does |
|---|---|
navigator.locks | Primary signature. |
Built into the browser. Read navigator.locks on Navigator — no import required.
navigator.locks| Parameter | Description |
|---|---|
| name | Required. String id for the resource |
| callback | Required. Runs while the lock is held |
| options | Optional. mode, ifAvailable, signal, … |
| Return Value | Description |
|---|---|
| * | The current value of navigator.locks. |
Check whether navigator.locks is exposed before using the API.
const supported = Boolean(navigator.locks);
console.log(supported ? "Web Locks available" : "Web Locks missing");undefined.Boolean(navigator.locks) is a clear yes/no.Confirm HTTPS / localhost together with navigator.locks.
const lines = [
"secure: " + window.isSecureContext,
"locks: " + Boolean(navigator.locks)
];
if (!window.isSecureContext) {
lines.push("Serve over HTTPS to use navigator.locks");
} else if (!navigator.locks) {
lines.push("Secure, but Web Locks not exposed");
} else {
lines.push("Ready to call request / query");
}
console.log(lines.join("\n"));isSecureContext. MDN requires a secure context for locks.Acquire a named lock, inspect lock.name / mode, then auto-release.
async function runWithLock() {
if (!navigator.locks) return "Web Locks not supported.";
return navigator.locks.request("demo_resource", async (lock) => {
return "held: " + lock.name + " (mode: " + lock.mode + ")";
});
}
runWithLock().then(console.log);navigator.locks is missing."demo_resource" identifies the resource."exclusive".Snapshot how many locks are held or waiting on this origin.
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
}, null, 2);
}
snapshot().then(console.log);query(). Returns a Promise with lock state.held. Locks currently owned on this origin.pending. Requests waiting for a free lock.ifAvailable Leader CheckBecome the sync leader only if the lock is free right now.
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)));ifAvailable: true. Do not join the wait queue.null. MDN: callback gets null when the lock is busy.navigator.locks is Baseline Widely available (MDN). Evergreen browsers have shipped the Web Locks API since about March 2022.
Supported in modern Chrome, Firefox, Safari, Edge, and Opera on secure contexts. Not available in Internet Explorer.
Bottom line: Safe for modern web apps on HTTPS. Always feature-detect and keep a non-lock fallback for older or insecure environments.
Learn how navigator.login connects to Federated Credential Management.
10 people found this page helpful