How to use workbox-broadcast-update - 1 common examples

To help you get started, we’ve selected a few workbox-broadcast-update examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github philipwalton / blog / assets / sw / routes / content.js View on Github external
import {BroadcastUpdatePlugin} from 'workbox-broadcast-update/BroadcastUpdatePlugin.mjs';
import {resultingClientExists} from 'workbox-core/_private/resultingClientExists';
import {copyResponse} from 'workbox-core/copyResponse.mjs';
import {Route} from 'workbox-routing/Route.mjs';
import {StaleWhileRevalidate} from 'workbox-strategies/StaleWhileRevalidate.mjs';
import {cacheNames} from '../caches.js';
import {messageWindows} from '../messenger.js';

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

const broadcastUpdatePlugin = new BroadcastUpdatePlugin({
  headersToCheck: ['etag'],
  generatePayload(data) {
    return {
      cacheName: data.cacheName,
      updatedURL: data.request.url,

const navigationReportPlugin = {
  async cachedResponseWillBeUsed({cachedResponse, event, request}) {
    // Check `event.request` instead of `request` since the latter is a
    // code-generated request for the content partial and is not a
    // navigation request.
    if (event && event.request && event.request.mode === 'navigate') {
      const {resultingClientId} = event;


A service worker helper library that uses the Broadcast Channel API to announce when a cached response has updated

Latest version published 11 months ago

Package Health Score

86 / 100
Full package analysis