Repository files navigation

• What is their purpose?
• Concepts and usage
• Worker types
  • Dedicated worker
  • Shared worker
  • Service worker

Web Workers allows running code (JS file) in a background thread separate from the main execution thread of an app.

Time-intensive processing can be delegated to them not to block/slow down the main thread.

A worker is an object created using a constructor (e.g.Worker()) that runs JS file in the background thread.

Most of the standard JavaScript sets of functions are available from inside the worker.But there are some exceptions: for example, you can't access DOM (more details).

Communication between the worker and the main thread is done via a system of messages.Both sides have apostMessage() method to send their messages.

Theonmessage event handler is used to respond to the message (contained within themessage eventdata property).The data is copied (using astructured clone algorithm) rather than shared.

• Dedicated workers - utilized by a single script.
• Shared workers - utilized by multiple scripts running in different windows, IFrames, etc., within the same domain.
• Service workers - act as proxy servers between the app, the browser, and the network.

Adedicated worker is created using theWorker() constructor, specifying the URL of a script to execute.

E.g.

constworker=newWorker('worker.js');

To startthe demo run:

npm run start:worker

Ashared worker is created using theSharedWorker() constructor, specifying the URL of a script to execute.

E.g.

constsharedWorker=newSharedWorker('shared-worker.js');

To startthe demo run:

npm run shared-worker

Aservice worker is an event-driven worker. It can control the routes it is associated with by intercepting and modifying navigation and resource requests.

It is registered using theServiceWorkerContainer.register() method.

E.g.

if('serviceWorker'innavigator){navigator.serviceWorker.register('/service-worker.js');}

To startthe demo run:

npm run service-worker

and then openhttp://localhost:8888/