workbox-window "bad-precaching-response" error and "redundant" service worker

Question

Library Affected: workbox-window

Browser & Platform: chromium-based browser

Issue or Feature Request Description: I'm having this problem only when trying to implement workbox-window. If I remove the implementation, the errors disappear.

My goal is to show the service worker version. For that, I followed the instructions from the docs, and despite I can get the service worker version, it is causing a couple of troubles.

Workbox Docs reference:

https://developers.google.com/web/tools/workbox/modules/workbox-window?hl=es#window_to_service_worker_communication

Issues

1. It shows a bad-precaching-response error in the console: see image
2. It generates redundant service workers: see image

I repeat: Once I remove the workbox-window implementation, the bad-precaching-response disappears and it stops generating redundant service workers

SW registration

if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
        navigator.serviceWorker.register('/clock-service-worker.js?clock_uri=' + clock_uri, { scope: '/clock/' }).then(function(registration) {
            console.log('ServiceWorker registration successful: ', registration)
        }, function(err) {
            console.log('ServiceWorker registration failed: ', err)
        })
    })
}

clock-service-worker.js (SW file)

importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.1.5/workbox-sw.js');

const SW_VERSION = '2.0.0'
const CLOCK_URI = new URL(location).searchParams.get('clock_uri')

const precacheResources = [
    { url: `/clock/index/${CLOCK_URI}`, revision: null },
    { url: `/clock/directory/${CLOCK_URI}`, revision: null },
    { url: `/clock/passcode/${CLOCK_URI}`, revision: null },
    { url: `/clock/home/${CLOCK_URI}`, revision: null },
    { url: `/clock/punch/${CLOCK_URI}`, revision: null },
    { url: `/clock/offline_punch/${CLOCK_URI}?status=in`, revision: null },
    { url: `/clock/offline_punch/${CLOCK_URI}?status=out`, revision: null },
    { url: '/css/clock.css', revision: null },
    { url: '/js/js.cookie-2.2.1.min.js', revision: null },
    { url: '/js/jquery-3.2.1.min.js', revision: null },
    { url: '/js/bootstrap.min.js', revision: null },
    { url: '/js/moment/moment.js', revision: null },
    { url: '/js/moment/locale/es.js', revision: null },
    { url: '/js/webcam/webcam.min.js', revision: null },
    { url: '/js/clock/clock-scripts.js', revision: null },
    { url: '/fonts/Material_Icons/MaterialIcons-Regular.woff2', revision: null },
    { url: '/fonts/Barlow_Condensed/barlow-condensed-v4-latin-600.woff2', revision: null },
    { url: '/fonts/Titillium_Web/titillium-web-v8-latin-600.woff2', revision: null },
    { url: '/fonts/Titillium_Web/titillium-web-v8-latin-700.woff2', revision: null },
    { url: '/fonts/Titillium_Web/titillium-web-v8-latin-regular.woff2', revision: null },
    { url: '/images/employee/placeholder.png', revision: null },
    { url: '/audio/punch-error.mp3', revision: null },
    { url: '/audio/punch-in.mp3', revision: null },
    { url: '/audio/punch-out.mp3', revision: null }
]

workbox.setConfig({ debug: true })

workbox.core.setCacheNameDetails({
    prefix: 'clock',
    suffix: 'v2',
    precache: 'precache',
    runtime: 'runtime'
})

const ignoreQueryStringPlugin = {
    cacheKeyWillBeUsed: async ({ request, mode, params, event, state }) => {
        curl = new URL(request.url)
        return curl.pathname  
    }
}

const cacheName = workbox.core.cacheNames.precache
const options = {
    cacheName,
    plugins: [ignoreQueryStringPlugin]
}

// pages
workbox.routing.registerRoute(
    new RegExp(`\/clock\/index\/${CLOCK_URI}`),
    new workbox.strategies.NetworkFirst(options)
)
workbox.routing.registerRoute(
    new RegExp(`\/clock\/directory\/${CLOCK_URI}`),
    new workbox.strategies.NetworkFirst(options)
)
workbox.routing.registerRoute(
    new RegExp(`\/clock\/passcode\/${CLOCK_URI}`),
    new workbox.strategies.NetworkFirst(options)
)
workbox.routing.registerRoute(
    new RegExp(`\/clock\/home\/${CLOCK_URI}`),
    new workbox.strategies.NetworkFirst(options)
)
workbox.routing.registerRoute(
    new RegExp(`\/clock\/punch\/${CLOCK_URI}`),
    new workbox.strategies.NetworkFirst(options)
)
workbox.routing.registerRoute(
    new RegExp(`\/clock\/offline_punch\/${CLOCK_URI}`),
    new workbox.strategies.NetworkFirst(options)
)

// main css and js files
workbox.routing.registerRoute(
    /\/css\/clock.css/,
    new workbox.strategies.NetworkFirst(options)
)
workbox.routing.registerRoute(
    /\/js\/clock\/clock-scripts.js/,
    new workbox.strategies.NetworkFirst(options)
)

// static files
workbox.routing.registerRoute(
    /\.(?:js|css)$/,
    new workbox.strategies.CacheFirst({ cacheName })
)
workbox.routing.registerRoute(
    /\.(?:woff2|png|mp3)$/,
    new workbox.strategies.CacheFirst({ cacheName })
)

workbox.precaching.precacheAndRoute(precacheResources)

addEventListener('message', (event) => {
    if (event.data.type === 'GET_VERSION') {
        event.ports[0].postMessage(SW_VERSION)
    }
})

self.skipWaiting()
workbox.core.clientsClaim()

workbox-window implementation

<script type="module">
        import { Workbox } from 'https://storage.googleapis.com/workbox-cdn/releases/6.1.5/workbox-window.prod.mjs'

        if ('serviceWorker' in navigator) {
            const wb = new Workbox(`${window.location.origin}/clock-service-worker.js`)
            wb.register()

            const getSWVersion = async () => {
                const swVersion = await wb.messageSW({ type: 'GET_VERSION' })
                console.log('Service Worker version: ', swVersion)
            }

            getSWVersion()
        }
</script>