我可以使用 PWA 和服务人员重置应用程序的样式吗

Question

I have a PWA made with HTML, CSS and JS with Node.js, everytime I change the styles.css of the app, I have to upload it again, Ie change the port. 例如，在 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);
                }
            })
        );
        })
    );
});

Answer 1

如果您这样做是为了开发，只需打开您的开发工具。 Select 应用程序选项卡，然后是服务工作人员面板。 单击“绕过网络”选项。 我写了一篇关于服务工作者开发最佳实践的文章，可能会有所帮助：

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

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

我也时常使用其他技术。 它因应用程序和要求等而异。