Отслеживайте прогресс при предварительном кэшировании ресурсов с помощью Workbox

Question

Представьте, что у нас есть N активов, которые должны быть предварительно кэшированы работником сервиса после перехода пользователя на веб-сайт. У нас есть соответствующие precache-manifest.js с перечисленными N-файлами, и мы используем workbox.precaching.precacheAndRoute([...]) для настройки необходимого поведения (настройка CRA по умолчанию)

Есть ли способ отслеживать прогресс предварительного кэширования при использовании workbox.precaching.precacheAndRoute или workbox.precaching.precache?

Я предполагаю, что это может быть что-то вроде передачи функции обратного вызова параметра в workbox.precaching.precacheAndRoute вместе с массивом записей для предварительного кэширования. И этот обратный вызов вызывается для каждой записи в кэше.

Есть ли какое-либо решение или решение этой проблемы? Спасибо!

Answer 1

Workbox не предоставляет никаких событий или обратных вызовов для уведомления о завершении предварительного кэширования. Но вот обходной путь, который мне удалось придумать, используя 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
    }
}
....

Вы даже можете настроить указанное выше решение, чтобы отслеживать прогресс предварительного кэширования.

Answer 2

Теоретически должно быть возможно добавить свой собственный плагин к компоненту предварительного кэширования с помощью addPlugins.

Я надеюсь поиграться с доказательством этой теории в какой-то момент в ближайшее время, используя событие cacheDidUpdate, хотя я не уверен, что смогу легко сообщить о прогрессе на странице. У меня есть сомнение в том, могу ли я надежно прослушивать какие-либо сообщения на странице, которая регистрируется, но еще не контролируется предварительным кэширующим обслуживающим работником.