recursal/MDN huggingface dataset:
FetchEvent: clientId property
=============================

 The **`clientId`** read-only property of the
 `FetchEvent` interface returns the id of the `Client` that the
 current service worker is controlling.

 The `Clients.get()` method could then be passed this ID to retrieve the
 associated client.

Value
-----

A string that represents the client ID.

Examples
--------


```js
self.addEventListener("fetch", (event) => {
  console.log(event.clientId);
});
```

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

| Specification |
| --- |
| Service Workers # fetch-event-clientid |

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
FetchEvent: request property
============================

 The **`request`** read-only property of the
 `FetchEvent` interface returns the `Request` that triggered
 the event handler.

 This property is non-nullable (since version 46, in the case of Firefox.) If a request
 is not provided by some other means, the constructor `options` object must
 contain a request (see `FetchEvent()`.)

Value
-----

A `Request` object.

Examples
--------

 This code snippet is from the service worker fetch sample (run the fetch sample live). The `onfetch` event handler
 listens for the `fetch` event. When fired, pass a promise that back to the
 controlled page to `FetchEvent.respondWith()`.
 This promise resolves to the first matching URL request in the `Cache`
 object. If no match is found, the code fetches a response from the network.

 The code also handles exceptions thrown from the
 `fetch()` operation. Note that an HTTP error
 response (e.g., 404) will not trigger an exception. It will return a normal response
 object that has the appropriate error code set.


```js
self.addEventListener("fetch", (event) => {
  console.log("Handling fetch event for", event.request.url);

  event.respondWith(
    caches.match(event.request).then((response) => {
      if (response) {
        console.log("Found response in cache:", response);

        return response;
      }
      console.log("No response found in cache. About to fetch from network…");

      return fetch(event.request)
        .then((response) => {
          console.log("Response from network is:", response);

          return response;
        })
        .catch((error) => {
          console.error("Fetching failed:", error);

          throw error;
        });
    }),
  );
});
```

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

| Specification |
| --- |
| Service Workers # fetch-event-request |

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
FetchEvent: FetchEvent() constructor
====================================

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

Syntax
------


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

### Parameters

`type`

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


`options`

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

`request`

The `Request` object that would have triggered the event handler.

`preloadResponse`

A `Promise` which returns a previously-loaded response to the client.

`clientId` Optional

The `Client` that the current service worker is controlling. It defaults to `""`.

`isReload` 
Deprecated
 Optional

 A boolean value that signifies whether the page was reloaded or not when
 the event was dispatched. `true` if yes, and `false` if not.
 Typically, pressing the refresh button in a browser is a reload, while clicking a
 link and pressing the back button is not. If not present, it defaults to
 `false`.


`replacesClientId` Optional

A string which identifies the client which is being replaced by `resultingClientId`. It defaults to `""`.

`resultingClientId` Optional

A string containing the new `clientId` if the client changes as a result of the page load. It defaults to `""`

`handled`

A *pending* promise that will be fulfilled once the event has been handled.


Return value
------------

A new `FetchEvent` object.

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

| Specification |
| --- |
| Service Workers # dom-fetchevent-fetchevent |

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

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

See also
--------

* `Promise`
* Fetch API
FetchEvent: preloadResponse property
====================================

The **`preloadResponse`** read-only property of the `FetchEvent` interface returns a `Promise` that resolves to the navigation preload `Response` if navigation preload was triggered, or `undefined` otherwise.

Navigation preload is triggered if navigation preload is enabled, the request is a `GET` request, and the request is a navigation request (generated by the browser when loading pages and iframes).

A service worker can wait on this promise in its fetch event handler in order to track completion of a fetch request made during service-worker boot.

Value
-----

A `Promise` that resolves to a `Response` or otherwise to `undefined`.

Examples
--------

This code snippet is from Speed up Service Worker with Navigation Preloads.

 The `onfetch` event handler listens for the `fetch` event.
 When fired, the handler calls `FetchEvent.respondWith()` to pass a promise back to the controlled page.
 This promise will resolve with the requested resource.

 If there is a matching URL request in the `Cache` object, then the code returns a promise for fetching the response from the cache.
 If no match is found in the cache, the code returns the promise in `preloadResponse`.
 If there is no matching cache or preloaded response, the code fetches the response from the network and returns the associated promise.


