recursal/MDN huggingface dataset:
ServiceWorkerRegistration: cookies property
===========================================

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

The **`cookies`** read-only property of the `ServiceWorkerRegistration` interface returns a reference to the `CookieStoreManager` interface, which enables a web app to subscribe to and unsubscribe from cookie change events in a service worker. This is an entry point for the Cookie Store API.

Value
-----

A `CookieStoreManager` object.

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

| Specification |
| --- |
| Cookie Store API # dom-serviceworkerregistration-cookies |

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

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

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

 The **`paymentManager`** read-only property of the
 `ServiceWorkerRegistration` interface returns a payment app's `PaymentManager` instance, which is used to manage various payment app functionality.

**Note:** This feature is available in Web Workers

Value
-----

A `PaymentManager` object instance.

Examples
--------


```js
navigator.serviceWorker.register("serviceworker.js").then((registration) => {
  registration.paymentManager.userHint = "Card number should be 16 digits";

  registration.paymentManager
    .enableDelegations(["shippingAddress", "payerName"])
    .then(() => {
      // ...
    });

  // ...
});
```


* `PaymentManager.userHint` is used to provide a hint for the browser to display along with the payment app's name and icon in the Payment Handler UI.
* `PaymentManager.enableDelegations()` is used to delegate responsibility for providing various parts of the required payment information to the payment app rather than collecting it from within the merchant website.
Specifications
--------------

| Specification |
| --- |
| Payment Handler API # dom-serviceworkerregistration-paymentmanager |

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
ServiceWorkerRegistration: navigationPreload property
=====================================================

The **`navigationPreload`** read-only property of the `ServiceWorkerRegistration` interface returns the `NavigationPreloadManager` associated with the current service worker registration.

The returned object allows resources managed by a service worker to be preemptively downloaded in parallel with service worker boot up.

**Note:** This feature is available in Web Workers

Value
-----

An instance of `NavigationPreloadManager`.

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

| Specification |
| --- |
| Service Workers # service-worker-registration-navigationpreload |

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

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

 The **`update()`** method of the
 `ServiceWorkerRegistration` interface attempts to update the service
 worker. It fetches the worker's script URL, and if the new worker is not byte-by-byte
 identical to the current worker, it installs the new worker. The fetch of the worker
 bypasses any browser caches if the previous fetch occurred over 24 hours ago.

**Note:** This feature is available in Web Workers

Syntax
------


```js
update()
```

### Parameters

None.

### Return value

 A `Promise` that resolves with a `ServiceWorkerRegistration`
 object.

Examples
--------

 The following simple example registers a service worker example then adds an event
 handler to a button so you can explicitly update the service worker whenever desired:


```js
if ("serviceWorker" in navigator) {
  navigator.serviceWorker
    .register("/sw.js", { scope: "/" })
    .then((registration) => {
      // registration worked
      console.log("Registration succeeded.");
      button.onclick = () => {
        registration.update();
      };
    })
    .catch((error) => {
      // registration failed
      console.error(`Registration failed with ${error}`);
    });
}
```

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

| Specification |
| --- |
| Service Workers # service-worker-registration-update |

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
ServiceWorkerRegistration: index property
=========================================

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

 The **`index`** read-only property of the
 `ServiceWorkerRegistration` interface returns a reference to the
 `ContentIndex` interface, which allows for indexing of offline content.

**Note:** This feature is available in Web Workers

Value
-----

A `ContentIndex` object.

Examples
--------

 You can access the property from either your main script or the registered service
 worker.

Here is an example from the main script:


```js
// reference registration
const registration = await navigator.serviceWorker.ready;

// feature detection
if ("index" in registration) {
  // Content Index API functionality
  const contentIndex = registration.index;
}
```


From the service worker:


```js
// service worker script

const contentIndex = self.registration.index;
```

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

| Specification |
| --- |
| Content Index # dom-serviceworkerregistration-index |

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
ServiceWorkerRegistration: updateViaCache property
==================================================

 The **`updateViaCache`** read-only property of the
 `ServiceWorkerRegistration` interface updates the cache using
 the mode specified in the call to `ServiceWorkerContainer.register`.
 Requests for `importScripts` still go via the HTTP cache. `updateViaCache` offers
 control over this behavior.

