I am working on Wappler’s node js application and I have installed PWA in this project. And I have a scenario of background synchronization.
Eg: I have form which send data to server connect. If server connect fails (most likely due to network error) I call a custom js function. This function stores form data in indexedb and registers a sync tag for the service worker. And the service worker should synchronize the data to the server only while it is connected to a network.
But the sync event is called immediately after registering the sync event tag.
(This event works correctly when the offline option of chrome devtools is enabled).
And also, sync event is working correctly in my phone. This error can only be seen in the desktop mode.
How can I fix this ?
This sync tag registration code
function onFailure() {
if (deferredPrompt) {
deferredPrompt.prompt();
}
var form = document.querySelector("form");
//Register the sync on post form error
if ('serviceWorker' in navigator && 'SyncManager' in window) {
navigator.serviceWorker.ready
.then(function (sw) {
var post = {
datetime1: form.datetime1.value,
datetime: form.datetime.value,
name: form.name.value,
image: form.url.value,
message: form.comment.value
};
writeData('sync-comments', post)
.then(function () {
return sw.sync.register('sync-new-comment');
})
.then(function () {
console.log("[Sync tag registered]");
})
.catch(function (err) {
console.log(err);
});
});
}
}
This is the service worker code
self.addEventListener('sync', function (event) {
console.log("[Service worker] Sync new comment", event);
if (event.tag === 'sync-new-comment') {
event.waitUntil(
readAllData('sync-comments')
.then(function (data) {
setTimeout(() => {
data.forEach(async (dt) => {
const url = "/api/post_data/post_new_comment";
const parameters = {
method: 'POST',
headers: {
'Content-Type': "application/json",
'Accept': 'application/json'
},
body: JSON.stringify({
datetime: dt.datetime,
name: dt.name,
url: dt.image,
comment: dt.message,
datetime1: dt.datetime1,
})
};
fetch(url, parameters)
.then((res) => {
return res.json();
})
.then(response => {
if (response && response.datetimeid) deleteItemFromData('sync-comments', response.datetimeid);
}).catch((error) => {
console.log('[error post message]', error.message);
})
})
}, 5000);
})
);
}
});
