我正在开发一个基于 reactjs 的应用程序。我也service-worker
对它进行了设置。之后add to home screen
,应用程序从不检查服务器是否有新的更新。
我也试过:
window.location.reload(true);
但它不会更新新版本。
我正在使用Apache
服务器来提供build
文件夹和更新我正在获取我的项目的新版本并在Apache
服务器上提供服务。
我正在开发一个基于 reactjs 的应用程序。我也service-worker
对它进行了设置。之后add to home screen
,应用程序从不检查服务器是否有新的更新。
我也试过:
window.location.reload(true);
但它不会更新新版本。
我正在使用Apache
服务器来提供build
文件夹和更新我正在获取我的项目的新版本并在Apache
服务器上提供服务。
两天后我终于解决了我的问题。问题出在service-worker
文件中。如果页面重新加载并且服务器文件发生更改,我必须添加事件侦听器,以便更新文件。
所以我serviceWorker.js
在register
函数中添加了这个部分:
window.addEventListener('activate', function(event) {
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.filter(function(cacheName) {
// Return true if you want to remove this cache,
// but remember that caches are shared across
// the whole origin
}).map(function(cacheName) {
return caches.delete(cacheName);
})
);
})
);
});
只是不要忘记。重新加载页面时调用此侦听器。所以我制作 API 服务来检查是否有新版本。如果有新版本,它必须重新加载页面以获取新文件。
这个问题很有帮助:如何清除服务工作者的缓存?
更新(2019 年 12 月 1 日):
我找到了更新新 PWA 的更好方法。实际上这种方式(以上)不适用于 iOS 13。所以我决定通过 API 检查更新。PWA 将当前版本发送到 API,如果有新版本发布,在 PWA 中我们应该删除所有缓存:
caches.keys().then(function(names) {
for (let name of names)
caches.delete(name);
});
然后重新加载应用程序:
window.location.href = "./";
重新加载后,因为离线模式下没有缓存加载页面,所以 PWA 会检查服务器并获取新版本。
这对我有用:
src/index.tsx
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://cra.link/PWA
serviceWorkerRegistration.register({
onUpdate: (e) => {
const { waiting: { postMessage = null } = {} as any, update } = e || {};
if (postMessage) {
postMessage({ type: 'SKIP_WAITING' });
}
update().then(() => {
window.location.reload();
});
},
});