Shared Worker

<msc-shared-worker /> is a Web Component built on top of the native SharedWorker API. As a UI-less component, its primary purpose is to allow developers to quickly inject and initialize a SharedWorker simply by configuring its HTML attributes.

The following example demonstrates how <msc-shared-worker /> orchestrates the analysis of policy-violating product images. Once a user selects a product image, the request is routed through the SharedWorker to locate an idle tab to perform the on-device AI inference. Once complete, the results are sent back to the originating tab. Feel free to select a product image and try it out!

Current browser does't support Built-in AI.

Basic Usage

<msc-shared-worker /> is a web component. All we need to do is put the required script into your HTML document. Then follow <msc-shared-worker />'s html structure and everything will be all set.

Required Script

<script type="module" src="https://unpkg.com/msc-shared-worker/mjs/wc-msc-shared-worker.js"> </script>

Structure

Put <msc-shared-worker /> into HTML document. It will have different functions and looks with attribute mutation.

<msc-shared-worker> <script type="application/json"> { "src": "https://your-shared-worker-script.js", "options": { "name": "msc-shared-worker" } } </script> </msc-shared-worker>

JavaScript Instantiation

<msc-shared-worker /> could also use JavaScript to create DOM element. Here comes some examples.

<script type="module"> import { MscSharedWorker } from 'https://unpkg.com/msc-shared-worker/mjs/wc-msc-shared-worker.js'; // use DOM api const nodeA = document.createElement('msc-shared-worker'); nodeA.src = 'https://your-shared-worker-script.js'; document.body.appendChild(nodeA); // new instance with Class const nodeB = new MscSharedWorker(); nodeB.src = 'https://your-shared-worker-script.js'; nodeB.options = { name: 'msc-shared-worker' }; document.body.appendChild(nodeB); // new instance with Class & default config const config = { src: 'https://your-shared-worker-script.js' options: { name: 'msc-shared-worker', credentials: 'include' } }; const nodeC = new MscSharedWorker(config); document.body.appendChild(nodeC); </script>

Attributes

<msc-shared-worker /> supports some attributes to let it become more convenience & useful.

src

A TrustedScriptURL object or a string representing the URL of the script or module that the worker will execute. This must be same-origin with the caller's document, or a blob: or data: URL. The URL is resolved relative to the current HTML page's location.

<msc-shared-worker src="https://your-shared-worker-script.js" > </msc-shared-worker>

options

An object containing option properties that can be set when creating the object instance. Check the available properties.

<msc-shared-worker options='{"name":"msc-shared-worker","credentials":"include"}' > </msc-shared-worker>

Properties

Property Name Type Description
src String Getter / Setter the URL of the script or module that the worker will execute.
options Object Getter / Setter containing option properties that can be set when creating the object instance.

Mathod

Mathod Signature Description
postMessage Sends data to the SharedWorker.

Events

Event Signature Description
msc-shared-worker-message Fired when a message is received from the SharedWorker.
msc-shared-worker-error Fired when an error occurs in the worker.

Reference

Analysis Result

prudct image