PWA:服务工作人员更新了但没有缓存文件
PWA:服务工作人员更新了但没有缓存文件
提问于 2018-07-14 09:51:17
我目前正试图从头开始构建一个PWA。我在处理更新时遇到了一些麻烦。
基于这篇文章，我编写了一个代码，在新版本的服务工作人员可用时显示按钮。单击按钮时，将安装新工作人员，并将shell文件存储在缓存中。
为了测试这个特性，我只使用一个index.html和一个service-worker.js文件构建了一个最小的示例。
var cache_version = 'v2';
var cache_name = 'test-pwa-'+cache_version;
var shell_files = [
'./index.html'
];
self.addEventListener('message', evt => {
if (evt.data.action == 'skipWaiting')
self.skipWaiting();
});
self.addEventListener('install', evt => {
evt.waitUntil(caches.open(cache_name).then(cache => {
return cache.addAll(shell_files);
}));
});
self.addEventListener('activate', evt => {
evt.waitUntil(caches.keys().then(key_list => {
return Promise.all(key_list.map(key => {
if (cache_name.indexOf(key) === -1)
return caches.delete(key);
}));
}));
});
self.addEventListener('fetch', evt => {
evt.respondWith(
caches.match(evt.request).then(cache_response => {
return cache_response || fetch(evt.request).then(response => {
return caches.open(cache_name).then(cache => {
cache.put(evt.request, response.clone());
return response;
});
});
})
);
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test of PWA</title>
</head>
<body>
<h1>Hello World!</h1>
<p id="refresh" style="display: none;"><button>New update!</button></p>
<script>
if ('serviceWorker' in navigator) {
var new_worker;
var refreshing = false;
navigator.serviceWorker.addEventListener('controllerchange', () => {
if (refreshing)
return;
window.location.reload();
refreshing = true;
});
navigator.serviceWorker.register('service-worker.js').then(registration => {
registration.addEventListener('updatefound', () => {
new_worker = registration.installing;
new_worker.addEventListener('statechange', () => {
if (new_worker.state == 'installed' && navigator.serviceWorker.controller) {
var notification = document.querySelector('#refresh');
notification.querySelector('button').addEventListener('click', () => {
new_worker.postMessage({action: 'skipWaiting'});
});
notification.style.display = 'block';
}
});
});
}).catch(err => {
console.log('Something went wrong during the registration');
});
}
</script>
</body>
</html>
现在，我修改HTML文件，例如，在标题之后添加一个新的段落元素。然后，在服务工作者中更改cache_version变量。当我重新加载页面时，将显示“更新”按钮。当我点击它时，我可以看到(在Firefox工具中)旧的缓存被删除了，并且一个新的缓存文件夹按预期被创建。但是，index.html文件没有改变(我没有看到新的段落)。
有什么想法吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-15 09:28:21
感谢C14L的评论，我发现问题来自HTTP。为了调试，我们可以从浏览器的工具中禁用缓存。对于生产，我们可以绕过HTTP或使用.htaccess文件控制它。我为那些感兴趣的人找到了一些有用的信息，这里。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51337296
复制相关文章
相似问题
腾讯云开发者
