recursal/MDN huggingface dataset:
ServiceWorkerGlobalScope: cookiechange event
============================================

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

The **`cookiechange`** event of the `ServiceWorkerGlobalScope` interface is fired when a cookie change occurs that matches the service worker's cookie change subscription list.

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("cookiechange", (event) => {});

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

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

An `ExtendableCookieChangeEvent`. Inherits from `ExtendableEvent`.

Event

ExtendableEvent

ExtendableCookieChangeEventSpecifications
--------------

| Specification |
| --- |
| Cookie Store API # dom-serviceworkerglobalscope-oncookiechange |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ServiceWorkerGlobalScope: backgroundfetchclick 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
**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`backgroundfetchclick`** event of the `ServiceWorkerGlobalScope` interface is fired when the user clicks on the UI that the browser provides to show the user the progress of the background fetch operation.

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("backgroundfetchclick", (event) => {});

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

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

A `BackgroundFetchEvent`.

Event

ExtendableEvent

BackgroundFetchEventEvent properties
----------------

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

`BackgroundFetchEvent.registration`

Returns the `BackgroundFetchRegistration` whose progress dialog the user clicked on.

Description
-----------

When a background fetch operation starts, the browser shows a UI element to the user to indicate the progress of the operation. If the user clicks this element, the browser starts the service worker, if necessary, and fires the `backgroundfetchclick` event in the service worker's global scope.

A common task for the handler in this situation is to open a window giving the user more details about the fetch operation.

Examples
--------

### Opening a window with more details

This event handler uses the global `clients` property to open a window giving the user more details about the fetch. It opens a different window depending on whether the fetch has completed or not.


```js
addEventListener("backgroundfetchclick", (event) => {
  const registration = event.registration;

  if (registration.result === "success") {
    clients.openWindow("/play-movie");
  } else {
    clients.openWindow("/movie-download-progress");
  }
});
```

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

| Specification |
| --- |
| Background Fetch # dom-serviceworkerglobalscope-onbackgroundfetchclick |

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

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

See also
--------

* Background Fetch API
ServiceWorkerGlobalScope: backgroundfetchfail 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
**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`backgroundfetchfail`** event of the `ServiceWorkerGlobalScope` interface is fired when a background fetch operation has failed: that is, when at least one network request in the fetch has failed to complete successfully.

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("backgroundfetchfail", (event) => {});

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

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

A `BackgroundFetchUpdateUIEvent`.

Event

ExtendableEvent

BackgroundFetchEvent

BackgroundFetchUpdateUIEventEvent properties
----------------

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

`BackgroundFetchUpdateUIEvent.updateUI()`

Updates the UI of the element that the browser displays to show the progress of the fetch operation.

Description
-----------

When a background fetch operation fails (meaning that at least one of the individual network requests has not completed successfully), the browser starts the service worker, if necessary, and fires the `backgroundfetchfail` event in the service worker's global scope.

In the background fetch API, the browser shows a UI element to the user to indicate the progress of the operation. In the `backgroundfetchfail` handler, the service worker can update that UI to show that the operation has failed. To do this, the handler calls the event's `updateUI()` method, passing in a new title and/or icons.

In the handler for this `backgroundfetchfail`, the service worker can also clean up any related data for the operation. It can also retrieve and store any successful responses (for example, using the `Cache` API). To access the response data, the service worker uses the event's `registration` property.

Examples
--------

### Updating UI

This event handler updates the UI to let the user know that the operation failed.


```js
addEventListener("backgroundfetchfail", (event) => {
  event.updateUI({ title: "Could not complete download" });
});
```

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

| Specification |
| --- |
| Background Fetch # dom-serviceworkerglobalscope-onbackgroundfetchfail |

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

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

See also
--------

* Background Fetch API
ServiceWorkerGlobalScope: install event
=======================================

The **`install`** event of the `ServiceWorkerGlobalScope` interface is fired when a `ServiceWorkerRegistration` acquires a new `ServiceWorkerRegistration.installing` worker.

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("install", (event) => {});

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

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

An `ExtendableEvent`. Inherits from `Event`.

