рабочий файл не обновляется в браузере при развертывании - PullRequest
Новая
       9

рабочий файл не обновляется в браузере при развертывании

0 голосов
/ 22 октября 2018

У меня есть приложение Vanilla Js, которое развернуто на github с Heroku (BackEnd).Приложение уже развернуто, и я только что обновил CSS.И приложение локально обновляется как в режиме разработки, так и в режиме производства.Но по ссылке github, обновление не показывается.Сервисный файл не обновляется.chacheName - старый (v7), а не обновленный (v10), когда я проверяю в source / google inpect.Я устал от отмены регистрации и обновления SW и очистил всю дату сайта в чистом хранилище / приложении / Google Inspect.Но это все еще не работает.Я понятия не имею, что вызвало эту проблему.Спасибо!

service-worker.js 

const cacheName = 'v10';
const cacheFiles = [
    '/',
    '/resources/css/style.css',
    '/resources/css/queries.css',
    '/resources/js/app.js',
    'https://fonts.googleapis.com/css?family=Quicksand:300,400',
    '/resources/assets/img/background.jpeg',
    '/resources/assets/img/flightnook.jpeg',
    '/resources/assets/img/omnifood.jpeg',
    '/resources/assets/img/weather.jpeg',
    '/resources/assets/img/workflow.jpeg',
    '/resources/assets/svg/icon/nav-close.svg',
    '/resources/assets/svg/icon/nav-open.svg',
    '/resources/assets/svg/icon/svg-symbol.svg',
    '/resources/assets/svg/logo/css3.svg',
    '/resources/assets/svg/logo/nodejs.svg',
    '/resources/assets/svg/logo/svg-logo.svg',
    '/vendors/css/normalize.css',
    '/vendors/js/cache-polyfill.js',
];

if( 'function' === typeof importScripts) {
    importScripts('/vendors/js/serviceworker-cache-polyfill.js');
}

self.addEventListener('install', (e) => {
    console.log('[Service Worker] Installed');
    e.waitUntil(
        caches.open(cacheName)
            .then(cache => {
                console.log('[Service Worker] Caching cacheFiles');
                return cache.addAll(cacheFiles);
            })
            .catch(err => console.error(`[Service Worker] Caching cacheFiles: ${err}`))
    );
});

self.addEventListener('activate', (e) => {
    console.log('[Service Worker] Activated');
    e.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames.map(thisCacheName => {
                    if (thisCacheName !== cacheName) {
                        console.log(`[Service Worker] Removing Cached Files from Cach-${thisCacheName}`);
                    }
                    return caches.delete(thisCacheName);
                })
            );
        })
    );
});

self.addEventListener('fetch', (e) => {
    console.log(`[Service Worker] Fetching ${e.request.url}`);
    e.respondWith(
        caches.match(e.request)
            .then(response => {
                if (response) {
                    console.log(`[Service Worker] Found in cache ${e.request.url}${response}`);
                    return response;
                }

                const requestClone = e.request.clone();
                return fetch(requestClone)
                    .then(response => {
                        if (!response) {
                            console.log('[ServiceWorker] No response from fetch ');
                            return response;
                        }
                        const responseClone = response.clone();
                        caches.open(cacheName)
                            .then(cache => {
                                cache.put(e.request, responseClone);
                                console.log('[ServiceWorker] New Data Cached', e.request.url);
                                return response;
                            });
                    })
                    .catch(err => console.log('[ServiceWorker] Error Fetching & Caching New Data', err));
            })
    );
});

1 Ответ

0 голосов
/ 23 октября 2018

Чтобы ответить на мой вопрос, я изменил две части.Изменил значение cacheName на массив вместо строки и пересмотрел условие в методе map, чтобы проверить, включены ли существующие версии в массив cacheName.Если это ложь, удалите их. 

const cacheName = ['jiah-static-v2'];

self.addEventListener('activate', (e) => {
    console.log('[Service Worker] Activated');
    e.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames.map(thisCacheName => {
                    if (!cacheName.includes(thisCacheName)) {
                        console.log(`[Service Worker] Removing Cached Files from Cach-${thisCacheName}`);
                        return caches.delete(thisCacheName);
                    }
                })
            );
        })
    );
});
...