0

受影响的图书馆： 工作箱窗口

浏览器和平台： 基于铬的浏览器

问题或功能请求描述：我仅在尝试实现工作框窗口时遇到此问题。如果我删除实现，错误就会消失。

我的目标是展示 service worker 版本。为此，我按照文档中的说明进行操作，尽管我可以获得 service worker 版本，但它造成了一些麻烦。

Workbox 文档参考：

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

问题

  1. 它在控制台中 显示一个bad-precaching-response错误：参见图片
  2. 它会生成多余的服务人员： 参见图片

我再说一遍：一旦我删除了 workbox-window 实现，bad-precaching-response 就会消失，并且它会停止生成多余的服务工作者

软件注册

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)
        })
    })
}

时钟服务工作者.js（软件文件）

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()

工作箱窗口实现

<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>
4

0 回答 0