What is workbox-broadcast-update?
The workbox-broadcast-update package is part of the Workbox suite of libraries, which are designed to make service workers and offline functionality in web applications easier to implement and more robust. Specifically, workbox-broadcast-update is used to notify web app pages when a cached response has been updated. This is particularly useful for pages that are open in the browser and need to be informed about fresh data available in the cache, allowing the app to react and update the UI accordingly.
Broadcasting cache updates
This code sample demonstrates how to use the BroadcastUpdatePlugin within a service worker to automatically notify pages when a cached response from an API route has been updated. It uses the NetworkFirst strategy, meaning it tries to fetch the latest response from the network first before falling back to the cache. When a new response is fetched and cached, the BroadcastUpdatePlugin sends a message to all open pages to inform them of the update.
import {BroadcastUpdatePlugin} from 'workbox-broadcast-update';
workbox.routing.registerRoute(
({url}) => url.pathname.startsWith('/api'),
new workbox.strategies.NetworkFirst({
plugins: [
new BroadcastUpdatePlugin()
],
}),
);