Jinsi ya Kutengeneza Background Sync kwa PWA

Jifunze jinsi ya kutumia Background Sync API kwenye Progressive Web App (PWA) yako ili kuhakikisha data inaweza kutumwa kwa server hata wakati mtumiaji yuko offline. Background Sync inarahisisha reliable data submission, kama forms au messages, bila kuhofia connectivity.

Mfano wa Code (Service Worker + Background Sync):

Service Worker (sw.js)

self.addEventListener('sync', event => {
if (event.tag === 'sendFormData') {
event.waitUntil(sendDataToServer());
}
});

// Function to send data
async function sendDataToServer() {
const storedData = await idbGetAll('formData'); // Assume indexedDB for offline storage
for (const data of storedData) {
try {
const response = await fetch('/submit-form', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
});
if (response.ok) {
await idbDelete(data.id); // Remove from IndexedDB after successful sync
}
} catch (err) {
console.error('Sync failed:', err);
}
}
}


Register Background Sync (script.js)

navigator.serviceWorker.ready.then(reg => {
// Save data to IndexedDB first
const formData = { name: 'Faustine', message: 'Hello PWA' };
idbAdd('formData', formData);

// Register sync
return reg.sync.register('sendFormData');
});


Maelezo ya Code:

sync event: Inashughulikia jobs za background wakati network inapatikana.

IndexedDB: Inahifadhi data offline kabla ya ku-sync.

reg.sync.register('sendFormData') inajiandikisha kwa background sync.

Inahakikisha data inatuma kwa server automatically baada ya mtumiaji kurudi online.

Requirements:

Lazima PWA yako iwe na Service Worker.

Browser lazima i-support Background Sync API (Chrome na Edge kwa sasa).

Data ya offline inaweza kuhifadhiwa kwa IndexedDB au localStorage.

🔗 Links Za Kujifunza Zaidi:
🌐 Faulink Official Website:
https://www.faulink.com/

📘 Jifunze Web Design & Programming (Tutorials / Mifumo):
https://www.faulink.com/excel_mifumo.php

📲 Piga / WhatsApp kwa msaada wa haraka:
https://wa.me/255693118509