Worklet.addModule()

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

addModule() は Worklet インターフェイスのメソッドで、指定した JavaScript ファイルで定義されるモジュールを現在の Worklet に読み込みます。

構文

addModule(moduleURL)
addModule(moduleURL, options)

引数

moduleURL

文字列で、追加するモジュールの JavaScript ファイルの URL を指定します。

options 省略可

次のオプションを指定するためのオブジェクトです。

credentials: モジュールをロードする際に、資格情報（例: Cookie や HTTP 認証）を送信するかどうかを指定する Request.credentials 値です。 "omit", "same-origin", "include" のいずれかを指定することができます。既定値は "same-origin" です。 Request.credentials も参照してください。

返値

指定された URL のモジュールが追加されると解決される Promise です。このプロミスは値を返しません。

例外

addModule() が失敗した場合、プロミスを拒否し、以下のいずれかのエラーを拒否ハンドラーに送出します。

AbortError DOMException: 指定されたスクリプトが無効であるか、または読み込むことができませんでした。
SyntaxError DOMException: 指定された moduleURL が無効です。

例

AudioWorklet の例

const audioCtx = new AudioContext();
const audioWorklet = audioCtx.audioWorklet;
audioWorklet.addModule('modules/bypassFilter.js', {
  credentials: 'omit',
});

PaintWorklet の例

CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js');

paintWorklet (en-US) がインクルードされると、 CSS の image/paint() 関数を使用して、ワークレットが作成した画像を引用することができます。

@supports (background-image: paint(id)) {
  h1 {
      background-image: paint(hollowHighlights, filled, 3px);
  }
}

仕様書

Specification
HTML Standard # dom-worklet-addmodule-dev

ブラウザーの互換性

BCD tables only load in the browser