Event

ExtendableEventEvent properties
----------------

*Doesn't implement any specific properties, but inherits properties from its parent, `Event`.*

Examples
--------

The following snippet shows how an `install` event handler can be used to populate a cache with a number of responses, which the service worker can then use to serve assets offline:


```js
self.addEventListener("install", (event) => {
  event.waitUntil(
    caches
      .open("v1")
      .then((cache) =>
        cache.addAll([
          "/",
          "/index.html",
          "/style.css",
          "/app.js",
          "/image-list.js",
          "/star-wars-logo.jpg",
          "/gallery/",
          "/gallery/bountyHunters.jpg",
          "/gallery/myLittleVader.jpg",
          "/gallery/snowTroopers.jpg",
        ]),
      ),
  );
});
```


You can also set up the event handler using the `oninstall` property:


```js
self.oninstall = (event) => {
  // ...
};
```

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

| Specification |
| --- |
| Service Workers # dom-serviceworkerglobalscope-oninstall |

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

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

See also
--------

* `activate` event
* `ServiceWorkerGlobalScope`
* Service Worker API
ServiceWorkerGlobalScope: clients property
==========================================

 The **`clients`** read-only property of the
 `ServiceWorkerGlobalScope` interface returns the `Clients`
 object associated with the service worker.

Value
-----

The `Clients` object associated with the specific worker.

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

| Specification |
| --- |
| Service Workers # service-worker-global-scope-clients |

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
ServiceWorkerGlobalScope: canmakepayment event
==============================================

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

The **`canmakepayment`** event of the `ServiceWorkerGlobalScope` interface is fired on a payment app's service worker to check whether it is ready to handle a payment. Specifically, it is fired when the merchant website calls `new PaymentRequest()`.

Syntax
------

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


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

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

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

A `CanMakePaymentEvent`. Inherits from `ExtendableEvent`.

Event

ExtendableEvent

CanMakePaymentEventExamples
--------

The `canmakepayment` event is fired on a payment app's service worker to check whether it is ready to handle a payment. Specifically, it is fired when the merchant website calls `new PaymentRequest()`. The service worker can then use the `CanMakePaymentEvent.respondWith()` method to respond appropriately:


```js
self.addEventListener("canmakepayment", (e) => {
  e.respondWith(
    new Promise((resolve, reject) => {
      someAppSpecificLogic()
        .then((result) => {
          resolve(result);
        })
        .catch((error) => {
          reject(error);
        });
    }),
  );
});
```


`respondWith()` returns a `Promise` that resolves with a boolean value to signal that the service worker is ready to handle a payment request (`true`), or not (`false`).

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

| Specification |
| --- |
| Payment Handler API # the-canmakepaymentevent |

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

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

See also
--------

* Payment Handler API
* Web-based payment apps overview
* Setting up a payment method
* Life of a payment transaction
* Using the Payment Request API
* Payment processing concepts
ServiceWorkerGlobalScope: serviceWorker property
================================================

The **`serviceWorker`** read-only property of the `ServiceWorkerGlobalScope` interface returns a reference to the `ServiceWorker` object, which represents the service worker.

Value
-----

A `ServiceWorker` object.

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

| Specification |
| --- |
| Service Workers # dom-serviceworkerglobalscope-serviceworker |

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

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

See also
--------

* Using Service Workers
ServiceWorkerGlobalScope: notificationclose event
=================================================

The **`notificationclose`** event fires when a user closes a displayed notification spawned by `ServiceWorkerRegistration.showNotification()`.

 Notifications created on the main thread or in workers which aren't service workers
 using the `Notification()` constructor will
 instead receive a `close` event on the `Notification` object
 itself.


**Note:** Trying to create a notification inside the
 `ServiceWorkerGlobalScope` using the
 `Notification()` constructor will throw an
 error.


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("notificationclose", (event) => {});

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

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

A `NotificationEvent`. Inherits from `Event`.

Event

ExtendableEvent

NotificationEventEvent properties
----------------

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

`NotificationEvent.notification` Read only 

Returns a `Notification` object representing the notification that was clicked to fire the event.