**Note:** This feature is available in Web Workers

Value
-----

Returns one of the following values:

* `imports`, meaning the HTTP cache is not consulted for update of the service worker, but is consulted for `importScripts`.
* `all`, meaning the HTTP cache is consulted in both cases
* `none`, meaning the HTTP cache is never consulted.
Examples
--------

The following example shows the use of updateViaCache.


```js
if ("serviceWorker" in navigator) {
  navigator.serviceWorker
    .register("/service-worker.js", {
      updateViaCache: "none",
    })
    .then((registration) => {
      registration.addEventListener("updatefound", () => {
        // If updatefound is fired, it means that there's
        // a new service worker being installed.
        console.log(`Value of updateViaCache: ${registration.updateViaCache}`);
      });
    })
    .catch((error) => {
      console.error(`Service worker registration failed: ${error}`);
    });
}
```

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

| Specification |
| --- |
| Service Workers # service-worker-registration-updateviacache |

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
ServiceWorkerRegistration: getNotifications() method
====================================================

 The **`getNotifications()`** method of
 the `ServiceWorkerRegistration` interface returns a list of the
 notifications in the order that they were created from the current origin via the
 current service worker registration. Origins can have many active but
 differently-scoped service worker registrations. Notifications created by one service
 worker on the same origin will not be available to other active service workers on
 that same origin.

**Note:** This feature is available in Web Workers

Syntax
------


```js
getNotifications()
getNotifications(options)
```

### Parameters

`options` Optional

 An object containing options to filter the notifications returned. The available
 options are:


`tag` Optional

 A string representing a notification tag. If
 specified, only notifications that have this tag will be returned.



### Return value

A `Promise` that resolves to a list of `Notification` objects.

Examples
--------


```js
navigator.serviceWorker.register("sw.js");

const options = { tag: "user\_alerts" };

navigator.serviceWorker.ready.then((registration) => {
  registration.getNotifications(options).then((notifications) => {
    // do something with your notifications
  });
});
```

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

| Specification |
| --- |
| Notifications API Standard # dom-serviceworkerregistration-getnotifications |

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

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

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

 The **`sync`** read-only property of the
 `ServiceWorkerRegistration` interface returns a reference to the
 `SyncManager` interface, which manages background synchronization
 processes.

**Note:** This feature is available in Web Workers

Value
-----

A `SyncManager` object.

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

| Specification |
| --- |
| Web Background Synchronization # dom-serviceworkerregistration-sync |

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

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

 The **`unregister()`** method of the
 `ServiceWorkerRegistration` interface unregisters the service worker
 registration and returns a `Promise`. The promise will resolve to
 `false` if no registration was found, otherwise it resolves to
 `true` irrespective of whether unregistration happened or not (it may not
 unregister if someone else just called `ServiceWorkerContainer.register()`
 with the same scope.) The service worker will finish any ongoing operations before it is
 unregistered.

**Note:** This feature is available in Web Workers

Syntax
------


```js
unregister()
```

### Parameters

None.

### Return value

`Promise` resolves with a boolean indicating whether the service worker has
 unregistered or not.

Examples
--------

 The following simple example registers a service worker example, but then immediately
 unregisters it again:


```js
if ("serviceWorker" in navigator) {
  navigator.serviceWorker
    .register("/sw.js", { scope: "/" })
    .then((registration) => {
      // registration worked
      console.log("Registration succeeded.");
      registration.unregister().then((boolean) => {
        // if boolean = true, unregister is successful
      });
    })
    .catch((error) => {
      // registration failed
      console.error(`Registration failed with ${error}`);
    });
}
```

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

| Specification |
| --- |
| Service Workers # navigator-service-worker-unregister |

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
ServiceWorkerRegistration: backgroundFetch property
===================================================

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 **`backgroundFetch`** property of the
 `ServiceWorkerRegistration` interface returns a reference to a
 `BackgroundFetchManager` object, which can be used to initiate background fetch operations.

**Note:** This feature is available in Web Workers

Value
-----

A `BackgroundFetchManager` object.

Examples
--------

