BackgroundFetchUpdateUIEvent: updateUI() method

Limited availability

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

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

Note: This feature is only available in Service Workers.

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

js
updateUI()
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 the sizes attribute of the <link> element.

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

A Promise.

Exceptions

InvalidStateError DOMException

Thrown 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.

js
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

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
updateUI
Experimental
Chrome – Full support
Chrome 74 (Release date: 2019-04-23)
footnote Full support
Edge – Full support
Edge 79 (Release date: 2020-01-15)
footnote Full support
Firefox – No support
Firefox
footnote No support
Opera – Full support
Opera 62 (Release date: 2019-06-27)
footnote Full support
Safari – No support
Safari
footnote No support
Chrome Android – Full support
Chrome Android 74 (Release date: 2019-04-24)
footnote Full support
Firefox for Android – No support
Firefox for Android
footnote No support
Opera Android – Full support
Opera Android 53 (Release date: 2019-07-11)
footnote Full support
Safari on iOS – No support
Safari on iOS
footnote No support
Samsung Internet – Full support
Samsung Internet 11 (Release date: 2019-12-05)
footnote Full support
WebView Android – No support
WebView Android
footnote No support
WebView on iOS – No support
WebView on iOS
footnote No support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.