我使用 HTML、CSS 和 Javascript 开发了一个 PWA 应用程序。当我在浏览器中打开时,我收到 add to home screen
的提示。点击后,应用会添加到 home screen
和移动设备中的 Apps
。我有以下服务工作者代码。
//VERSION: 3
const pb_cache = "cv1";
const assets = [
"./manifest.json",
"./index.html",
"./offline.html",
]
self.addEventListener("install", installEvent => {
installEvent.waitUntil(
caches.open(pb_cache)
.then((cache) => {
return cache.addAll(assets)
.then(() => {
return self.skipWaiting(); //To forces the waiting service worker to become the active service worker
})
})
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
if (response) {
return response;
}
return fetch(event.request).then(function(response) {
if (response.status === 404) {
return caches.match('/offline.html');
}
return response
});
}).catch(function() {
return caches.match('/offline.html');
})
);
});
我在服务工作线程 //VERSION: 3
顶部使用哈希来提供应用更新。一旦应用程序打开并且网络可用,Service Worker 就会更新所有缓存。如果没有网络,则从缓存中获取资源。一切正常。每当打开应用程序时,应用程序就会更新。但最近,该应用程序正在更新。我必须清除移动 Chrome 浏览器缓存才能使应用自行更新。
编写代码是为了绕过本地缓存。我做错了什么?
如果可能的话,我想通知客户有可用的更新。并且仅当用户单击更新通知时才更新应用程序。是否值得做,或者我应该在应用程序打开且网络可用时进行更新?