recursal/MDN huggingface dataset:
WindowClient
============

The `WindowClient` interface of the ServiceWorker API represents the scope of a service worker client that is a document in a browsing context, controlled by an active worker. The service worker client independently selects and uses a service worker for its own loading and sub-resources.

Client

WindowClientInstance methods
----------------

*`WindowClient` inherits methods from its parent interface, `Client`.*

`WindowClient.focus()`

Gives user input focus to the current client.

`WindowClient.navigate()`

Loads a specified URL into a controlled client page.

Instance properties
-------------------

*`WindowClient` inherits properties from its parent interface, `Client`.*

`WindowClient.ancestorOrigins` Read only  
Experimental

An array of strings that indicates the ancestor origins of the browsing context represented by this `WindowClient` in reverse order.

`WindowClient.focused` Read only 

A boolean that indicates whether the current client has focus.

`WindowClient.visibilityState` Read only 

Indicates the visibility of the current client. This value can be one of `"hidden"`, `"visible"`, or `"prerender"`.

Example
-------


```js
self.addEventListener("notificationclick", (event) => {
  console.log("On notification click: ", event.notification.tag);
  event.notification.close();

  // This looks to see if the current is already open and
  // focuses if it is
  event.waitUntil(
    clients
      .matchAll({
        type: "window",
      })
      .then((clientList) => {
        for (const client of clientList) {
          if (client.url === "/" && "focus" in client) {
            client.focus();
            break;
          }
        }
        if (clients.openWindow) return clients.openWindow("/");
      }),
  );
});
```

Specifications
--------------

| Specification |
| --- |
| Service Workers # windowclient |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using Service Workers
* Service workers basic code example
* Using web workers
* Channel Messaging API
Worklet
=======

The **`Worklet`** interface is a lightweight version of `Web Workers` and gives developers access to low-level parts of the rendering pipeline.

With Worklets, you can run JavaScript and WebAssembly code to do graphics rendering or audio processing where high performance is required.

 Worklets allow static import of ECMAScript modules, if supported, using `import`.
 Dynamic import is disallowed by the specification — calling `import()` will throw.

Worklet types
-------------

Worklets are restricted to specific use cases; they cannot be used for arbitrary computations like Web Workers. The `Worklet` interface abstracts properties and methods common to all kind of worklets, and cannot be created directly. Instead, you can use one of the following classes:

| Name | Description | Location | Specification |
| --- | --- | --- | --- |
| `AudioWorklet` | For audio processing with custom AudioNodes. | Web Audio render thread | Web Audio API |
| `AnimationWorklet` | 
 For creating scroll-linked and other high performance procedural
 animations.
  | Compositor thread | CSS Animation Worklet API |
| `LayoutWorklet` | For defining the positioning and dimensions of custom elements. |  | CSS Layout API |
| `SharedStorageWorklet` | For running private operations on cross-site data, without risk of data leakage. | Main thread | Shared Storage API |

**Note:** Paint worklets, defined by the CSS Painting API, don't subclass `Worklet`. They are accessed through a regular `Worklet` object obtained using `CSS.paintWorklet`.

For 3D rendering with WebGL, you don't use worklets. Instead, you write vertex shaders and fragment shaders using GLSL code, and those shaders will then run on the graphics card.

Instance properties
-------------------

*The Worklet interface does not define any properties.*

Instance methods
----------------

`Worklet.addModule()`

Adds the script module at the given URL to the current worklet.

Specifications
--------------

| Specification |
| --- |
| HTML Standard # worklets-worklet |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Houdini: Demystifying CSS on Google Developers (2016)
* AudioWorklet :: What, Why, and How on YouTube (2017)
* Enter AudioWorklet on Google Developers (2017)
* Animation Worklet - HTTP203 Advent on YouTube (2017)
GPUCommandBuffer
================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`GPUCommandBuffer`** interface of the WebGPU API represents a pre-recorded list of GPU commands that can be submitted to a `GPUQueue` for execution.

A `GPUCommandBuffer` is created via the `GPUCommandEncoder.finish()` method; the GPU commands recorded within are submitted for execution by passing the `GPUCommandBuffer` into the parameter of a `GPUQueue.submit()` call.

**Note:** Once a `GPUCommandBuffer` object has been submitted, it cannot be used again.

Instance properties
-------------------

`label` 
Experimental

A string providing a label that can be used to identify the object, for example in `GPUError` messages or console warnings.

Examples
--------


```js
// ...

const commandBuffer = commandEncoder.finish();
device.queue.submit([commandBuffer]);
```


**Note:** Study the WebGPU samples to find complete examples.

Specifications
--------------

