BackgroundFetchManager: fetch() method

Limited availability

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

Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.

Note: This feature is available inWeb Workers.

Thefetch() method of theBackgroundFetchManager interface initiates a background fetch operation, given one or more URLs orRequest objects.

Syntax

fetch(id, requests)fetch(id, requests, options)

Parameters

id

A developer-defined identifier that can be passed to the other methods to retrieve theBackgroundFetchRegistration for this operation.

requests

ARequestInfo object or an array ofRequestInfo objects.

EachRequestInfo object is aRequest object or a string that will be given as theinput argument to theRequest() constructor.

optionsOptional

An object which will be used to customize the fetch progress dialog that the browser shows to the user. It has the following properties:

titleOptional

A string that will be used as the title for the progress dialog.

iconsOptional

An array of objects, each representing an icon that the browser may use for the progress dialog. Each object has the following properties:

src: A string representing a URL to the icon file.
sizesOptional: A string representing the sizes of the image, expressed using the same syntax as thesizes attribute of the<link> element.
typeOptional: A string representing theMIME type of the icon.
labelOptional: A string representing the accessible name of the icon.

downloadTotalOptional

A number representing the estimated total download size, in bytes, for the fetch operation. This is used to show the user how big the download is and to show the user download progress.

As soon as the total download size exceedsdownloadTotal, then the fetch is aborted.

Return value

APromise that resolves with aBackgroundFetchRegistration object.

Exceptions

TypeError: Raised if no request is provided, if the mode of a request isno-cors, if no service worker is present, a request already exists with the requestedid, or the request fails.
AbortErrorDOMException: Indicates that the fetch was aborted.
NotAllowedErrorDOMException: Indicates that user permission has not been granted to make background fetches.
QuotaExceededError: Thrown if storing requests failed due to exceed the browser'sstorage quota.

The following example shows how to usefetch() to initiate a background fetch operation. With an activeservice worker, use theServiceWorkerRegistration.backgroundFetch property to access theBackgroundFetchManager object and call itsfetch()method.

navigator.serviceWorker.ready.then(async (swReg) => {  const bgFetch = await swReg.backgroundFetch.fetch(    "my-fetch",    ["/ep-5.mp3", "ep-5-artwork.jpg"],    {      title: "Episode 5: Interesting things.",      icons: [        {          sizes: "300x300",          src: "/ep-5-icon.png",          type: "image/png",          label: "Downloading a show",        },      ],      downloadTotal: 60 * 1024 * 1024,    },  );});