Javascript PWA中联机(wifi打开)时后台同步代码不自动工作
我是PWA新手,一直在使用firebase控制台数据库测试我的PWA项目。脱机时,我有代码将我的帖子数据保存在Javascript PWA中联机(wifi打开)时后台同步代码不自动工作,javascript,service-worker,progressive-web-apps,background-sync,Javascript,Service Worker,Progressive Web Apps,Background Sync,我是PWA新手,一直在使用firebase控制台数据库测试我的PWA项目。脱机时,我有代码将我的帖子数据保存在indexedDB中,当我将帖子数据提交到以后有WiFi(联机)时保存。当没有找到WiFi时,它确实将数据保存在indexedDB中,但当我打开WiFi时,它不会实时发布我的数据。当我在wifi开启(在线)时提交新的帖子数据时,后台同步代码会将indexedDB中保存的数据与新的帖子数据实时发布。但我希望我的背景同步代码在WiFi开启时(离线后)自动发布 window.addEventL
indexedDB
中,当我将帖子数据提交到以后有WiFi(联机)时保存。当没有找到WiFi时,它确实将数据保存在indexedDB
中,但当我打开WiFi时,它不会实时发布我的数据。当我在wifi开启(在线)时提交新的帖子数据时,后台同步代码会将indexedDB
中保存的数据与新的帖子数据实时发布。但我希望我的背景同步代码在WiFi开启时(离线后)自动发布
window.addEventListener('load', function() {
function updateOnlineStatus(event) {
if (navigator.onLine) {
// handle online status
// re-try api calls
console.log('device is now online');
} else {
// handle offline status
console.log('device is now offline');
}
}
window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);
});
以下是我的后台同步服务人员代码:
self.addEventListener('sync', function(event) {
console.log('Background syncing...', event);
if (event.tag === 'sync-new-posts') {
console.log('Syncing new Posts...');
event.waitUntil(
readAllData('sync-posts') // function to read all saved data which had been saved when offline
.then(function(data) {
for (var dt of data) {
fetch('xxx some firebase post url xxx', { // fetching for sending saved data to firebase database
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify({
id: dt.id,
title: dt.title,
content: dt.content
})
})
.then(function(res) {
console.log('Sent data', res);
if (res.ok) {
res.json()
.then(function (resData) {
deleteItemFromData('sync-posts', resData .id); // function for deleting saved post data from indexedDB as we donot need after realtime post is saved when online.
});
}
})
.catch(function(err) {
console.log('Error while sending data', err);
});
}
})
);
}
});
window.addEventListener('load', function() {
function updateOnlineStatus(event) {
if (navigator.onLine) {
// handle online status
// re-try api calls
console.log('device is now online');
} else {
// handle offline status
console.log('device is now offline');
}
}
window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);
});
我不知道出了什么问题。如果有人需要更多的我的代码、我的张贴代码或服务人员代码,请务必询问。请帮我解决这个问题,因为我陷入了困境。你可以做的是检查你的应用程序是否再次联机或未使用。这是一个有很好文档记录的JSAPI,也是
window.addEventListener('load', function() {
function updateOnlineStatus(event) {
if (navigator.onLine) {
// handle online status
// re-try api calls
console.log('device is now online');
} else {
// handle offline status
console.log('device is now offline');
}
}
window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);
});
注意:它只能判断设备是否已连接。但它无法区分工作的互联网连接还是仅仅连接(例如,没有实际互联网连接的WiFi热点)
window.addEventListener('load', function() {
function updateOnlineStatus(event) {
if (navigator.onLine) {
// handle online status
// re-try api calls
console.log('device is now online');
} else {
// handle offline status
console.log('device is now offline');
}
}
window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);
});
因此,我建议您在
navigator.onLine
事件中进行一次假API调用,以检查实际的internet是否恢复(也可以是一次简单的握手),一旦成功,您可以继续进行常规API调用。检查是否关闭了重新加载时更新,并且您完全处于脱机状态。我有同样的问题,然后它随机开始工作时更新重新加载被关闭。我认为这是因为它在每次刷新页面时都会重新安装service worker,这样您就不会处于service worker正在侦听同步的状态。无论如何,这是我的理论。希望这有助于……谢谢您的回答。但我希望在后台运行的服务人员(后台同步代码)能够自动发布我的帖子数据,如果wifi/internet再次恢复,这些数据将保存在indexedDB中。您的上述代码是否检查/检测wifi/互联网是否从后台自动打开?它没有提供我的结果。是的,它会在连接再次恢复时检测
window.addEventListener('load', function() {
function updateOnlineStatus(event) {
if (navigator.onLine) {
// handle online status
// re-try api calls
console.log('device is now online');
} else {
// handle offline status
console.log('device is now offline');
}
}
window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);
});