```js
addEventListener("fetch", (event) => {
  event.respondWith(
    (async () => {
      // Respond from the cache if we can
      const cachedResponse = await caches.match(event.request);
      if (cachedResponse) return cachedResponse;

      // Else, use the preloaded response, if it's there
      const response = await event.preloadResponse;
      if (response) return response;

      // Else try the network.
      return fetch(event.request);
    })(),
  );
});
```

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

| Specification |
| --- |
| Service Workers # fetch-event-preloadresponse |

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

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

See also
--------

* Speed up Service Worker with Navigation Preloads
* Using Service Workers
* Service workers basic code example
* Using web workers
FetchEvent: handled property
============================

The **`handled`** property of the `FetchEvent` interface returns a promise indicating if the event has been handled by the fetch algorithm or not. This property allows executing code after the browser has consumed a response, and is usually used together with the `waitUntil()` method.

Value
-----

A `Promise` that is pending while the event has not been handled, and fulfilled once it has.

Examples
--------


```js
addEventListener("fetch", (event) => {
  event.respondWith(
    (async function () {
      const response = await doCalculateAResponse(event.request);

      event.waitUntil(
        (async function () {
          await doSomeAsyncStuff(); // optional

          // Wait for the event to be consumed by the browser
          await event.handled;

          return doFinalStuff(); // Finalize AFTER the event has been consumed
        })(),
      );

      return response;
    })(),
  );
});
```

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

| Specification |
| --- |
| Service Workers # dom-fetchevent-handled |

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

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

See also
--------

* `ExtendableEvent.waitUntil()`
GPUAdapter: requestAdapterInfo() method
=======================================

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

 The **`requestAdapterInfo()`** method of the
 `GPUAdapter` interface returns a `Promise` that fulfills with a `GPUAdapterInfo` object containing identifying information about an adapter.

The intention behind this method is to allow developers to request specific details about the user's GPU so that they can preemptively apply workarounds for GPU-specific bugs, or provide different codepaths to better suit different GPU architectures. Providing such information does present a security risk — it could be used for fingerprinting — therefore the information shared is to be kept at a minimum, and different browser vendors are likely to share different information types and granularities.

**Note:** The specification includes an `unmaskHints` parameter for `requestAdapterInfo()`, which is intended to mitigate the security risk mentioned above. Once it is supported, developers will be able to specify the values they really need to know, and users will be given a permission prompt asking them if they are OK to share this information when the method is invoked. Browser vendors are likely to share more useful information if it is guarded by a permissions prompt, as it makes the method a less viable target for fingerprinting.

Syntax
------


```js
requestAdapterInfo()
```

### Parameters

None.

### Return value

A `Promise` that fulfills with a `GPUAdapterInfo` object instance.

Examples
--------


```js
async function init() {
  if (!navigator.gpu) {
    throw Error("WebGPU not supported.");
  }

  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    throw Error("Couldn't request WebGPU adapter.");
  }

  const adapterInfo = await adapter.requestAdapterInfo();
  console.log(adapterInfo.vendor);
  console.log(adapterInfo.architecture);

  // ...
}
```

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

| Specification |
| --- |
| WebGPU # dom-gpuadapter-requestadapterinfo |

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

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

See also
--------

* The WebGPU API
GPUAdapter: isFallbackAdapter property
======================================

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

 The **`isFallbackAdapter`** read-only property of the
 `GPUAdapter` interface returns `true` if the adapter is a fallback adapter, and `false` if not.

Value
-----

A boolean.

Examples
--------


```js
async function init() {
  if (!navigator.gpu) {
    throw Error('WebGPU not supported.');
  }

  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    throw Error('Couldn\'t request WebGPU adapter.');
  }

  const fallback = adapter.isFallbackAdapter;
  console.log(fallback);

  // ...
```

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

| Specification |
| --- |
| WebGPU # dom-gpuadapter-isfallbackadapter |

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

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

