如何解决我可以通过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请求。如果资源比缓存版本新,我会根据需要更新为最新版本。
我还有不时使用的其他技术。它随应用程序和要求等而变化。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。