### Initiating a background fetch

The following code accesses the `backgroundFetch` property and uses it to initiate a background fetch operation.


```js
// main.js
async function requestBackgroundFetch(movieData) {
  const swRegistration = await navigator.serviceWorker.ready;
  const fetchRegistration = await swRegistration.backgroundFetch.fetch(
    "download-movie",
    ["/my-movie-part-1.webm", "/my-movie-part-2.webm"],
    {
      icons: movieIcons,
      title: "Downloading my movie",
      downloadTotal: 60 \* 1024 \* 1024,
      label: "Downloading a show",
    },
  );
  //...
}
```

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

| Specification |
| --- |
| Background Fetch # dom-serviceworkerregistration-backgroundfetch |

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

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

 The **`waiting`** property of the
 `ServiceWorkerRegistration` interface returns a service worker whose
 `ServiceWorker.state` is `installed`. This property is initially
 set to `null`.

**Note:** This feature is available in Web Workers

Value
-----

 A `ServiceWorker` object, if it is currently in an `installed`
 state.

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

| Specification |
| --- |
| Service Workers # navigator-service-worker-waiting |

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
ServiceWorkerRegistration: pushManager property
===============================================

 The **`pushManager`** property of the
 `ServiceWorkerRegistration` interface returns a reference to the
 `PushManager` interface for managing push subscriptions; this includes
 support for subscribing, getting an active subscription, and accessing push permission
 status.

**Note:** This feature is available in Web Workers

Value
-----

A `PushManager` object.

Examples
--------


```js
this.onpush = (event) => {
  console.log(event.data);
  // From here we can write the data to IndexedDB, send it to any open
  // windows, display a notification, etc.
};

navigator.serviceWorker
  .register("serviceworker.js")
  .then((serviceWorkerRegistration) => {
    serviceWorkerRegistration.pushManager.subscribe().then(
      (pushSubscription) => {
        console.log(pushSubscription.subscriptionId);
        console.log(pushSubscription.endpoint);
        // The push subscription details needed by the application
        // server are now available, and can be sent to it using,
        // for example, the fetch() API.
      },
      (error) => {
        // During development it often helps to log errors to the
        // console. In a production environment it might make sense to
        // also report information about errors back to the
        // application server.
        console.error(error);
      },
    );
  });
```

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

| Specification |
| --- |
| Push API # dom-serviceworkerregistration-pushmanager |

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

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

See also
--------

* Push API
NavigateEvent: scroll() method
==============================

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

 The **`scroll()`** method of the
 `NavigateEvent` interface can be called to manually trigger the browser-driven scrolling behavior that occurs in response to the navigation, if you want it to happen before the navigation handling has completed.

Syntax
------


```js
scroll()
```

### Parameters

None.

### Return value

None (`undefined`).

### Exceptions

`InvalidStateError` `DOMException`

Thrown if the current `Document` is not yet active, or if the navigation has been cancelled.

`SecurityError` `DOMException`

Thrown if the event was dispatched by a `dispatchEvent()` call, rather than the user agent.

Examples
--------

### Handling scrolling using `scroll()`

In this example of intercepting a navigation, the `handler()` function starts by fetching and rendering some article content, but then fetches and renders some secondary content afterwards. It makes sense to scroll the page to the main article content as soon as it is available so the user can interact with it, rather than waiting until the secondary content is also rendered. To achieve this, we have added a `scroll()` call between the two.


```js
navigation.addEventListener("navigate", (event) => {
  if (shouldNotIntercept(navigateEvent)) {
    return;
  }
  const url = new URL(event.destination.url);

  if (url.pathname.startsWith("/articles/")) {
    event.intercept({
      async handler() {
        const articleContent = await getArticleContent(url.pathname);
        renderArticlePage(articleContent);

        event.scroll();

        const secondaryContent = await getSecondaryContent(url.pathname);
        addSecondaryContent(secondaryContent);
      },
    });
  }
});
```

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

| Specification |
| --- |
| HTML Standard # dom-navigateevent-scroll-dev |

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

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

See also
--------

