在使用 Workbox 预缓存资产时跟踪进度答案

【问题标题】：Keep track of progress while precaching assets with the Workbox在使用 Workbox 预缓存资产时跟踪进度
【发布时间】：2019-03-16 17:00:09
【问题描述】：

想象一下，一旦用户导航到网站，我们有 N 个资产需要由 service-worker 预先缓存。我们有适当的 precache-manifest.js 和列出的 N 文件，我们正在使用 workbox.precaching.precacheAndRoute([...]) 来配置所需的行为（默认 CRA 设置）

在使用workbox.precaching.precacheAndRoute 或workbox.precaching.precache 时，有没有办法跟踪预缓存的进度？

我想这可能类似于将参数回调函数传递给workbox.precaching.precacheAndRoute 以及要预缓存的条目数组。并且为每个缓存的条目调用此回调..

这个问题有什么解决方案或变通方法吗？谢谢！

【问题讨论】：

我也有类似的要求。我想在所有项目缓存成功时收到通知！

标签： service-worker create-react-app progressive-web-apps workbox

【解决方案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
    }
}
....

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

【讨论】：

【解决方案2】：

理论上应该可以使用addPlugins将自己的custom plugin添加到预缓存组件中

我希望在不久的将来使用 cacheDidUpdate 事件来证明这个理论，但我不确定我是否可以轻松地将进度传达回页面。我心中的疑问是我是否可以可靠地收听正在注册但尚未由预缓存服务人员控制的页面中的任何消息

【讨论】：