dom / latest / backgroundfetchregistration / progress_event.html /

BackgroundFetchRegistration: progress event

The progress event of the BackgroundFetchRegistration interface thrown when the associated background fetch progresses.

Practically, this event is fired when any of the following properties will return a new value:

Syntax

Use the event name in methods like addEventListener(), or set the onprogress event property on the relevant BackgroundFetchRegistration object.

addEventListener('progress', event => { })
onprogress = event => { }

Event type

A generic Event with no added properties.

Example

The following example demonstrates how to log the progress of a download. The code first checks that a downloadTotal was provided when the background fetch was registered. This is then used to calculate the percentage, based on the downloaded property.

bgFetch.addEventListener('progress', () => {
  if (!bgFetch.downloadTotal) return;
  const percent = Math.round(bgFetch.downloaded / bgFetch.downloadTotal * 100);
  console.log(`Download progress: ${percent}%`);
});

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
progress_event
74
79
No
No
62
No
No
74
No
53
No
11.0

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/BackgroundFetchRegistration/progress_event