recursal/MDN huggingface dataset:
ExtendableMessageEvent: origin property
=======================================

 The **`origin`** read-only property of the
 `ExtendableMessageEvent` interface returns the origin of the
 `Client` that sent the message.

Value
-----

A string.

Examples
--------

 When the following code is used inside a service worker to respond to a push messages
 by sending the data received via `PushMessageData` to the main context via
 a channel message, the event
 object of `onmessage` will be a `ExtendableMessageEvent`.


```js
let port;

self.addEventListener("push", (e) => {
  const obj = e.data.json();

  if (obj.action === "subscribe" || obj.action === "unsubscribe") {
    port.postMessage(obj);
  } else if (obj.action === "init" || obj.action === "chatMsg") {
    port.postMessage(obj);
  }
});

self.onmessage = (e) => {
  console.log(e.origin);
  port = e.ports[0];
};
```

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

| Specification |
| --- |
| Service Workers # extendablemessage-event-origin |

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
* Channel Messaging
ExtendableMessageEvent: source property
=======================================

 The **`source`** read-only property of the
 `ExtendableMessageEvent` interface returns a reference to the
 `Client` object from which the message was sent.

Value
-----

 A `Client`, `ServiceWorker` or `MessagePort`
 object.

Examples
--------

 When the following code is used inside a service worker to respond to a push messages
 by sending the data received via `PushMessageData` to the main context via
 a channel message, the event
 object of `onmessage` will be a `ExtendableMessageEvent`.


```js
let port;

self.addEventListener("push", (e) => {
  const obj = e.data.json();

  if (obj.action === "subscribe" || obj.action === "unsubscribe") {
    port.postMessage(obj);
  } else if (obj.action === "init" || obj.action === "chatMsg") {
    port.postMessage(obj);
  }
});

self.onmessage = (e) => {
  console.log(e.source);
  port = e.ports[0];
};
```

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

| Specification |
| --- |
| Service Workers # extendablemessage-event-source |

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
* Channel Messaging
ExtendableMessageEvent: ExtendableMessageEvent() constructor
============================================================

The **`ExtendableMessageEvent()`** constructor creates a new `ExtendableMessageEvent` object.

Syntax
------


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

### Parameters

`type`

 A string with the name of the event.
 It is case-sensitive and browsers set it to `messageerror` or `message`.


`options` Optional

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

`data` Optional

The event's data; this can be any data type. It defaults to `null`.

`origin` Optional

 A string that defines the origin of the corresponding service worker's environment settings object.
 It defaults to `""`.


`lastEventId` Optional

A string that defines the last event ID of the event source. It defaults to `""`.

`source` Optional

 The `Client`, `ServiceWorker` or `MessagePort` that sent the message.
 It defaults to `null`.


`ports` Optional

 An array containing the `MessagePort` objects connected to the channel sending the message.
 It defaults to an empty array.



### Return value

A new `ExtendableMessageEvent` object.

Examples
--------


```js
const options = {
  data: "hello message",
  source: MessagePortReference,
  ports: MessagePortListReference,
};

const myEME = new ExtendableMessageEvent("message", init);
```

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

| Specification |
| --- |
| Service Workers # dom-extendablemessageevent-extendablemessageevent |

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
* Channel Messaging
ExtendableMessageEvent: ports property
======================================

 The **`ports`** read-only property of the
 `ExtendableMessageEvent` interface returns the array containing the
 `MessagePort` objects representing the ports of the associated message
 channel (the channel the message is being sent through.)

Value
-----

An array of `MessagePort` objects.

Examples
--------

 When the following code is used inside a service worker to respond to a push messages
 by sending the data received via `PushMessageData` to the main context via
 a channel message, the event
 object of `onmessage` will be a `ExtendableMessageEvent`.


```js
let port;

self.addEventListener("push", (e) => {
  const obj = e.data.json();

  if (obj.action === "subscribe" || obj.action === "unsubscribe") {
    port.postMessage(obj);
  } else if (obj.action === "init" || obj.action === "chatMsg") {
    port.postMessage(obj);
  }
});

self.onmessage = (e) => {
  port = e.ports[0];
};
```

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

