navigator.locks

web-locks polyfill

a Web Locks API polyfill, work when the browser does not support web lock API: navigator.lock, resolve the browser compatibility issue.

• implement features according to Web Locks API Specification

• implement the unit test according to web-platform-test

• implement all the features of Web Locks API

Installation

// with npm
npm install navigator.locks

// with yarn
yarn add navigator.locks

Usage

Just import It.

import "navigator.locks";

navigator.locks.request("my_resource", async (lock) => {
  // The lock has been acquired.
  await do_something();
  await do_something_else();
  // Now the lock will be released.
});

// if you use Typescript, could import these types to use
import type {
  LockManager,
  Lock,
  LockInfo,
  LockManagerSnapshot,
  LocksInfo,
} from "navigator.locks";

navigator.locks API usage follow MDN API Doc

Online demo

demo link

You could open two tabs of this API unsupported browser, operate the lock buttons to experience

Process

All API ✅

• navigator.locks.request

• navigator.locks.request options:

  mode: exclusive | shared

  ifAvailable

  steal

  signal

• navigator.locks.query

CI/CD ✅

Unit test ✅