@okikio/sharedworker, SharedWorkers on all browsers
Tags: webdev, javascript, ts, astro
Published: 2021-10-15 23:03:45

---
title: @okikio/sharedworker, SharedWorkers on all browsers
published: true
date: 2021-10-15 22:49:14 UTC
tags: webdev, js, ts, astro
canonical_url: https://blog.okikio.dev/sharedworker
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uk6urbzwjstzxg7g35md.jpg
---

For [bundlejs.com](https://bundlejs.com), and [astro.build/play](https://astro.build/play), I found that I needed a way to use `SharedWorkers` reliably on all browsers, so, I decided to make a [miniature script](https://gist.github.com/okikio/6809cfc0cdbf1df4c0573addaaf7e259) that would act as a wrapper around the `SharedWorker` class, by default it would try to create a `SharedWorker` but otherwise would switch to normal web workers this made `SharedWorkers` a type of [progressive enhancement](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement).

{% gist https://gist.github.com/okikio/6809cfc0cdbf1df4c0573addaaf7e259 %}

When I realized that a polyfill/ponyfill doesn't exist for `SharedWorkers` I realized I needed to make one, and to ensure reliable that the polyfill was thoroughly vetted and tested for cross browser compatibility, so, I made [@okikio/sharedworker](https://github.com/okikio/sharedworker#okikiosharedworker).

{% github https://github.com/okikio/sharedworker %}

## Usage

`@okikio/sharedworker` is a small mostly spec. compliant polyfill/ponyfill for `SharedWorkers`, it acts as a drop in replacement for normal `Workers`, and supports a similar API surface that matches normal `Workers`.

You use it like this,

`shared-worker.js`

```
/* 
 * All variables and values outside the `start(...)` function are shared between all pages, this behavior can cause unexpected bugs if you're not careful
 */
const start = (port) => {
    // All your normal Worker and SharedWorker stuff should just work
    // With no more setup 

    /** 
     * All variables and values inside the `start(...)` function are isolated to each page, and will be allocated seperately per page. 
     */
    port.onmessage = ({ data }) => {
        if (data == "Hey")
            port.postMessage("Hello, from the SharedWorker."); 
    };
};

self.onconnect = e => {
    let [port] = e.ports;
    start(port);
};

// This is the fallback, just in case the browser doesn't support SharedWorkers
if ("SharedWorkerGlobalScope" in self) 
    start(self);

```

`main.js`

```
import SharedWorker from "@okikio/sharedworker";

const sharedworker = new SharedWorker(new URL("shared-worker.js", import.meta.url));
sharedworker.onmessage = ({ data }) => {
    console.log(data); //= Hello, from SharedWorker
};

sharedworker.postMessage("Hey");

```

In the cases of [bundlejs.com](https://bundlejs.com) and [astro.build/play](https://astro.build/play), `@okikio/sharedworker` was used for [esbuild](https://github.com/okikio/bundle/blob/main/src/ts/workers/esbuild.ts) as well as the [monaco-editors](https://microsoft.github.io/monaco-editor/) [editor](https://github.com/snowpackjs/astro-repl/blob/main/src/editor/workers/editor.ts) and [typescript](https://github.com/okikio/bundle/blob/main/src/ts/workers/typescript.ts) workers.

## Limitation

The major limitation with `@okikio/sharedworker` is that on browsers that don't support `SharedWorker`, you can't use `@okikio/sharedworker` as a cross tab, communication tool. But for everything else it's feature parity and spec. compliance should be great.

## Conclusion

So, will you use it? Tell me below, or say Hi on [twitter](https://twitter.com/okikio_dev/status/1449083583684124679?s=20).

{% twitter 1449083583684124679 %}

* * *

[Image](https://unsplash.com/photos/_j9PDVy-WYg) from [Tengyart](https://unsplash.com/@tengyart) on [Unsplash](https://unsplash.com/).