我可以通过PWA和服务工作者重置应用的样式吗？

问题描述

我有一个用HTML，CSS和JS和Node.js制作的PWA，每次更改应用程序的styles.css时，我都必须再次上传它，即更改端口。例如在localhost：3000中，它将具有旧样式，但是如果我将其上载到localhost：3100，则样式会更改为新样式，我该如何做到这一点，以便缓存的css文件将被删除并与新文件一起上传。 ？

这是我的服务人员：

var CACHE_NAME = 'version-1'; // bump this version when you make changes.
// Put all your urls that you want to cache in this array
var urlsToCache = [
    'index.html','assets/logo-192.png','images/airplane.png','images/backspace.png','images/calcToggle.png','images/diamond.png','images/favicon.png','images/hamburger.png','images/history.png','images/like.png','images/love.png','images/menu2.png','images/menu3.png','images/menu4.png','images/menu5.png','images/menu6.png','images/menu7.png','images/menu8.png','images/plane.png','images/science.png','images/settings.png','images/trash.png','styles.css'
];

// Install the service worker and open the cache and add files mentioned in array to cache
self.addEventListener('install',function(event) {
    event.waitUntil(
    caches.open(CACHE_NAME)
        .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
        })
    );
});


// keep fetching the requests from the user
self.addEventListener('fetch',function(event) {
    event.respondWith(
        caches.match(event.request)
        .then(function(response) {
            // Cache hit - return response
            if (response) return response;
            return fetch(event.request);
        })
    );
});

self.addEventListener('activate',function(event) {
    var cacheWhitelist = []; // add cache names which you do not want to delete
    cacheWhitelist.push(CACHE_NAME);
    event.waitUntil(
        caches.keys().then(function(cacheNames) {
        return Promise.all(
            cacheNames.map(function(cacheName) {
                if (!cacheWhitelist.includes(cacheName)) {
                    return caches.delete(cacheName);
                }
            })
        );
        })
    );
});

解决方法

如果您要进行开发，则只需打开开发工具。选择应用程序选项卡，然后选择服务工作者面板。 点击“绕过网络”选项。 我写了一篇有关服务人员开发最佳实践的文章，该文章可能会有所帮助：

https://love2dev.com/serviceworker/development-best-practices/

如果您需要在生产环境中进行更新，则有所不同。我通常会对网络资产（您的示例中的CSS文件）进行定期的HEAD请求。如果资源比缓存版本新，我会根据需要更新为最新版本。

我还有不时使用的其他技术。它随应用程序和要求等而变化。