web-worker

Consistent Web Workers in browser and Node.

Web workers
developit/web-workerweb-worker

README

web-worker


npm

Native cross-platform Web Workers. Works in published npm modules.


In Node, it's a web-compatible Worker implementation atop Node's worker_threads.

In the browser (and when bundled for the browser), it's simply an alias of Worker.

Features


_Here's how this is different from worker_threads:_

- makes Worker code compatible across browser and Node
- supports Module Workers ({type:'module'}) natively in Node 12.8+
- uses DOM-style events (Event.data, Event.type, etc)
- supports event handler properties (worker.onmessage=..)
- Worker() accepts a module URL, Blob URL or Data URL
- emulates browser-style [WorkerGlobalScope] within the worker

Usage Example


In its simplest form:

  1. ```js
  2. import Worker from 'web-worker';

  4. const worker = new Worker('data:,postMessage("hello")');
  5. worker.onmessage = e => console.log(e.data);  // "hello"
  6. ```

main.jsworker.js

  1. ```js
  2. import Worker from 'web-worker';

  4. const url = new URL('./worker.js', import.meta.url);
  5. const worker = new Worker(url);

  7. worker.addEventListener('message', e => {
  8.   console.log(e.data)  // "hiya!"
  9. });

  11. worker.postMessage('hello');
  12. ```


  1. ```js
  2. addEventListener('message', e => {
  3.   if (e.data === 'hello') {
  4.     postMessage('hiya!');
  5.   }
  6. });
  7. ```


👉 Notice how new URL('./worker.js', import.meta.url) is used above to load the worker relative to the current module instead of the application base URL. Without this, Worker URLs are relative to a document's URL, which in Node.js is interpreted to be process.cwd().

_Support for this pattern in build tools and test frameworks is still limited. We are working on growing this._


Module Workers


Module Workers are supported in Node 12.8+ using this plugin, leveraging Node's native ES Modules support.
In the browser, they can be used natively in Chrome 80+, or in all browsers via [worker-plugin] or [rollup-plugin-off-main-thread]. As with classic workers, there is no difference in usage between Node and the browser:

  1. ```js
  2. import Worker from 'web-worker';

  4. const worker = new Worker(
  5.   new URL('./worker.mjs', import.meta.url),
  6.   { type: 'module' }
  7. );
  8. worker.addEventListener('message', e => {
  9.   console.log(e.data)  // "200 OK"
  10. });
  11. worker.postMessage('https://httpstat.us/200');
  12. ```

  1. ```js
  2. import fetch from 'isomorphic-fetch';

  4. addEventListener('message', async e => {
  5.   const url = e.data;
  6.   const res = await fetch(url)
  7.   const text = await res.text();
  8.   postMessage(text);
  9. });
  10. ```

Data URLs


Instantiating Worker using a Data URL is supported in both module and classic workers:

  1. ```js
  2. import Worker from 'web-worker';

  4. const worker = new Worker(`data:application/javascript,postMessage(42)`);
  5. worker.addEventListener('message', e => {
  6.   console.log(e.data)  // 42
  7. });
  8. ```

Special Thanks


This module aims to provide a simple and forgettable piece of infrastructure,
and as such it needed an obvious and descriptive name.
@calvinmetcalf, who you may recognize as the author of Lie and other fine modules, gratiously offered up the name from hisweb-worker package.
Thanks Calvin!


[worker-plugin]: https://github.com/googlechromelabs/worker-plugin
[rollup-plugin-off-main-thread]: https://github.com/surma/rollup-plugin-off-main-thread
[WorkerGlobalScope]: https://developer.mozilla.org/en-US/docs/Web/API/WorkerGlobalScope