Offlineondersteuning en achtergrondsynchronisatie
API-responses cachen, IndexedDB gebruiken voor offline data en achtergrondsynchronisatie voor uitgestelde acties.
Offlineondersteuning en achtergrondsynchronisatie is een gratis Vue Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Vue Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Vue Academy bevat in totaal 4 lessen.
Denken vanuit offlinefunctionaliteit
Echte offlineondersteuning betekent dat de app zonder netwerk blijft werken: leesbewerkingen komen uit een lokale opslag en schrijfbewerkingen worden in de wachtrij geplaatst en later gesynchroniseerd wanneer de verbinding terugkeert.
IndexedDB voor lokale opslag
IndexedDB is de grote, gestructureerde, asynchrone opslag van de browser. De basis-API is omslachtig, dus de meeste apps gebruiken de kleine wrapperbibliotheek idb.
npm install idbEen database openen met idb
openDB retourneert een databasekoppeling op basis van beloften. Definieer object stores in de terugbelfunctie upgrade.
import { openDB } from "idb";
const db = await openDB("app-db", 1, {
upgrade(db) {
db.createObjectStore("todos", { keyPath: "id" });
db.createObjectStore("outbox", { keyPath: "id", autoIncrement: true });
}
});Lezen en schrijven
Gebruik get, getAll en put om records te lezen en op te slaan. Deze functies retourneren beloften waarop je kunt wachten met await.
await db.put("todos", { id: 1, text: "Buy milk" });
const all = await db.getAll("todos");Offline detecteren met navigator.onLine
navigator.onLine is een booleaanse waarde die aangeeft of er verbinding is. Lees deze waarde om te kiezen tussen netwerkgedrag en lokaal gedrag.
if (!navigator.onLine) {
// work from IndexedDB only
}Reageren op verbindingsgebeurtenissen
Het venster activeert de gebeurtenissen online en offline. Koppel er een reactieve ref aan, zodat de gebruikersinterface de status live weergeeft.
import { ref, onMounted, onUnmounted } from "vue";
const online = ref(navigator.onLine);
const on = () => (online.value = true);
const off = () => (online.value = false);
onMounted(() => {
window.addEventListener("online", on);
window.addEventListener("offline", off);
});
onUnmounted(() => {
window.removeEventListener("online", on);
window.removeEventListener("offline", off);
});Mutaties offline in de wachtrij zetten
Wanneer je offline een schrijfbewerking uitvoert, sla je deze op in een outbox-opslag in plaats van de bewerking te verzenden. De gebruikersinterface wordt optimistisch bijgewerkt vanuit de lokale status.
async function saveTodo(todo) {
await db.put("todos", todo);
if (!navigator.onLine) {
await db.add("outbox", { type: "saveTodo", payload: todo });
} else {
await api.save(todo);
}
}Synchroniseren bij opnieuw verbinden
Wanneer de gebeurtenis online wordt geactiveerd, verwerk je de outbox volledig: speel elke mutatie uit de wachtrij opnieuw af tegen de server en wis de wachtrij daarna.
async function flushOutbox() {
const items = await db.getAll("outbox");
for (const item of items) {
await api.send(item);
await db.delete("outbox", item.id);
}
}
window.addEventListener("online", flushOutbox);De Background Sync API
Voor synchronisatie nadat het tabblad is gesloten, registreert de Background Sync API van de serviceworker een synchronisatietag die de browser activeert zodra de verbinding terugkeert.
const reg = await navigator.serviceWorker.ready;
await reg.sync.register("flush-outbox");Synchronisatie in de worker afhandelen
De serviceworker luistert naar de gebeurtenis sync en voert de verzendlogica op de achtergrond uit.
// service worker
self.addEventListener("sync", (event) => {
if (event.tag === "flush-outbox") {
event.waitUntil(flushOutbox());
}
});Overwegingen bij conflicten
Het opnieuw afspelen van schrijfbewerkingen uit de wachtrij kan conflicteren met wijzigingen op de server. Gebruik versies, tijdstempels of regels waarbij de laatste schrijfbewerking wint, en maak onopgeloste conflicten zichtbaar voor de gebruiker.
Korte controle
Hoe moeten schrijfbewerkingen worden afgehandeld terwijl de app offline is?
Samenvatting
Ondersteuning voor offline gebruik slaat gegevens op in IndexedDB (via de bibliotheek idb), detecteert de verbinding met navigator.onLine en de gebeurtenissen online/offline, plaatst wijzigingen offline in een wachtrij voor uitgaande bewerkingen en synchroniseert ze opnieuw zodra de verbinding is hersteld - eventueel met de Background Sync API van de serviceworker. Plan voor conflicten bij het opnieuw afspelen van schrijfbewerkingen uit de wachtrij.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 42
- Lessen
- 156
Veelgestelde vragen
Is de les “Offlineondersteuning en achtergrondsynchronisatie” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Vue Academy, waaronder “Offlineondersteuning en achtergrondsynchronisatie”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Vue Academy bevat in totaal 4 lessen.
Wat leer ik in “Offlineondersteuning en achtergrondsynchronisatie”?
API-responses cachen, IndexedDB gebruiken voor offline data en achtergrondsynchronisatie voor uitgestelde acties. Je oefent met Vue Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Vue Academy te beginnen?
Ervaring vooraf is niet nodig. Vue Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.
Hoe lang duurt de les “Offlineondersteuning en achtergrondsynchronisatie”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Vue Academy?
Ja. Elke les over Vue Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- vite-plugin-pwa instellen
- Strategieën voor service workers
- Offlineondersteuning en achtergrondsynchronisatie
- Pushmeldingen in een Vue PWA