Web Workers

• allow multi-threading in JavaScript using threads.
• main thread : where browser runs script, processes user events, painting, garbage collection
• worker threads: where a web worker runs code in parallel to thread that spawned it
  • data is only copied [thread safe]
  • have own event loops
  • no DOM access, no access to window, not all web APIs are available
  • uses self to access worker scope

let worker = new Worker("worker.js") //file run on worker thread
worker.addEventListener("message", ({data}) => {
	log(data)
	worker.terminate()
})
worker.postMessage('hello worker')

//worker.js
addEventListener("message", () => { postMessage("Hello")})

Shared Workers

• a Worker can only be accessed from script that created it, a SharedWorker can be accessed by any script that comes from the same domain (different windows, iframes, workers.)
• uses an explicit port object to communicate

const worker = new SharedWorker("worker.js");
worker.port.start()
worker.port.postMessage({ x : 3, y : 2});

//worker.js
addEventListener("connect", (e) => {
  const port = e.ports[0];
  port.start()
  port.onmessage = (e) => console.log(e.data)
})

Service Workers

• act as proxy servers between webapp, browser and network (when available)
• used to create offline webapps, executing code based on if network is available.
• allow access to push notifications and background sync APIs