ServiceWorker не обновляет кэш - PullRequest
Новая
       9

ServiceWorker не обновляет кэш

0 голосов
/ 26 ноября 2018

Я пытаюсь установить ServiceWorker, который очищает кеш при каждом изменении текущей используемой версии кеша.

У меня index.html кешируется в кеше v0.0.1, если версия кешаменяется на v0.0.2 или что-то еще, он должен перезагружаться index.html.

Я загружаю ServiceWorker с помощью: 

if('serviceWorker' in navigator){
    navigator.serviceWorker
        .register('serviceWorker.js')
        .then(() => { 
            console.log('Service Worker Registered');
        });
}

А вот:

serviceWorker.js 

const currentVersion = 'v0.0.1';

self.addEventListener('install', e => {
    e.waitUntil(
        caches.open(currentVersion).then(cache => cache.addAll([
            '',
            'index.html',
            'js/load.min.js',
            'lib/db.js/js/db.min.js'
        ]))
    );
});

self.addEventListener('fetch', e => {
    e.respondWith(
        caches.match(e.request).then(resp => {
            return resp || fetch(e.request).then(response => {
                return caches.open(currentVersion).then(cache => {
                    cache.put(e.request, response.clone());
                    return response;
                });  
            });
        })
    );
});

self.addEventListener('activate', e => {
    e.waitUntil(
        caches.keys().then(keyList => 
            Promise.all(keyList.map(key => key != currentVersion ? caches.delete(key) : Promise.resolve()))
        )
    );
});

Но я попытался отредактировать index.html и обновить версию serviceWorker, но файл index.html не изменился.Всегда отображается первая версия.

Что я делаю не так?

1 Ответ

0 голосов
/ 27 ноября 2018

Здесь было две проблемы.

Во-первых, в событии fetch моего ServiceWorker я проверил, содержит ли кэш целом файл, который я выбирал, а не файл.текущая версия кэша.

Поэтому я отредактировал мой fetch прослушиватель событий так: 

self.addEventListener('fetch', e => {
    e.respondWith(
        caches.open(currentVersion).then(cache => {
            return cache.match(e.request).then(resp => {
                // Request found in current cache, or fetch the file
                return resp || fetch(e.request).then(response => {
                    // Cache the newly fetched file for next time
                    cache.put(e.request, response.clone());
                    return response;
                // Fetch failed, user is offline
                }).catch(() => {
                    // Look in the whole cache to load a fallback version of the file
                    return caches.match(e.request).then(fallback => {
                        return fallback;
                    });
                });
            });
        })
    );
});

Последняя проблема заключалась в том, что простая перезагрузка страницы (F5) не измениласьServiceWorker.
Чтобы активировать новый ServiceWorker, необходимо закрыть вкладку и открыть новую.

...