This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The addModule()
method of the Worklet
interface loads the module in the given JavaScript file and adds it to the current Worklet
.
Syntax
addPromise = worklet.addModule(moduleURL); addPromise = worklet.addModule(moduleURL, options);
Parameters
moduleURL
- A
String
containing the URL of a JavaScript file with the module to add. options
Optional- An object with any of the following options:
credentials
: ARequestCredentials
value that indicates whether to send credentials (e.g. cookies and HTTP authentification) when loading the module. Can be one of"omit"
,"same-origin"
, or"include"
. Defaults to"same-origin"
. See alsoRequest.credentials
.
Return value
A Promise
that resolves once the module from the given URL has been added. The promise doesn't return any value.
Exceptions
If addModule()
fails, it rejects the promise, delivering one of the following errors to the rejection handler.
AbortError
- The specified script is invalid or could not be loaded.
SyntaxError
- The specified
moduleURL
is invalid.
Examples
AudioWorklet example
const audioCtx = new AudioContext(); const audioWorklet = audioCtx.audioWorklet; await audioWorklet.addModule('modules/bypassFilter.js', { credentials: 'omit', });
PaintWorklet example
CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js');
Once a paintWorklet
is included, the CSS paint()
function can be used to include the image created by the worklet:
@supports (background-image: paint(id)) { h1 { background-image: paint(hollowHighlights, filled, 3px); } }
Specifications
Specification | Status | Comment |
---|---|---|
Worklets Level 1 The definition of 'addModule()' in that specification. |
Working Draft |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
addModule | Chrome Full support 65 | Edge Full support 79 | Firefox
No support
No
| IE No support No | Opera Full support 52 | Safari No support No | WebView Android Full support 65 | Chrome Android Full support 65 | Firefox Android
No support
No
| Opera Android Full support 47 | Safari iOS No support No | Samsung Internet Android Full support 9.0 |
Legend
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.