我和我的团队有一个最初作为 PWA 构建的项目,但后来决定放弃这个想法,因为我们意识到它需要比最初预期的更频繁地更改。但是,Service Worker 以及重新设计的网站登陆页面已经上线。尽管我们尽一切努力清除 PWA 缓存,但我们的客户仍然报告说他们收到的是网站的旧缓存版本。
目前,我们设置了 service worker 以在安装时删除所有缓存(作为预防措施,无论何时发生任何事情),以及一些 JavaScript 以在新页面实际 负载。然而,问题在于,在用户向网站发出请求之前,这些都不会运行,而此时浏览器已经加载了缓存的内容。是否可以清除此缓存并阻止浏览器加载任何已缓存的内容?
当前的 service-worker.js
// Caching
var cacheCore = 'mkeSculptCore-0330121058';
var cacheAssets = 'mkeSculptAssets-0330121058';
self.addEventListener('install', function (event) {
self.skipWaiting();
caches.keys().then(function (names) {
for (let name of names)
caches.delete(name);
});
});
self.addEventListener('activate', function (event) {
caches.keys().then(function (names) {
for (let name of names)
caches.delete(name);
});
});
self.addEventListener('fetch', function (event) {
caches.keys().then(function (names) {
for (let name of names)
caches.delete(name);
});
});
index.html 中的脚本
(function () {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.getRegistrations().then(function (registrations) {
//returns installed service workers
if (registrations.length) {
for (let registration of registrations) {
registration.unregister();
}
}
});
}
})();
到目前为止,我已经阅读了一些其他类似的 StackOverflow 答案,including this one ,但他们倾向于依赖用户手动执行某些操作来获取新内容,即。通过硬重新加载或通过浏览器设置手动禁用服务 worker 。但是,就我而言,我们不能依赖手动用户操作。
最佳答案
解决这个问题的一种方法是在文件(js,css)名称的末尾添加一个时间戳,这样每次发出请求时,缓存键在服务 worker 中不可用,因此它倾向于在每次加载时获取文件的新版本。
<script type="text/javascript" src="/js/scipt1.js?t=05042018121212"/>
要在文件名中动态附加新的时间戳,请检查 answer
但如果 HTML 本身被缓存,这可能不可靠。
关于javascript - 您可以在页面加载之前禁用 Service Worker 吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49658974/