| Specification |
| --- |
| Service Workers # extendablemessage-event-ports |

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
* Channel Messaging
ExtendableMessageEvent: lastEventId property
============================================

 The **`lastEventID`** read-only property of the
 `ExtendableMessageEvent` interface represents, in server-sent events, the last event ID of the event source. This is an empty string.

Value
-----

A string.

Examples
--------

 When the following code is used inside a service worker to respond to a push messages
 by sending the data received via `PushMessageData` to the main context via
 a channel message, the event
 object of `onmessage` will be a `ExtendableMessageEvent`.


```js
let port;

self.addEventListener("push", (e) => {
  const obj = e.data.json();

  if (obj.action === "subscribe" || obj.action === "unsubscribe") {
    port.postMessage(obj);
  } else if (obj.action === "init" || obj.action === "chatMsg") {
    port.postMessage(obj);
  }
});

self.onmessage = (e) => {
  console.log(e.lastEventId);
  port = e.ports[0];
};
```

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

| Specification |
| --- |
| Service Workers # extendablemessage-event-lasteventid |

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
* Channel Messaging
ExtendableMessageEvent: data property
=====================================

 The **`data`** read-only property of the
 `ExtendableMessageEvent` interface returns the event's data. It can be any
 data type.

Value
-----

Any data type.

Examples
--------

 When the following code is used inside a service worker to respond to a push messages
 by sending the data received via `PushMessageData` to the main context via
 a channel message, the event
 object of `onmessage` will be a `ExtendableMessageEvent`.


```js
let port;

self.addEventListener("push", (e) => {
  const obj = e.data.json();

  if (obj.action === "subscribe" || obj.action === "unsubscribe") {
    port.postMessage(obj);
  } else if (obj.action === "init" || obj.action === "chatMsg") {
    port.postMessage(obj);
  }
});

self.onmessage = (e) => {
  console.log(e.data);
  port = e.ports[0];
};
```

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

| Specification |
| --- |
| Service Workers # extendablemessage-event-data |

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
* Channel Messaging
SharedStorageWorkletGlobalScope: register() method
==================================================

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

 The **`register()`** method of the
 `SharedStorageWorkletGlobalScope` interface registers an operation defined inside the current worklet module.

Syntax
------


```js
register(name, operationCtor)
```

### Parameters

`name`

A string representing the name with which you want to register the operation. When the operation is invoked (say via `WindowSharedStorage.run()` or `WindowSharedStorage.selectURL()`), this name is used to identify the operation you want to run.

`operationCtor`

A string representing the class name of the operation to be registered. This is the class constructor that is invoked when the operation is run.

### Return value

None (`undefined`).

### Exceptions

`TypeError`

Thrown if:

* An operation has already been registered with the specified name.
* The `operationCtor` is not a valid constructor.
* The class does not contain a valid `run()` method.
* The worklet module has not been added with `SharedStorageWorklet.addModule()`.

Examples
--------


```js
// ab-testing-worklet.js
class SelectURLOperation {
  async run(urls, data) {
    // Read the user's experiment group from shared storage
    const experimentGroup = await this.sharedStorage.get("ab-testing-group");

    // Return the group number
    return experimentGroup;
  }
}

register("ab-testing", SelectURLOperation);
```


See the Shared Storage API landing page for a walkthrough of this example and for links to other examples.

**Note:** It is possible to define and register multiple operations in the same shared storage worklet module script with different names; see `SharedStorageOperation` for an example.

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

| Specification |
| --- |
| Shared Storage API # dom-sharedstorageworkletglobalscope-register |

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

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

See also
--------

* Shared Storage API
SharedStorageWorkletGlobalScope: sharedStorage property
=======================================================

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

 The **`context`** read-only property of the
 `SharedStorageWorkletGlobalScope` interface contains a `WorkletSharedStorage` object instance, which represents the shared storage for a particular origin as exposed to a worklet context.

Value
-----

A `WorkletSharedStorage` object instance.

Examples
--------


```js
// ab-testing-worklet.js
class SelectURLOperation {
  async run(urls, data) {
    // Read the user's experiment group from shared storage
    const experimentGroup = await this.sharedStorage.get("ab-testing-group");

    // Return the group number
    return experimentGroup;
  }
}

register("ab-testing", SelectURLOperation);
```

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

