Awesome
Learning WebWorkers (und comlink)
Just one of the things I'm learning. https://github.com/hchiam/learning
https://www.youtube.com/watch?v=rZm1YaMZkUU
https://github.com/GoogleChromeLabs/comlink
Note: Service Workers can modify network requests, but Web Workers can run expensive scripts without freezing the UI: https://stackoverflow.com/a/38634315
WebWorkers are available even in IE 10.
You can use WebWorkers to free up the main thread and UI, and help apps work faster on low-end devices.
And you can make WebWorkers easier to use from the main thread by using comlink
instead of trying to manage WebWorker messaging (since WebWorkers can't directly access things like the DOM).
Working live example of React using a Web Worker: https://codesandbox.io/s/comlink-react-demo-rf324?file=/src/App.js
From scratch
Using yarn
:
npm init
yarn add comlink
yarn add parcel --dev
Or with npm
:
npm init
npm install comlink
npm install parcel --save-dev
And then add files and create your JS code. For examples, see https://github.com/GoogleChromeLabs/comlink
<script type="module">
import * as Comlink from "https://unpkg.com/comlink@alpha/dist/esm/comlink.mjs";
(async function () {
const worker = new Worker("worker.js");
const object = Comlink.wrap(worker);
alert(`Counter: ${await object.counter}`);
await object.increment();
alert(`Counter: ${await object.counter}`);
})();
</script>
importScripts("https://unpkg.com/comlink@alpha/dist/umd/comlink.js");
const object = {
counter: 0,
increment() {
this.counter++;
},
};
Comlink.expose(object);
Starting by testing out this repo
Using yarn
: (triple-click to select all)
git clone https://github.com/hchiam/learning-webworkers.git && cd learning-webworkers && yarn && yarn dev;
Or with npm
: (triple-click to select all)
git clone https://github.com/hchiam/learning-webworkers.git && cd learning-webworkers && npm install && npm run dev;
React demo in this repo
cd comlink-demo
yarn
yarn start
or
cd comlink-demo
npm install
npm run start