使用工作箱预备资产时保持进度

Question

想象一下，一旦用户导航到网站，我们需要将N个资产与服务工作者一起预先缓存。我们为列出的N个文件提供了适当的precache-manifest.js，并且我们正在使用workbox.precaching.precacheAndRoute([...])配置所需的行为（默认CRA设置）

使用workbox.precaching.precacheAndRoute或workbox.precaching.precache时是否有办法跟踪预缓存进度？

我想这可能像将参数回调函数与要预缓存的条目数组一起传递给workbox.precaching.precacheAndRoute一样。然后为每个缓存的条目调用此回调。.

是否有针对此问题的解决方案或解决方法？谢谢！

Answer 1

工作箱没有提供任何事件或回调来通知预缓存是否完成。但是这是我设法使用postMessage通知客户端预缓存已完成的解决方法。

// sw-precache.js
workbox.precaching.precacheAndRoute(self.__precacheManifest)

const interval = setInterval(() => {
    caches.open(workbox.core.cacheNames.precache).then(cache => {
        cache.keys().then(keys => {
            if (keys.length >= self.__precacheManifest.length) {
                clearInterval(interval)
                self.clients.matchAll().then(clients => {
                    clients.forEach(client => client.postMessage('afterPrecache'))
                })
            }
        })
    })
}, 1000)

在您的客户中，

// index.html
....
navigator.serviceWorker.onmessage = (e) => {
    if (e.data === 'afterPrecache') {
        // precaching completed
    }
}
....

您甚至可以调整上述解决方案以跟踪预缓存进度。