Background Fetch keeps large model downloads alive
Downloading a multi-gigabyte AI model is a different experience from fetching a typical page resource. A dropped connection or a closed tab can wipe out hours of progress, forcing the user to start from zero on their next visit. The Background Fetch API, used as a progressive enhancement, turns that brittle flow into something far more resilient.
How it works
Background Fetch requires a service worker. Once registered, the API lets the browser take ownership of the download lifecycle: it shows progress to the user, provides its own cancel UI, and pauses and resumes as connectivity changes. If the user is offline when a fetch is triggered, the browser waits and starts the download when the connection returns.
In a typical setup, the user clicks a button to begin downloading a model such as Gemma 2B. Before launching the fetch, check whether the model is already cached to avoid wasting bandwidth. If it is not, start a background fetch.
The size of the payload can be obtained with getResourceSize(), which you can implement by making a HEAD request to the resource.
Reporting progress
The browser returns a BackgroundFetchRegistration object when the background fetch starts. Listening for its progress event lets you drive a progress indicator for the user.
Handling completion in the service worker
When the download finishes, the service worker receives a backgroundfetchsuccess event. The updateUI() method on that event updates the browser's interface to reflect the successful completion. The service worker can then notify the open client — for instance, with postMessage() — that the model is ready to be used.
On the client side, listen for message events from the service worker. When the completion message arrives, the app can work with the downloaded model and store it via the Cache API for future sessions.
Letting users cancel
The BackgroundFetchRegistration also exposes an abort() method, which you can wire to a cancel button in your UI.
Storing the download
Once a model is downloaded, cache it so users download it only once. The Background Fetch API improves the download experience itself, but pairing it with the Cache API — and choosing the smallest model that meets your needs — is the best way to keep client-side AI fast and cost-effective.
A complete, working example is available in the demo, with full source code showing the service worker and client code in context.