* Modern client-side routing: the Navigation API
* Navigation API explainer
* Domenic Denicola's Navigation API live demo
NavigateEvent: signal property
==============================

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

 The **`signal`** read-only property of the
 `NavigateEvent` interface returns an `AbortSignal`, which will become aborted if the navigation is cancelled (e.g. by the user pressing the browser's "Stop" button, or another navigation starting and thus cancelling the ongoing one).

Value
-----

An `AbortSignal` object.

Examples
--------

The general idea here is that the `signal` property can be passed to an associated `fetch()` operation so that if the navigation is cancelled, the `fetch()` operation can be safely aborted, avoiding wasting bandwidth on fetches that are no longer needed.


```js
navigation.addEventListener("navigate", (event) => {
  event.intercept({
    async handler() {
      // ...

      await fetch(`/img/some-image.jpg`, { signal: event.signal });

      // ...
    },
  });
});
```


**Note:** See Example: next/previous buttons for a more detailed example.

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

| Specification |
| --- |
| HTML Standard # dom-navigateevent-signal-dev |

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

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

See also
--------

* Modern client-side routing: the Navigation API
* Navigation API explainer
* Domenic Denicola's Navigation API live demo
NavigateEvent: navigationType property
======================================

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

 The **`navigationType`** read-only property of the
 `NavigateEvent` interface returns the type of the navigation — `push`, `reload`, `replace`, or `traverse`.

Value
-----

An enumerated value representing the type of navigation.

The possible values are:

* `push`: A new location is navigated to, causing a new entry to be pushed onto the history list.
* `reload`: The `Navigation.currentEntry` is reloaded.
* `replace`: The `Navigation.currentEntry` is replaced with a new history entry. This new entry will reuse the same `key`, but be assigned a different `id`.
* `traverse`: The browser navigates from one existing history entry to another existing history entry.
Examples
--------

### Async transitions with special back/forward handling

Sometimes it's desirable to handle back/forward navigations specially, e.g. reusing cached views by transitioning them onto the screen. This can be done by branching as follows:


```js
navigation.addEventListener("navigate", (event) => {
  // Some navigations, e.g. cross-origin navigations, we
  // cannot intercept. Let the browser handle those normally.
  if (!event.canIntercept) {
    return;
  }

  // Don't intercept fragment navigations or downloads.
  if (event.hashChange || event.downloadRequest !== null) {
    return;
  }

  event.intercept({
    async handler() {
      if (myFramework.currentPage) {
        await myFramework.currentPage.transitionOut();
      }

      let { key } = event.destination;

      if (
        event.navigationType === "traverse" &&
        myFramework.previousPages.has(key)
      ) {
        await myFramework.previousPages.get(key).transitionIn();
      } else {
        // This will probably result in myFramework storing
        // the rendered page in myFramework.previousPages.
        await myFramework.renderPage(event.destination);
      }
    },
  });
});
```

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

| Specification |
| --- |
| HTML Standard # dom-navigateevent-navigationtype-dev |

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

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

See also
--------

* Modern client-side routing: the Navigation API
* Navigation API explainer
* Domenic Denicola's Navigation API live demo
NavigateEvent: destination property
===================================

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

 The **`destination`** read-only property of the
 `NavigateEvent` interface returns a `NavigationDestination` object representing the destination being navigated to.

Value
-----

A `NavigationDestination` object.

Examples
--------


```js
navigation.addEventListener("navigate", (event) => {
  // Exit early if this navigation shouldn't be intercepted,
  // e.g. if the navigation is cross-origin, or a download request
  if (shouldNotIntercept(event)) {
    return;
  }

  const url = new URL(event.destination.url);

  if (url.pathname.startsWith("/articles/")) {
    event.intercept({
      async handler() {
        // The URL has already changed, so show a placeholder while
        // fetching the new content, such as a spinner or loading page
        renderArticlePagePlaceholder();

        // Fetch the new content and display when ready
        const articleContent = await getArticleContent(url.pathname);
        renderArticlePage(articleContent);
      },
    });
  }
});
```

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

| Specification |
| --- |
| HTML Standard # dom-navigateevent-destination-dev |

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

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

See also
--------

* Modern client-side routing: the Navigation API
* Navigation API explainer
* Domenic Denicola's Navigation API live demo