Sling Academy
Home/JavaScript/Acquire Exclusive Resources Using the Web Locks API in JavaScript

Acquire Exclusive Resources Using the Web Locks API in JavaScript

Last updated: December 13, 2024

The Web Locks API is a powerful tool in JavaScript that allows developers to coordinate the use of resources across different tabs and workers in a web application. By using this API, you can prevent race conditions, ensure data integrity, and optimize resource usage. It is especially useful for scenarios where multiple parts of a web application need to access a shared resource safely.

Introduction to Web Locks API

The API gives you the ability to create named locks. These locks can be used to signify exclusive or shared ownership over a resource, allowing different parts of your application to cooperate when accessing or modifying a shared resource.

Types of Locks

You can use the Web Locks API to create two types of locks:

  • Exclusive Lock: This lock allows full control over a resource by only one at a time. Perfect for tasks that must not see interference from others.
  • Shared Lock: Multiple access is permitted as long as they don’t conflict, suitable for read operations.

Getting Started with Web Locks API

To use the Web Locks API, you first need to enter the scope of a lock. Here is a step-by-step guide on how to acquire an exclusive lock:

navigator.locks.request('my_unique_lock', lock => {
  // This function runs when the lock is acquired
  console.log('Lock acquired');

  // Simulate some work by delaying the release of the lock
  return new Promise(resolve => setTimeout(resolve, 2000));
});

In the code above, we are requesting an exclusive lock named my_unique_lock. The callback function is executed once the lock is acquired, allowing you to perform operations on the locked resource.

Using Shared Locks

Shared locks are great for read-only tasks and can enable better performance by allowing concurrent reads:

navigator.locks.request('my_shared_lock', { mode: 'shared' }, lock => {
  console.log('Shared lock acquired');
  // Shared operations
});

In this example, multiple locks can be acquired simultaneously but as shared locks.

Cancellations and Timeouts

Sometimes you might need to cancel a lock request if it takes too long. This can be handled using abort signals:

const controller = new AbortController();

// Cancel the lock request if it takes too long
setTimeout(() => controller.abort(), 5000);

navigator.locks.request(
  'cancellable_lock',
  { signal: controller.signal },
  lock => {
    console.log('Lock acquired before cancellation');
  }
).catch(error => {
  if (error.name === 'AbortError') {
    console.error('Lock was aborted due to timeout');
  }
});

The code demonstrates creating an abort controller to cancel the request after a specified timeout (5000ms), ensuring the application doesn’t hang indefinitely.

Practical Usage of the Web Locks API

Consider a scenario where multiple service workers need to update user data simultaneously. Using an exclusive lock ensures that each operation to update the data remains consistent without overlapping:

// Service worker installing...
self.addEventListener('install', event => {
  event.waitUntil(
    navigator.locks.request('update_user_data', async lock => {
      console.log('Performing updates to user data...');
      // Logic to update data
    })
  );
});

The locks ensure that user data updates are handled one at a time in service worker’s install phase, preventing incomplete data overwrites.

Conclusion

The Web Locks API provides a robust mechanism to manage simultaneous operations on shared resources securely. As demonstrated, it is easy to implement and offers both exclusive and shared capabilities to suit different use cases. By leveraging the API, you can significantly enhance the reliability and performance of web applications where resource contention might otherwise pose problems.

Next Article: Prevent Race Conditions with the Web Locks API in JavaScript

Previous Article: Implement Secure Hashing and Random Values in JavaScript Web Crypto

Series: Web APIs – JavaScript Tutorials

JavaScript

You May Also Like

  • Handle Zoom and Scroll with the Visual Viewport API in JavaScript
  • Improve Security Posture Using JavaScript Trusted Types
  • Allow Seamless Device Switching Using JavaScript Remote Playback
  • Update Content Proactively with the JavaScript Push API
  • Simplify Tooltip and Dropdown Creation via JavaScript Popover API
  • Improve User Experience Through Performance Metrics in JavaScript
  • Coordinate Workers Using Channel Messaging in JavaScript
  • Exchange Data Between Iframes Using Channel Messaging in JavaScript
  • Manipulating Time Zones in JavaScript Without Libraries
  • Solving Simple Algebraic Equations Using JavaScript Math Functions
  • Emulating Traditional OOP Constructs with JavaScript Classes
  • Smoothing Out User Flows: Focus Management Techniques in JavaScript
  • Creating Dynamic Timers and Counters with JavaScript
  • Implement Old-School Data Fetching Using JavaScript XMLHttpRequest
  • Load Dynamic Content Without Reloading via XMLHttpRequest in JavaScript
  • Manage Error Handling and Timeouts Using XMLHttpRequest in JavaScript
  • Handle XML and JSON Responses via JavaScript XMLHttpRequest
  • Make AJAX Requests with XMLHttpRequest in JavaScript
  • Customize Subtitle Styling Using JavaScript WebVTT Integration