`NotificationEvent.action` Read only 

Returns the string ID of the notification button the user clicked. This value returns an empty string if the user clicked the notification somewhere other than an action button, or the notification does not have a button.

Example
-------


```js
//Inside a service worker.
self.onnotificationclose = (event) => {
  console.log("On notification close: ", event.notification.tag);
};
```

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

| Specification |
| --- |
| Notifications API Standard # dom-serviceworkerglobalscope-onnotificationclose |

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

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

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

The **`cookieStore`** read-only property of the `ServiceWorkerGlobalScope` interface returns a reference to the `CookieStore` object associated with this service worker.

Value
-----

A `CookieStore` object instance.

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

| Specification |
| --- |
| Cookie Store API # dom-serviceworkerglobalscope-cookiestore |

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

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

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

The **`contentdelete`** event of the `ServiceWorkerGlobalScope` interface is fired when an item is removed from the indexed content via the user agent.

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("contentdelete", (event) => {});

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

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

A `ContentIndexEvent`. Inherits from `Event`.

Event

ExtendableEvent

ContentIndexEventEvent properties
----------------

*In addition to the properties listed below, this interface inherits the properties of its parent interface, `Event`.*

`id` Read only 

A string which identifies the deleted content index via it's `id`.

Examples
--------

The following example uses a `contentdelete` event handler to remove cached content related to the deleted index item.


```js
self.addEventListener("contentdelete", (event) => {
  const deletion = caches
    .open("cache-name")
    .then((cache) =>
      Promise.all([
        cache.delete(`/icon/${event.id}`),
        cache.delete(`/content/${event.id}`),
      ]),
    );
  event.waitUntil(deletion);
});
```


You can also set up the event handler using the `oncontentdelete` property:


```js
self.oncontentdelete = (event) => {
  // ...
};
```

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

| Specification |
| --- |
| Content Index # dom-serviceworkerglobalscope-oncontentdelete |

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

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

See also
--------

* Content index API
* An introductory article on the Content Index API
* An app which uses the Content Index API to list and remove 'save for later' content
ServiceWorkerGlobalScope: periodicsync event
============================================

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

The **`periodicsync`** event of the `ServiceWorkerGlobalScope` interface is fired at timed intervals, specified when registering a `PeriodicSyncManager`.

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("periodicsync", (event) => {});

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

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

A `PeriodicSyncEvent`. Inherits from `Event`.

Event

ExtendableEvent

PeriodicSyncEventEvent properties
----------------

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

`PeriodicSyncEvent.tag` Read only 

Returns the developer-defined identifier for this `PeriodicSyncEvent`. Multiple tags can be used by the web app to run different periodic tasks at different frequencies.

Examples
--------

The following example shows how to respond to a periodic sync event in the service worker.


```js
self.addEventListener("periodicsync", (event) => {
  if (event.tag === "get-latest-news") {
    event.waitUntil(fetchAndCacheLatestNews());
  }
});
```


You can also set up the event handler using the `onperiodicsync` property:


```js
self.onperiodicsync = (event) => {
  // ...
};
```

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

| Specification |
| --- |
| Web Periodic Background Synchronization # periodicsync-event |
| Web Periodic Background Synchronization # dom-serviceworkerglobalscope-onperiodicsync |

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

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

See also
--------

* Richer offline experiences with the Periodic Background Sync API
* A Periodic Background Sync demo app
ServiceWorkerGlobalScope: message event
=======================================

 The **`message`** event of the `ServiceWorkerGlobalScope` interface occurs when incoming messages are received. Controlled pages can use the `ServiceWorker.postMessage()` method to send messages to service workers.
 The service worker can optionally send a response back via the `Client.postMessage()`, corresponding to the controlled page.

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("message", (event) => {});

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

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

An `ExtendableMessageEvent`. Inherits from `ExtendableEvent`.

Event

ExtendableEvent

ExtendableMessageEventEvent properties
----------------

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

`ExtendableMessageEvent.data` Read only 

Returns the event's data. It can be any data type. If dispatched in `messageerror` event, the property will be `null`.

