BackgroundFetchUpdateUIEvent: updateUI() method

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

The updateUI() method of the BackgroundFetchUpdateUIEvent interface updates the title and icon in the user interface to show the status of a background fetch.

This method may only be run once, to notify the user on a failed or a successful fetch.

Syntax

updateUI(options)

Parameters

options Optional

An object containing any of the following:

icons Optional

A list of one or more image resources, containing icons for use in the user interface. An image resource is an object containing:

src

A string which is a URL of an image.

sizes Optional

A string which is equivalent to a <link> sizes attribute.

type Optional

A string containing an image MIME type.

label Optional

A string providing a name for the associated image.

title Optional

A string containing the new title of the user interface.

Return value

Exceptions

InvalidStateError DOMException

Returned if any of the following are true:

Examples

The following example demonstrates updating the UI with a title and image icon on a successful fetch.

addEventListener("backgroundfetchsuccess", (event) => {
  event.updateUI({
    title: "Episode 5 ready to listen!",
    icon: {
      src: "path/to/success.ico",
      sizes: "16x16 32x32 64x64",
    },
  });
});

Specifications

Specification
Background Fetch
# background-fetch-update-ui-event-update-ui

Browser compatibility

BCD tables only load in the browser