我是 PWA 新手,一直在使用 Firebase 控制台数据库测试我的 PWA 项目。离线时,当我提交帖子数据以便稍后在有 WiFi(在线)时保存时,我有代码将我的帖子数据保存在 indexedDB
中。当没有找到 WiFi 时,它确实将数据保存在 indexedDB
中,但是当我打开 WiFi 时,它不会实时发布我的数据。当我在 wifi 打开(在线)时提交新的发布数据时,后台同步代码会实时发布从 indexedDB
保存的数据和新发布的数据。但我希望我的后台同步代码在 WiFi 打开时(离线后)自动发布。
这是我的后台同步服务工作人员代码:
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);
});
}
})
);
}
});
我不知道出了什么问题。如果有人需要更多我的发帖代码或服务人员代码以便更清楚,请询问。请帮助我解决这个问题,因为我陷入了困境。
最佳答案
您可以做的是使用Online and offline events检查您的应用程序是否再次在线。 。这是一个有据可查的 JS API,是 widely supported以及。
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 热点)。
因此,我建议您在 navigator.onLine
事件中进行一次虚假的 API 调用,以检查实际互联网是否恢复(也可以是简单的握手)一旦成功,您就可以继续进行常规 API 调用。
关于javascript - 在 PWA 中在线(wifi 打开)时,后台同步代码不会自动工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50405573/