| Specification |
| --- |
| WebGPU # gpucommandbuffer |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The WebGPU API
RTCIceCandidateStats
====================

The **`RTCIceCandidateStats`** dictionary of the WebRTC API is used to report statistics related to an `RTCIceCandidate`.

The statistics can be obtained by iterating the `RTCStatsReport` returned by `RTCPeerConnection.getStats()` until you find a report with the `type` of `local-candidate`.

Instance properties
-------------------

`address` Optional

A string containing the address of the candidate. This value may be an IPv4 address, an IPv6 address, or a fully-qualified domain name. This property was previously named `ip` and only accepted IP addresses.

`candidateType`

A string matching one of the values in `RTCIceCandidate.type`, indicating what kind of candidate the object provides statistics for.

`deleted` Optional

A Boolean value indicating whether or not the candidate has been released or deleted; the default value is `false`. For local candidates, its value is `true` if the candidate has been deleted or released. For host candidates, `true` means that any network resources (usually a network socket) associated with the candidate have already been released. For TURN candidates, the TURN allocation is no longer active for deleted candidates. This property is not present for remote candidates.

`port` Optional

The network port number used by the candidate.

`priority` Optional

The candidate's priority, corresponding to `RTCIceCandidate.priority`.

`protocol` Optional

A string specifying the protocol (`tcp` or `udp`) used to transmit data on the `port`.

`relayProtocol` Optional

 A string identifying the protocol used by the endpoint for communicating with the TURN server; valid values are `tcp`, `udp`, and `tls`.
 Only present for local candidates.


`transportId`

A string uniquely identifying the transport object that was inspected in order to obtain the `RTCTransportStats` associated with the candidate corresponding to these statistics.

`url` Optional

 For local candidates, the `url` property is the URL of the ICE server from which the candidate was received.
 This URL matches the one included in the `RTCPeerConnectionIceEvent` object representing the `icecandidate` event that delivered the candidate to the local peer.


### Common instance properties

The following properties are common to all WebRTC statistics objects.

`id`

A string that uniquely identifies the object that is being monitored to produce this set of statistics.

`timestamp`

A `DOMHighResTimeStamp` object indicating the time at which the sample was taken for this statistics object.

`type`

A string with the value `"local-candidate"`, indicating the type of statistics that the object contains.

Examples
--------

TBD

Specifications
--------------

| Specification |
| --- |
| Identifiers for WebRTC's Statistics API # dom-rtcstatstype-local-candidate |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Clients
=======

The `Clients` interface provides access to `Client` objects. Access it via ``self`.clients` within a service worker.

Instance methods
----------------

`Clients.get()`

Returns a `Promise` for a `Client` matching a given `id`.

`Clients.matchAll()`

Returns a `Promise` for an array of `Client` objects. An options argument allows you to control the types of clients returned.

`Clients.openWindow()`

Opens a new browser window for a given URL and returns a `Promise` for the new `WindowClient`.

`Clients.claim()`

Allows an active service worker to set itself as the `controller` for all clients within its `scope`.

Examples
--------

The following example shows an existing chat window or creates a new one when the user clicks a notification.


```js
addEventListener("notificationclick", (event) => {
  event.waitUntil(
    (async () => {
      const allClients = await clients.matchAll({
        includeUncontrolled: true,
      });

      let chatClient;

      // Let's see if we already have a chat window open:
      for (const client of allClients) {
        const url = new URL(client.url);

        if (url.pathname === "/chat/") {
          // Excellent, let's use it!
          client.focus();
          chatClient = client;
          break;
        }
      }

      // If we didn't find an existing chat window,
      // open a new one:
      if (!chatClient) {
        chatClient = await clients.openWindow("/chat/");
      }

      // Message the client:
      chatClient.postMessage("New chat messages!");
    })(),
  );
});
```

Specifications
--------------

| Specification |
| --- |
| Service Workers # clients-interface |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using Service Workers
SVGFontFaceNameElement
======================

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The **`SVGFontFaceNameElement`** interface corresponds to the `<font-face-name>` elements.

Object-oriented access to the attributes of the `<font-face-name>` element via the SVG DOM is not possible.

Instance properties
-------------------

*This interface has no properties but inherits properties from its parent, `SVGElement`.*

Instance methods
----------------

*This interface has no methods but inherits methods from its parent, `SVGElement`.*

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # InterfaceSVGFontFaceNameElement |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<font-face-name>`
TrustedHTML
===========

The **`TrustedHTML`** interface of the `Trusted Types API` represents a string that a developer can insert into an injection sink that will render it as HTML. These objects are created via `TrustedTypePolicy.createHTML()` and therefore have no constructor.

