Package Exports
- @okikio/sharedworker
- @okikio/sharedworker/lib/index.cjs
- @okikio/sharedworker/lib/index.js
- @okikio/sharedworker/lib/index.mjs
Readme
@okikio/sharedworker
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
.
Ponyfills are seperate modules that are included to replicate the functionality of the original API, but are not required to be used, while polyfills are update the original API on the global scope if it isn't supported in that specific environment or it's feature set is lacking compared to modern variations.
Installation
npm install sharedworker
Others
yarn add sharedworker
or
pnpm install sharedworker
Usage
import { SharedWorkerPolyfill as SharedWorker } from "@okikio/sharedworker";
// or
import SharedWorker from "@okikio/sharedworker";
You can also use it directly through a script tag:
<script src="https://unpkg.com/@okikio/sharedworker" type="module"></script>
<script type="module">
// You can then use it like this
const { SharedWorkerPolyfill: SharedWorker } = window.sharedworker;
</script>
You can also use it via a CDN, e.g.
import SharedWorker from "https://cdn.skypack.dev/@okikio/sharedworker";
// or
import SharedWorker from "https://cdn.jsdelivr.net/npm/@okikio/sharedworker";
// or any number of other CDN's
@okikio/sharedworker
supports the same API surface as the SharedWorker
and Worker
classes, except it adds some none spec. compliant properties and methods to the SharedWorkerPolyfill
class, this enables you to use SharedWorker
's on browsers that don't support it.
In order to support browsers that don't support SharedWorker
's the actual worker file needs to be setup slightly differently,
/*
* 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 }) => {
console.log("Cool")
};
};
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);
Note: make sure to read the comments in the above code carefully to avoid unexpected bugs.
Showcase
A couple sites that use @okikio/sharedworker
:
- astro.build/play - GitHub
- bundle.js.org - GitHub
- Your site here...
API
The basics of @okikio/sharedworker
rather closely match SharedWorker
's the main differences are that all the major methods and properties of SharedWorker.prototype.port
are available directly on SharedWorker.prototype
including addEventListener
and removeEventListener
.
Note: the normal functionality of the methods and properties that were already there on
SharedWorker.prototype
will still be kept intact.
In addition, the terminate()
method was added to @okikio/sharedworker
this allows both the close()
method (this is from SharedWorker.prototype.port
methods being available directly on SharedWorker.prototype
) and the terminate()
method to manually close workers.
Check out the API site for detailed API documentation.
Browser Support
Chrome | Edge | Firefox | Safari | IE |
---|---|---|---|---|
4+ | 12+ | 4+ | 4+ | 10+ |
Native support for SharedWorker
is not supported at all on Safari and IE, as well as all mobile browsers (excluding Firefox For Android).
Note: some features of
Workers
appeared at later versions of the spec., so, I suggest looking into the feature support table for Workers and SharedWorkers.
Contributing
I encourage you to use pnpm to for this repo, but you can also use yarn or npm if you prefer.
Install all necessary packages
npm install
Then run tests (WIP)
npm test
Build project
npm run build
Preview API Docs
npm run typedoc && npm run preview
Licence
See the LICENSE file for license rights and limitations (MIT).