How to use the workbox-broadcast-update/BroadcastUpdatePlugin.mjs.BroadcastUpdatePlugin function in workbox-broadcast-update

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;