See also
--------

* The WebGPU API
GPUAdapter: limits property
===========================

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

 The **`limits`** read-only property of the
 `GPUAdapter` interface returns a `GPUSupportedLimits` object that describes the limits supported by the adapter.

You should note that, rather than reporting the exact limits of each GPU, browsers will likely report different tier values of different limits to reduce the unique information available to drive-by fingerprinting. For example, the tiers of a certain limit might be 2048, 8192, and 32768. If your GPU's actual limit is 16384, the browser will still report 8192.

Given that different browsers will handle this differently and the tier values may change over time, it is hard to provide an accurate account of what limit values to expect — thorough testing is advised.

Value
-----

A `GPUSupportedLimits` object instance.

Examples
--------

In the following code we query the `GPUAdapter.limits` value of `maxBindGroups` to see if it is equal to or greater than 6. Our theoretical example app ideally needs 6 bind groups, so if the returned value is >= 6, we add a maximum limit of 6 to the `requiredLimits` object, and request a device with that limit requirement using `GPUAdapter.requestDevice()`:


```js
async function init() {
  if (!navigator.gpu) {
    throw Error("WebGPU not supported.");
  }

  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    throw Error("Couldn't request WebGPU adapter.");
  }

  const requiredLimits = {};

  // App ideally needs 6 bind groups, so we'll try to request what the app needs
  if (adapter.limits.maxBindGroups >= 6) {
    requiredLimits.maxBindGroups = 6;
  }

  const device = await adapter.requestDevice({
    requiredLimits,
  });

  // ...
}
```

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

| Specification |
| --- |
| WebGPU # dom-gpuadapter-limits |

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

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

See also
--------

* The WebGPU API
GPUAdapter: features property
=============================

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

 The **`features`** read-only property of the
 `GPUAdapter` interface returns a `GPUSupportedFeatures` object that describes additional functionality supported by the adapter.

You should note that not all features will be available to WebGPU in all browsers that support it, even if the features are supported by the underlying hardware. This could be due to constraints in the underlying system, browser, or adapter. For example:

* The underlying system might not be able to guarantee exposure of a feature in a way that is compatible with a certain browser.
* The browser vendor might not have found a secure way to implement support for that feature, or might just not have gotten round to it yet.

If you are hoping to take advantage of a specific additional feature in a WebGPU app, thorough testing is advised.

Value
-----

A `GPUSupportedFeatures` object instance. This is a setlike object.

Examples
--------

In the following code we check whether a `GPUAdapter` has the `texture-compression-astc` feature available. If so, we push it into the array of `requiredFeatures`, and request a device with that feature requirement using `GPUAdapter.requestDevice()`


```js
async function init() {
  if (!navigator.gpu) {
    throw Error("WebGPU not supported.");
  }

  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    throw Error("Couldn't request WebGPU adapter.");
  }

  const requiredFeatures = [];

  if (adapter.features.has("texture-compression-astc")) {
    requiredFeatures.push("texture-compression-astc");
  }

  const device = await adapter.requestDevice({
    requiredFeatures,
  });

  // ...
}
```

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

| Specification |
| --- |
| WebGPU # dom-gpuadapter-features |

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

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

See also
--------

* The WebGPU API
RTCIceTransport: gatheringstatechange event
===========================================

A **`gatheringstatechange`** event is sent to an `RTCIceTransport` when its ICE candidate gathering state changes.

The gathering state, whose actual status can be found in the transport object's `gatheringState` property, indicates whether or not the ICE agent has begun gathering candidates, and if so, if it has finished doing so.

The key difference between `gatheringstatechange` and `icegatheringstatechange` is that the latter represents the overall state of the connection including every `RTCIceTransport` used by every `RTCRtpSender` and every `RTCRtpReceiver` on the entire connection. In contrast, `gatheringstatechange` represents changes to the candidate gathering state for a single transport.

This event is not cancelable and does not bubble.

Syntax
------

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


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

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

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

A generic `Event`.

Examples
--------