The value of a **TrustedHTML** object is set when the object is created and cannot be changed by JavaScript as there is no setter exposed.

Instance methods
----------------

`TrustedHTML.toJSON()`

Returns a JSON representation of the stored data.

`TrustedHTML.toString()`

A string containing the sanitized HTML.

Examples
--------

In the below example we create a policy that will create `TrustedHTML` objects using `TrustedTypePolicyFactory.createPolicy()`. We can then use `TrustedTypePolicy.createHTML` to create a sanitized HTML string to be inserted into the document.

The sanitized value can then be used with `Element.innerHTML` to ensure that no new HTML elements can be injected.


```html
<div id="myDiv"></div>
```



```js
const escapeHTMLPolicy = trustedTypes.createPolicy("myEscapePolicy", {
  createHTML: (string) => string.replace(/</g, "&lt;"),
});

let el = document.getElementById("myDiv");
const escaped = escapeHTMLPolicy.createHTML("<img src=x onerror=alert(1)>");
console.log(escaped instanceof TrustedHTML); // true
el.innerHTML = escaped;
```

Specifications
--------------

| Specification |
| --- |
| Trusted Types # trusted-html |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Prevent DOM-based cross-site scripting vulnerabilities with Trusted Types
XRCubeLayer
===========

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`XRCubeLayer`** interface of the WebXR Device API is a layer that renders directly from a cubemap and projects it onto the inside faces of a cube.

`XRCubeLayer` requires the `layers` feature to be enabled for the `XRSession`. You can request it in `XRSystem.requestSession()`.

To create a new `XRCubeLayer`, call `XRWebGLBinding.createCubeLayer()`.

To present layers to the XR device, add them to the `layers` render state using `XRSession.updateRenderState()`.

EventTarget

XRLayer

XRCompositionLayer

XRCubeLayerInstance properties
-------------------

*Inherits properties from its parent, `XRCompositionLayer`.*

`XRCubeLayer.space` 
Experimental

An `XRSpace` representing the layer's spatial relationship with the user's physical environment.

`XRCubeLayer.orientation` 
Experimental

A `DOMPointReadOnly` representing the orientation relative to the `space` property.

Instance methods
----------------

*Inherits methods from its parents, `XRCompositionLayer` and `EventTarget`*.

Events
------

`redraw` 
Experimental

Sent to the `XRCubeLayer` object when the underlying resources of the layer are lost or when the XR Compositor can no longer reproject the layer. If this event is sent, authors should redraw the content of the layer in the next XR animation frame.

Specifications
--------------

| Specification |
| --- |
| WebXR Layers API Level 1 # xcubelayertype |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `XRLayer`
* `EventTarget`
* `XRCompositionLayer`
* `XREquirectLayer`
* `XRQuadLayer`
* `XRCylinderLayer`
* `XRProjectionLayer`
AudioDecoder
============

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`AudioDecoder`** interface of the WebCodecs API decodes chunks of audio.

EventTarget

AudioDecoderConstructor
-----------

`AudioDecoder()` 
Experimental

Creates a new `AudioDecoder` object.

Instance properties
-------------------

*Inherits properties from its parent, `EventTarget`.*

`AudioDecoder.decodeQueueSize` Read only  
Experimental

An integer representing the number of decode queue requests.

`AudioDecoder.state` Read only  
Experimental

Represents the state of the underlying codec and whether it is configured for decoding.

### Events

`dequeue` 
Experimental

Fires to signal a decrease in `AudioDecoder.decodeQueueSize`.

Static methods
--------------

`AudioDecoder.isConfigSupported()` 
Experimental

Returns a promise indicating whether the provided `AudioDecoderConfig` is supported.

Instance methods
----------------

*Inherits methods from its parent, `EventTarget`.*

`AudioDecoder.configure()` 
Experimental

Enqueues a control message to configure the audio decoder for decoding chunks.

`AudioDecoder.decode()` 
Experimental

Enqueues a control message to decode a given chunk of audio.

`AudioDecoder.flush()` 
Experimental

Returns a promise that resolves once all pending messages in the queue have been completed.

`AudioDecoder.reset()` 
Experimental

Resets all states including configuration, control messages in the control message queue, and all pending callbacks.

`AudioDecoder.close()` 
Experimental

Ends all pending work and releases system resources.

Specifications
--------------

| Specification |
| --- |
| WebCodecs # audiodecoder-interface |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
PaymentRequestUpdateEvent
=========================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The **`PaymentRequestUpdateEvent`** interface is used for events sent to a `PaymentRequest` instance when changes are made to shipping-related information for a pending `PaymentRequest`. Those events are:

`shippingaddresschange`

