Offline-Unterstützung und Background Sync
API-Antworten cachen, IndexedDB für Offlinedaten nutzen und zurückgestellte Aktionen per Background Sync ausführen
Offline-Unterstützung und Background Sync ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Offline-First-Denken
Echte Offline-Unterstützung bedeutet, dass die Anwendung ohne Netzwerkverbindung weiterarbeitet: Lesezugriffe kommen aus einem lokalen Speicher und Schreibvorgänge werden in eine Warteschlange gestellt und synchronisiert, sobald die Verbindung wiederhergestellt ist.
IndexedDB für lokale Speicherung
IndexedDB ist der große, strukturierte und asynchrone Speicher des Browsers. Die direkte API ist umfangreich, daher verwenden die meisten Anwendungen die kleine Wrapper-Bibliothek idb.
npm install idbEine Datenbank mit idb öffnen
openDB gibt ein Promise-basiertes Datenbank-Handle zurück. Definieren Sie Objektspeicher im upgrade-Callback.
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 });
}
});Lesen und Schreiben
Verwenden Sie get, getAll und put, um Datensätze zu lesen und zu speichern. Diese Methoden geben Promises zurück, auf die Sie mit await warten können.
await db.put("todos", { id: 1, text: "Buy milk" });
const all = await db.getAll("todos");Offline-Erkennung mit navigator.onLine
navigator.onLine ist ein boolescher Wert, der die Verbindung angibt. Lesen Sie ihn aus, um zwischen Netzwerk- und lokalem Verhalten zu unterscheiden.
if (!navigator.onLine) {
// work from IndexedDB only
}Auf Verbindungsereignisse reagieren
Das Window löst die Ereignisse online und offline aus. Binden Sie eine reaktive Ref daran, damit die Benutzeroberfläche den Status in Echtzeit widerspiegelt.
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);
});Mutationen offline in die Warteschlange stellen
Wenn offline ein Schreibvorgang stattfindet, speichern Sie ihn in einem Outbox-Speicher, statt ihn zu senden. Die Benutzeroberfläche wird anhand des lokalen Zustands optimistisch aktualisiert.
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);
}
}Beim Wiederverbinden synchronisieren
Wenn das Ereignis online ausgelöst wird, leeren Sie die Outbox: Spielen Sie jede wartende Mutation auf dem Server erneut ab und leeren Sie anschließend die Outbox.
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);Die Background-Sync-API
Damit die Synchronisierung auch nach dem Schließen des Tabs fortgesetzt wird, registriert die Background-Sync-API des Service Workers ein Sync-Tag, das der Browser bei wiederhergestellter Verbindung auslöst.
const reg = await navigator.serviceWorker.ready;
await reg.sync.register("flush-outbox");Synchronisierung im Worker verarbeiten
Der Service Worker wartet auf das sync-Ereignis und führt die Logik zum Leeren der Warteschlange im Hintergrund aus.
// service worker
self.addEventListener("sync", (event) => {
if (event.tag === "flush-outbox") {
event.waitUntil(flushOutbox());
}
});Überlegungen zu Konflikten
Beim erneuten Ausführen wartender Schreibvorgänge kann es zu Konflikten mit Änderungen auf dem Server kommen. Verwenden Sie Versionen, Zeitstempel oder Regeln wie „letzter Schreibvorgang gewinnt“ und machen Sie ungelöste Konflikte für die Benutzer sichtbar.
Kurzer Check
Wie sollten Schreibvorgänge verarbeitet werden, während die App offline ist?
Zusammenfassung
Die Offline-Unterstützung speichert Daten in IndexedDB (über die Bibliothek idb), erkennt die Verbindung mit navigator.onLine und den Ereignissen online/offline, reiht Mutationen während der Offline-Zeit in einer Outbox ein und synchronisiert sie nach der Wiederverbindung – optional mit der Background Sync API des Service Workers. Planen Sie beim erneuten Ausführen wartender Schreibvorgänge den Umgang mit Konflikten ein.
Häufig gestellte Fragen
Ist die Lektion „Offline-Unterstützung und Background Sync“ kostenlos?
Ja — der vollständige Text von „Offline-Unterstützung und Background Sync“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Offline-Unterstützung und Background Sync“?
API-Antworten cachen, IndexedDB für Offlinedaten nutzen und zurückgestellte Aktionen per Background Sync ausführen Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Vue Academy zu starten?
Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Offline-Unterstützung und Background Sync“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?
Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- vite-plugin-pwa einrichten
- Strategien für Service Worker
- Offline-Unterstützung und Background Sync
- Push-Benachrichtigungen in Vue-PWAs