工作箱窗口“错误预缓存响应”错误和“冗余”服务工作者

编程问答 2022-04-22

问题描述

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

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

问题或功能请求说明： 我只有在尝试实现工作箱窗口时才会遇到这个问题。如果我删除实现，错误就会消失。

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

WorkBox 文档参考：

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

问题

  1. 它在控制台中显示了一个 bad-precaching-response 错误： see image
  2. 它会生成冗余服务工作线程： see image

我再说一遍：一旦我删除了工作箱窗口的实现，坏的预缓存响应就会消失，它会停止生成多余的服务工作者

软件注册

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（软件文件）

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}`,{ url: `/clock/passcode/${CLOCK_URI}`,{ url: `/clock/home/${CLOCK_URI}`,{ url: `/clock/punch/${CLOCK_URI}`,{ url: `/clock/offline_punch/${CLOCK_URI}?status=in`,{ url: `/clock/offline_punch/${CLOCK_URI}?status=out`,{ url: '/css/clock.css',{ url: '/js/js.cookie-2.2.1.min.js',{ url: '/js/jquery-3.2.1.min.js',{ url: '/js/bootstrap.min.js',{ url: '/js/moment/moment.js',{ url: '/js/moment/locale/es.js',{ url: '/js/webcam/webcam.min.js',{ url: '/js/clock/clock-scripts.js',{ url: '/fonts/Material_Icons/MaterialIcons-Regular.woff2',{ url: '/fonts/Barlow_Condensed/barlow-condensed-v4-latin-600.woff2',{ url: '/fonts/Titillium_Web/titillium-web-v8-latin-600.woff2',{ url: '/fonts/Titillium_Web/titillium-web-v8-latin-700.woff2',{ url: '/fonts/Titillium_Web/titillium-web-v8-latin-regular.woff2',{ url: '/images/employee/placeholder.png',{ url: '/audio/punch-error.mp3',{ url: '/audio/punch-in.mp3',{ 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>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptprogressive-web-appsservice-workerworkbox