Dispatched whenever the user changes their shipping address.

`shippingoptionchange`

Dispatched whenever the user changes a shipping option.

Event

PaymentRequestUpdateEventConstructor
-----------

`PaymentRequestUpdateEvent()`

Creates a new `PaymentRequestUpdateEvent` object.

Instance properties
-------------------

*Provides only the properties inherited from its parent interface, `Event`.*

Instance methods
----------------

*In addition to methods inherited from the parent interface, `Event`, `PaymentRequestUpdateEvent` offers the following methods:*

`PaymentRequestUpdateEvent.updateWith()`

If the event handler determines that information included in the payment request needs to be changed, or that new information needs to be added, it calls `updateWith()` with the information that needs to be replaced or added.

Specifications
--------------

| Specification |
| --- |
| Payment Request API 1.1 # paymentrequestupdateevent-interface |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using the Payment Request API
Compression Streams API
=======================

The **Compression Streams API** provides a JavaScript API for compressing and decompressing streams of data using the gzip or deflate formats.

Built in compression means that JavaScript applications will not need to include a compression library, which makes the download size of the application smaller.

Interfaces
----------

`CompressionStream`

Compresses a stream of data.

`DecompressionStream`

Decompresses a stream of data.

Examples
--------

In this example a stream is compressed using gzip compression.


```js
const compressedReadableStream = inputReadableStream.pipeThrough(
  new CompressionStream("gzip"),
);
```


In the following example a function decompresses a blob using gzip.


```js
async function DecompressBlob(blob) {
  const ds = new DecompressionStream("gzip");
  const decompressedStream = blob.stream().pipeThrough(ds);
  return await new Response(decompressedStream).blob();
}
```

Specifications
--------------

| Specification |
| --- |
| Compression Streams # compression-stream |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
DocumentPictureInPictureEvent
=============================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`DocumentPictureInPictureEvent`** interface of the Document Picture-in-Picture API is the event object for the `enter` event, which fires when the Picture-in-Picture window is opened.

Event

DocumentPictureInPictureEventConstructor
-----------

`DocumentPictureInPictureEvent()` 
Experimental

Creates a new `DocumentPictureInPictureEvent` object instance.

Instance methods
----------------

*Inherits methods from its parent, `Event`.*

Instance properties
-------------------

*Inherits properties from its parent, `Event`.*

`window` Read only  
Experimental

Returns a `Window` instance representing the browsing context inside the `DocumentPictureInPicture` window the event was fired on.

Examples
--------


```js
documentPictureInPicture.addEventListener("enter", (event) => {
  const pipWindow = event.window;
  console.log("Video player has entered the pip window");

  const pipMuteButton = pipWindow.document.createElement("button");
  pipMuteButton.textContent = "Mute";
  pipMuteButton.addEventListener("click", () => {
    const pipVideo = pipWindow.document.querySelector("#video");
    if (!pipVideo.muted) {
      pipVideo.muted = true;
      pipMuteButton.textContent = "Unmute";
    } else {
      pipVideo.muted = false;
      pipMuteButton.textContent = "Mute";
    }
  });

  pipWindow.document.body.append(pipMuteButton);
});
```

Specifications
--------------

| Specification |
| --- |
| Document Picture-in-Picture Specification # documentpictureinpictureevent |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Document Picture-in-Picture API
* Using the Document Picture-in-Picture API
MediaEncryptedEvent: MediaEncryptedEvent() constructor
======================================================

The **`MediaEncryptedEvent`** constructor creates a new `MediaEncryptedEvent` object.

**Note:** In normal cases, you don't need to call this constructor in your code as such events are usually generated by the browser when needed.

Syntax
------


```js
new MediaEncryptedEvent(type)
new MediaEncryptedEvent(type, options)
```

### Parameters

`type`

 A string with the name of the event.
 It is case-sensitive and browsers always set it to `encrypted`.


`options` Optional

An object that, *in addition of the properties defined in `Event()`*, can have the following properties:

`initDataType`

A string with the type of the initialization data contained in this object

`message`

An `ArrayBuffer` with the initialization data, or `null` if there is none.


### Return value

A new `MediaEncryptedEvent` object.

Specifications
--------------

| Specification |
| --- |
| Encrypted Media Extensions # dom-mediaencryptedevent |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
MediaEncryptedEvent: initData property
======================================

The read-only **`initData`** property of the `MediaKeyMessageEvent` returns the initialization data contained in this event, if any.

Value
-----

A `ArrayBuffer` with the initialization data, or `null` if there are none.

Specifications
--------------

| Specification |
| --- |
| Encrypted Media Extensions # dom-mediaencryptedevent-initdata |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.