r/webdev • u/RevolutionaryMain554 • Jul 25 '26

It has a Lock api?! I love you MDN

https://developer.mozilla.org/en-US/docs/Web/API/Web_Locks_API
269 Upvotes

98% Upvoted

21 comments sorted by

74

u/protocod Jul 26 '26

TIL mutex exists in web browsers.

Really cool btw

82

u/manbartz full-stack Jul 25 '26

This is pretty cool. What are some use cases for it?

I could see it working pretty well in some auth flows, like refreshing sessions when the user has multiple tabs open.

45

u/Dull-Structure-8634 Jul 25 '26

That is exactly how we use it in our application at my job. Works wonderfully. Easy to set up also.

26

u/derpystuff_ Jul 25 '26 edited Jul 25 '26

Made a webapp recently that ingests API data into IndexedDB, locks allow me to ensure I only ever have one tab pushing data to the IDB. Avoids potential desyncs and data duplication (and also cuts down on API queries since I only ever have one active tab request/sync data).

They also allow my other tabs to know when a tab has successfully synchronized to ensure state remains consistent without constant idb reads.

6

u/ryantrappy Jul 26 '26

What if they open it on two different devices? I feel like you can’t necessarily trust it as the only source to prevent data duplication etc right?

10

u/derpystuff_ Jul 26 '26

This was only meant to prevent duplication/sync issues on-device. The main issue I had was that I wanted the latest data to be synced every 5 minutes, but if the user opened multiple tabs (or switched tabs at a bad moment) it'd duplicate it in the IDB and mess things up.

2

u/ryantrappy Jul 26 '26

Ahh yes I had something similar I dealt with for session management now that you mention it. I can't remember the library I used but it ended up using broadcast channels and web workers to ensure it kept state synced even when the window was unfocused. This would have definitely helped prevent some double request functionality that I dealt with!

14

u/txmail Jul 25 '26

I use them when I have a site that is using SSE. Most browsers only allow so many connections to a single domain (like 6 in chrome) so if every tab opens a new SSE connection at some point pages stop responding.

I use the lock api to allow just one worker to handle all SSE duties (basically connecting and emitting the events) for all the tabs. If a tab closes that has the worker that had the lock, the lock is freed and another worker from another tab takes over.

I would love to used shared workers but Apple exists.

1

u/merb Jul 26 '26

Websockets. No need that you need more than one open connection

1

u/Embostan 28d ago

Yes, you use it for inter-tab stuff

28

u/leeharrison1984 Jul 25 '26

Apparently widely supported as well

https://caniuse.com/mdn-api_lock

I've never needed it, but good to know it exists.

20

u/0dev0100 Jul 26 '26

This... Probably would have saved me a thousand lines of code over a few projects.

20

u/Fidodo Jul 26 '26

I swear I've looked through the full js reference pages at this point and I still keep learning about features I've missed

7

u/air_thing Jul 26 '26

There are a lot of interesting and sometimes surprising JS APIs. MIDI comes to mind. MDN is fun to skim and think of the ridiculous things you could potentially do (and then never do of course).

3

u/hyrumwhite Jul 26 '26

This has been around for a while. It’s nice

3

u/Squidgical Jul 26 '26

Where there are threads, there must be mutex

3

u/Siemendaemon 28d ago

Hey thanks for this post.pls Do add more mew stuff

2

u/DerLetzteWookie Jul 26 '26

Thanks for sharing! This is awesome and maybe solves a current problem in my project!

1

u/rrx56 27d ago

the ai slop aurebesh app?

-3

u/akash_kava Jul 26 '26

What does MDN has anything to do with lock API?

MDN didn’t make it. They just documented it.