`ExtendableMessageEvent.origin` Read only 

Returns the origin of the `Client` that sent the message.

`ExtendableMessageEvent.lastEventId` Read only 

Represents, in server-sent events, the last event ID of the event source.

`ExtendableMessageEvent.source` Read only 

Returns a reference to the `Client` object that sent the message.

`ExtendableMessageEvent.ports` Read only 

Returns the array containing the `MessagePort` objects representing the ports of the associated message channel.

Examples
--------

In the below example a page gets a handle to the `ServiceWorker` object via `ServiceWorkerRegistration.active`, and then calls its `postMessage()` function.


```js
// main.js
if (navigator.serviceWorker) {
  navigator.serviceWorker.register("service-worker.js");

  navigator.serviceWorker.addEventListener("message", (event) => {
    // event is a MessageEvent object
    console.log(`The service worker sent me a message: ${event.data}`);
  });

  navigator.serviceWorker.ready.then((registration) => {
    registration.active.postMessage("Hi service worker");
  });
}
```


The service worker can receive the message by listening to the `message` event:


```js
// service-worker.js
addEventListener("message", (event) => {
  // event is an ExtendableMessageEvent object
  console.log(`The client sent me a message: ${event.data}`);

  event.source.postMessage("Hi client");
});
```


Alternatively, the script can listen for the message using `onmessage`:


```js
// service-worker.js
self.onmessage = (event) => {
  // event is an ExtendableMessageEvent object
  console.log(`The client sent me a message: ${event.data}`);

  event.source.postMessage("Hi client");
};
```

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

| Specification |
| --- |
| Service Workers # eventdef-serviceworkerglobalscope-message |
| Service Workers # dom-serviceworkerglobalscope-onmessage |

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
ServiceWorkerGlobalScope: messageerror event
============================================

The **`messageerror`** event of the `ServiceWorkerGlobalScope` interface occurs when incoming messages can't be deserialized.

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("messageerror", (event) => {});

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

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

An `ExtendableMessageEvent`. Inherits from `ExtendableEvent`.

Event

ExtendableEvent

ExtendableMessageEventEvent properties
----------------

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

`ExtendableMessageEvent.data` Read only 

Returns the event's data. It can be any data type. If dispatched in `messageerror` event, the property will be `null`.

`ExtendableMessageEvent.origin` Read only 

Returns the origin of the `Client` that sent the message.

`ExtendableMessageEvent.lastEventId` Read only 

Represents, in server-sent events, the last event ID of the event source.

`ExtendableMessageEvent.source` Read only 

Returns a reference to the `Client` object that sent the message.

`ExtendableMessageEvent.ports` Read only 

Returns the array containing the `MessagePort` objects representing the ports of the associated message channel.

Examples
--------

In the below example a page gets a handle to the `ServiceWorker` object via `ServiceWorkerRegistration.active`, and then calls its `postMessage()` function.


```js
// main.js
if (navigator.serviceWorker) {
  navigator.serviceWorker.register("service-worker.js");

  navigator.serviceWorker.addEventListener("message", (event) => {
    // event is a MessageEvent object
    console.log(`The service worker sent me a message: ${event.data}`);
  });

  navigator.serviceWorker.ready.then((registration) => {
    registration.active.postMessage("Hi service worker");
  });
}
```


The service worker can listen for the message deserialization error by listening to the `messageerror` event:


```js
// service-worker.js
self.addEventListener("messageerror", (event) => {
  // event is an ExtendableMessageEvent object
  console.error("Message deserialization failed");
});
```


Alternatively, the script can listen for the message deserialization error using `onmessageerror`:


```js
// service-worker.js
self.onmessageerror = (event) => {
  // event is an ExtendableMessageEvent object
  console.error("Message deserialization failed");
};
```

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

| Specification |
| --- |
| Service Workers # eventdef-serviceworkerglobalscope-messageerror |
| Service Workers # dom-serviceworkerglobalscope-onmessageerror |

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

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

See also
--------

* `message`
* `ServiceWorker.postMessage()`
* Using Service Workers
* Service workers basic code example
* Using web workers