| Specification |
| --- |
| Shared Storage API # dom-sharedstorageworkletglobalscope-sharedstorage |

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

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

See also
--------

* Shared Storage API
XRTransientInputHitTestSource: cancel() method
==============================================

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

The **`cancel()`** method of the `XRTransientInputHitTestSource` interface unsubscribes a transient input hit test.

Syntax
------


```js
cancel()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------

### Unsubscribe from hit test

The `cancel()` method unsubscribes from a transient input hit test source. Since the `XRTransientInputHitTestSource` object will no longer be usable, you can clean up and set it to `null`.


```js
transientHitTestSource.cancel();
transientHitTestSource = null;
```

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

| Specification |
| --- |
| WebXR Hit Test Module # dom-xrtransientinputhittestsource-cancel |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Keyboard: getLayoutMap() method
===============================

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

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

 The **`getLayoutMap()`** method of the
 `Keyboard` interface returns a `Promise` that resolves with
 an instance of `KeyboardLayoutMap` which is a map-like object with
 functions for retrieving the strings associated with specific physical keys.

Syntax
------


```js
getLayoutMap()
```

### Parameters

None.

### Return value

 A `Promise` that resolves with an instance of
 `KeyboardLayoutMap`.

### Exceptions

`SecurityError` `DOMException`

Thrown if the call is blocked by a permission policy.

Examples
--------

 The following example demonstrates how to get the location- or layout-specific string
 associated with the key that corresponds to the 'W' key on an English QWERTY keyboard.


```js
const keyboard = navigator.keyboard;
keyboard.getLayoutMap().then((keyboardLayoutMap) => {
  const upKey = keyboardLayoutMap.get("KeyW");
  window.alert(`Press ${upKey} to move up.`);
});
```

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

| Specification |
| --- |
| Keyboard Map # h-keyboard-getlayoutmap |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Keyboard: unlock() method
=========================

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

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

 The **`unlock()`** method of the
 `Keyboard` interface unlocks all keys captured by the
 `Keyboard.lock()` method and returns synchronously.

Syntax
------


```js
unlock()
```

### Parameters

None.

### Return value

None (`undefined`).

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

| Specification |
| --- |
| Keyboard Lock # h-keyboard-unlock |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Keyboard: lock() method
=======================

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

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

 The **`lock()`** method of the
 `Keyboard` interface returns a `Promise` after enabling the
 capture of keypresses for any or all of the keys on the physical keyboard. This method
 can only capture keys that are granted access by the underlying operating
 system.

 If `lock()` is called multiple times then only the key codes specified in the most recent call will be locked.
 Any keys locked by a previous call to `lock()` are unlocked.

Syntax
------


```js
lock()
lock(keyCodes)
```

### Parameters

`keyCodes` Optional

 An `Array` of one or more key codes to lock. If no keycodes are provided
 all keys will be locked. A list of valid code values is found in the UI Events KeyboardEvent code Values spec.


### Return value

A `Promise` that resolves with `undefined` when the lock was successful.

### Exceptions

`AbortError` `DOMException`

Thrown if a new call to `lock()` is made before the current one has finished.

`InvalidAccessError` `DOMException`

Thrown if any key in `keyCodes` is not a valid key code attribute value.

`InvalidStateError` `DOMException`

Thrown if `lock()` is not called in an active top-level browsing context.

Security
--------

Transient user activation is required. The user has to interact with the page or a UI element in order for this feature to work.

Examples
--------

### Capturing all keys

The following example captures all keypresses.


```js
navigator.keyboard.lock();
```

### Capturing specific keys

 The following example captures the "W", "A", "S", and "D" keys. It captures these keys
 regardless of which modifiers are used with the key press. Assuming a standard US QWERTY
 layout, registering `"KeyW"` ensures that "W", Shift+"W", Control+"W",
 Control+Shift+"W", and all other key modifier combinations with "W" are sent to the app.
 The same applies to for `"KeyA"`, `"KeyS"` and
 `"KeyD"`.


```js
navigator.keyboard.lock(["KeyW", "KeyA", "KeyS", "KeyD"]);
```

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

| Specification |
| --- |
| Keyboard Lock # h-keyboard-lock |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
TextEncoder: encode() method
============================

The **`TextEncoder.encode()`** method takes a string as input, and returns a `Uint8Array` containing the text given in parameters encoded with the specific method for that `TextEncoder` object.

Syntax
------


```js
encode(string)
```

### Parameters

`string`

A string containing the text to encode.

### Return value

A `Uint8Array` object.

Examples
--------


```html
<p class="source">This is a sample paragraph.</p>
<p class="result">Encoded result:</p>
```



```js
const sourcePara = document.querySelector(".source");
const resultPara = document.querySelector(".result");
const string = sourcePara.textContent;

