SvelteKit Web Worker

How to create and communicate with a web worker in SvelteKit

Photo by Christopher Burns on Unsplash

​I ❤️ web workers!

These background threads are my go to strategy to compute anything I consider as too expensive for a frontend web application (e.g. Tie Tracker) or if it has to execute a recurring tasks (e.g. Papyrs or Cycles.watch).

​In these two last projects, I used SvelteKit. So here is how you can develop and communicate with web workers using such an application framework.

Create a web worker

There is no particular requirements nor convention but I like to suffix my worker file​s with the extension .worker.ts​​ — e.g. to create a bare minimum worker I create a file named my.worker.ts​​ which finds place in the src/lib directory.

onmessage = () => {
  console.log('Hello World 👋');
};

export {};

onmessage is a function that fires each time the web worker gets called — i.e. each time postMessage is used to send a message to the worker from the window side.

​The empty export {}​ is a handy way to make the worker a module and solve following TypeScript error if not declared:

TS1208: ‘my.worker.ts’ cannot be compiled under ‘ — isolatedModules’ because it is considered a global script file. Add an import, export, or an empty ‘export {}’ statement to make it a module.​

​Dynamically import

​To integrate the worker in a component it needs to be dynamically imported. SvelteKit relying on ViteJS for its tooling, it can be imported with the ?.worker​​ suffix (see documentation).

<script lang="ts">
  import { onMount } from 'svelte';

  let syncWorker: Worker | undefined = undefined;

  const loadWorker = async () => {
    const SyncWorker = await import('$lib/my.worker?worker');
    syncWorker = new SyncWorker.default();
  };

  onMount(loadWorker);
</script>

<h1>Web worker demo</h1>

In above snippet I affect the worker to a local variable in case I would like to use it elsewhere in the…