我有一个简单的PWA,在Github页面上进行更新和更改。
当我对网站进行更新时,使用该网站的设备上不会显示更新内容,因为(至少我认为)它被缓存了。我没有任何服务工作者来缓存该网站。
即使从网站进行普通刷新(使用所有这些方法),也无法刷新并显示更改。在iOS上,我需要手动进入设置并清除网站数据才能看到更改。
如何解决这个问题?
我有一个简单的PWA,在Github页面上进行更新和更改。
当我对网站进行更新时,使用该网站的设备上不会显示更新内容,因为(至少我认为)它被缓存了。我没有任何服务工作者来缓存该网站。
即使从网站进行普通刷新(使用所有这些方法),也无法刷新并显示更改。在iOS上,我需要手动进入设置并清除网站数据才能看到更改。
如何解决这个问题?
更新
浏览器会在导航后自动检查更新(最迟每24小时一次)。但是,您也可以手动触发更新(例如,您可以设置一个计时器,每小时触发一次或根据您的需求触发):
navigator.serviceWorker.register('/sw.js').then(reg => {
// ...
// Trigger this after your timeout
reg.update();
});
或者您可以使用updatefound
事件来检测代码中是否有新的sw版本可用:
ServiceWorkerRegistration接口的onupdatefound属性是一个EventListener属性,每当statechange类型的事件被触发时都会调用它;它会在ServiceWorkerRegistration.installing属性获取新的服务工作者时触发。
navigator.serviceWorker.register('/sw.js').then(reg => {
reg.addEventListener('updatefound', () => {
const newSW = reg.installing;
newSW.addEventListener('statechange', () => {
// Check service worker state
if (newSW.state === 'installed') {
// A new SW is available and installed.
// You can update the page directly or better
// show a notification to the user to prompt for a page reload
// and inform about the new version available
}
});
});
});