const textEncoder = new TextEncoder();

let encoded = textEncoder.encode(string);
resultPara.textContent += encoded;
```

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

| Specification |
| --- |
| Encoding Standard # ref-for-dom-textencoder-encode① |

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

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

See also
--------

* The `TextEncoder` interface it belongs to.
TextEncoder: TextEncoder() constructor
======================================

The **`TextEncoder()`** constructor returns a newly created `TextEncoder` object that will generate a byte stream with UTF-8 encoding.

Syntax
------


```js
new TextEncoder()
```

### Parameters

None.

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

| Specification |
| --- |
| Encoding Standard # ref-for-dom-textencoder① |

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

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

See also
--------

* The `TextEncoder` interface it belongs to.
TextEncoder: encoding property
==============================

The **`TextEncoder.encoding`** read-only property returns a string containing the name of the encoding algorithm used by the specific encoder.

It can only have the following value `utf-8`.

Value
-----

A string with the value `utf-8`.

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

| Specification |
| --- |
| Encoding Standard # dom-textencoder-encoding |

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

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

See also
--------

* The `TextEncoder` interface it belongs to.
Credential: id property
=======================

 The **`id`** property of the
 `Credential` interface returns a string containing the
 credential's identifier. This might be any one of a GUID, username, or email
 address.

Value
-----

A string containing the credential's identifier.

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

| Specification |
| --- |
| Credential Management Level 1 # dom-credential-id |

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

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

 The **`type`** property of the
 `Credential` interface returns a string containing the
 credential's type. Valid values are `password`, `federated` and
 `public-key`.

Value
-----

A string contains a credential's given name.

Examples
--------


```js
// TBD
```

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

| Specification |
| --- |
| Credential Management Level 1 # dom-credential-type |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
IdleDetector: change event
==========================

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 **`change`** event of the `IdleDetector` interface fires when the value of `userState` or `screenState` has changed.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("change", (event) => {});

onchange = (event) => {};
```

Event type
----------

A generic `Event`.

Example
-------

In the following example, the `change` callback prints the status of `userState` and `screenState` to the console.


```js
idleDetector.addEventListener("change", () => {
  const userState = idleDetector.userState;
  const screenState = idleDetector.screenState;
  console.log(`Idle change: ${userState}, ${screenState}.`);
});
```

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

| Specification |
| --- |
| Idle Detection API # api-idledetector-onchange |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
IdleDetector: requestPermission() static method
===============================================

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 **`requestPermission()`** static method of the `IdleDetector`
 interface returns a `Promise` that resolves with a string when the user has chosen
 whether to grant the origin access to their idle state. Resolves with
 `"granted"` on acceptance and `"denied"` on refusal.

Syntax
------


```js
IdleDetector.requestPermission()
```

### Parameters

None.

### Return value

A `Promise` that resolves with `"granted"` or `"denied"`.

Security
--------

Transient user activation is required. The user has to interact with the page or a UI element in order for this feature to work.

Examples
--------

The following example uses a `click` event on a button to trigger requesting the user for permission to detect when user is idle.


```js
startButton.addEventListener("click", async () => {
  if ((await IdleDetector.requestPermission()) !== "granted") {
    console.error("Idle detection permission denied.");
    return;
  }
});
```

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

| Specification |
| --- |
| Idle Detection API # api-idledetector-requestpermission |

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

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