Question

我有Vanilla Js应用程序，它与Heroku（BackEnd）一起部署在github上。该应用程序已经部署，我刚刚更新了一些CSS。并且该应用在开发模式和生产模式下均在本地更新。但是在github链接上，未显示更新。服务工作者文件未更新。当我签入源代码/ google inpect时，chacheName是旧版本（v7），而不是更新版本（v10）。我已经很累了要取消注册和更新SW，并清除存储/应用程序/ Google Check中的所有站点日期。但是它仍然无法正常工作。我不知道是什么引起了这个问题。谢谢！

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));
            })
    );
});

Answer 1

为回答我的问题，我更改了两个部分。将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);
                    }
                })
            );
        })
    );
});

部署后，服务工作者文件不会在浏览器上更新

1 个答案: