Live registration flow

1. 1

   1. Service worker support

   Not run yet.

2. 2

   2. Active service worker (ready)

   Not run yet.

3. 3

   3. backgroundFetch on registration

   Not run yet.

4. 4

   4. Register background fetch

   Not run yet.

5. 5

   5. Download progress events

   Not run yet.

6. 6

   6. Final result

   Not run yet.

Minimal code to run this on your own site

Background Fetch needs a service worker. Register one, then call fetch from any controlled page:

// page.js (runs on a page controlled by your service worker)
const reg = await navigator.serviceWorker.ready;
const bg = reg.backgroundFetch; // undefined where unsupported
const task = await bg.fetch("my-download", ["/big.zip", "/big2.zip"], {
  title: "Downloading assets",
  // downloadTotal: 50 * 1024 * 1024, // optional, enables %
});
task.addEventListener("progress", () => {
  console.log(task.downloaded, "/", task.downloadTotal);
});

// sw.js
self.addEventListener("backgroundfetchsuccess", (event) => {
  // store responses in Cache Storage for offline use
});