This example creates a handler for `gatheringstatechange` events on each `RTCRtpSender` associated with a given `RTCPeerConnection`. Here, the `addEventListener()` method is called to add a listener for `gatheringstatechange` events:


```js
pc.getSenders().forEach((sender) => {
  sender.transport.iceTransport.addEventListener(
    "gatheringstatechange",
    (ev) => {
      let transport = ev.target;

      if (transport.gatheringState === "complete") {
        /\* this transport has finished gathering candidates,
 but others may still be working on it \*/
      }
    },
    false,
  );
});
```


Likewise, you can use the `ongatheringstatechange` event handler property:


```js
pc.getSenders().forEach((sender) => {
  sender.transport.iceTransport.ongatheringstatechange = (ev) => {
    let transport = ev.target;

    if (transport.gatheringState === "complete") {
      /\* this transport has finished gathering candidates,
 but others may still be working on it \*/
    }
  };
});
```

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

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # event-icetransport-gatheringstatechange |
| WebRTC: Real-Time Communication in Browsers # dom-rtcicetransport-ongatheringstatechange |

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

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

See also
--------

* WebRTC API
* WebRTC connectivity
### Related RTCIceTransport events

* `statechange`
* `selectedcandidatepairchange`
### Related RTCPeerConnection events

* `negotiationneeded`
* `signalingstatechange`
* `iceconnectionstatechange`
* `icegatheringstatechange`
* `connectionstatechange`
RTCIceTransport: component property
===================================

 The read-only **`RTCIceTransport`**
 property **`component`** specifies whether the object is
 serving to transport RTP or RTCP.

Value
-----

A string which is one of the following:

`rtp`

Identifies an ICE transport which is being used for the Real-time Transport Protocol (RTP), or for RTP multiplexed with the RTP Control Protocol (RTCP). RTP is defined in RFC 3550. This value corresponds to the component ID field in the `candidate` a-line with the value 1.

`rtcp`

Identifies an ICE transport being used for RTCP, which is defined in RFC 3550, section 6. This value corresponds to the component ID 2.

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

#### No specification found

No specification data found for `api.RTCIceTransport.component`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

 The **`RTCIceTransport`** method
 **`getRemoteParameters()`** returns an
 `RTCIceParameters` object which provides information uniquely
 identifying the remote peer for the duration of the ICE session.

 The remote peer's parameters are received during ICE signaling and delivered to the
 transport when the client calls
 `RTCPeerConnection.setRemoteDescription()`.

Syntax
------


```js
getRemoteParameters()
```

### Parameters

None.

### Return value

 An `RTCIceParameters` object indicating the
 `usernameFragment` and
 `password` which uniquely identify the
 remote peer for the duration of the ICE session.

Returns `null` if the parameters haven't been received yet.

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

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcicetransport-getremoteparameters |

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

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

 The **`RTCIceTransport`** method
 **`getRemoteCandidates()`** returns an array which contains
 one `RTCIceCandidate` for each of the candidates that have been received
 from the remote peer so far during the current ICE gathering
 session.

 Each time your signaling code calls `RTCPeerConnection.addIceCandidate()`
 to add a received candidate to the ICE session, the ICE agent places it in the list
 returned by this function.

Syntax
------


```js
getRemoteCandidates()
```

### Parameters

None.

### Return value

 An array containing one `RTCIceCandidate` object for each candidate that
 has been received so far from the remote peer during the current ICE candidate gathering
 session.

 It's important to keep in mind that there's no way to correlate these remote candidates
 with compatible local candidates. To find the best match found so far, call
 `RTCIceTransport.getSelectedCandidatePair()`.

Example
-------

 This simple example gets the remote candidate list from the
 `RTCIceTransport` for the first `RTCRtpSender` on the
 `RTCPeerConnection`, then outputs to the console all of the candidates in
 the list.


```js
const remoteCandidates = pc
  .getSenders()[0]
  .transport.transport.getRemoteCandidates();

remoteCandidates.forEach((candidate, index) => {
  console.log(`Candidate ${index}: ${candidate.candidate}`);
});
```

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

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcicetransport-getremotecandidates |

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

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