Как отследить когда кеш сбросится?

Question

[Дмитрий Марков]

Реализую ручное сбрасывание кеша с помощью serviseWorker.

Есть кнопка по клику отправляю сообщение в sw.

const reload = () => {
		registration.waiting.postMessage({
			type: 'SKIP_WAITING',
		});
	};

в sw.js прослушиваю так

self.addEventListener('message', event => {
    if (event.data && event.data.type === 'SKIP_WAITING') {
        self.skipWaiting();
    }
});

Кеш сбрасывается. Но теперь мне нужно после сброса кеша обновить страницу. Где лучше реализовать обновление страницы? И как я могу отследить окончание сброса кеша ?

Answer 1

[scoffs]

Может что-то типа этого?

После вызова self.skipWaiting() в Service Worker можно отправить сообщение об успешном сбросе кеша обратно в клиентскую часть приложения, используя postMessage(). В клиентской части вы можете прослушивать это сообщение и выполнить обновление страницы с помощью location.reload() или другого подходящего метода.

// Service Worker
self.addEventListener('message', event => {
    if (event.data && event.data.type === 'SKIP_WAITING') {
        self.skipWaiting();
        event.source.postMessage({ type: 'CACHE_RESET_SUCCESS' });
    }
});

// client
navigator.serviceWorker.addEventListener('message', event => {
    if (event.data && event.data.type === 'CACHE_RESET_SUCCESS') {
        location.reload();
    }
});

Либо
Если вы хотите, чтобы клиентская часть обновляла страницу после сброса кеша, вы можете прослушивать событие controllerchange на объекте navigator.serviceWorker. Когда Service Worker сбрасывается и становится активным контроллером, будет вызвано событие controllerchange, и вы можете выполнить обновление страницы.

navigator.serviceWorker.addEventListener('controllerchange', () => {
    location.reload();
});