JavaScript Academy · Lektion

Hintergrundsynchronisierung und Updates

Aktualisieren Sie Caches und synchronisieren Sie, sobald wieder eine Verbindung besteht.

Hintergrundsynchronisierung und Updates ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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 JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Caches aktuell halten

Eine offlinefähige Anwendung muss Aktualisierungen reibungslos verarbeiten: neue Assets ausliefern, alte entfernen und fehlgeschlagene Aktionen erneut versuchen, sobald die Verbindung wiederhergestellt ist. Service Worker bieten Werkzeuge für alle drei Aufgaben.

Versionierte Cache-Namen

Der einfachste Mechanismus für Aktualisierungen ist ein versionierter Cache-Name. Durch das Erhöhen der Version wird ein neuer Cache erstellt, während der alte bei der Aktivierung bereinigt werden kann.

const CACHE = 'app-v2'; // was 'app-v1'
self.addEventListener('install', (e) => {
  e.waitUntil(
    caches.open(CACHE).then(c => c.addAll(ASSETS))
  );
});

Alte Caches bereinigen

Listen Sie im activate-Ereignis alle Cache-Namen auf und löschen Sie alle, die nicht der aktuellen Version entsprechen. Dadurch geben Sie Speicherplatz frei und entfernen veraltete Assets.

self.addEventListener('activate', (e) => {
  e.waitUntil(
    caches.keys().then(names =>
      Promise.all(
        names.filter(n => n !== CACHE)
             .map(n => caches.delete(n))
      )
    )
  );
});

Der wartende Worker

Standardmäßig wird ein neuer Worker installiert, bleibt aber im Zustand waiting, bis alle vom alten Worker gesteuerten Seiten geschlossen sind. So werden Versionskonflikte während einer Sitzung vermieden.

skipWaiting

self.skipWaiting() weist einen wartenden Worker an, sich sofort zu aktivieren und die Kontrolle zu übernehmen, ohne auf das Schließen von Tabs zu warten. Rufen Sie die Methode in install auf, wenn Aktualisierungen sofort angewendet werden sollen.

self.addEventListener('install', (event) => {
  self.skipWaiting(); // activate as soon as installed
});

clients.claim

Nach der Aktivierung ermöglicht self.clients.claim() dem neuen Worker, sofort die Kontrolle über bereits geöffnete Seiten zu übernehmen, statt nur zukünftige Navigationen zu steuern.

self.addEventListener('activate', (event) => {
  event.waitUntil(self.clients.claim());
});

Aktualisierungen von der Seite erkennen

Die Seite kann über das updatefound-Ereignis der Registrierung auf einen neuen Worker warten und anschließend den Benutzer zum Neuladen auffordern, damit die aktuelle Version geladen wird.

reg.addEventListener('updatefound', () => {
  const sw = reg.installing;
  sw.addEventListener('statechange', () => {
    if (sw.state === 'installed') {
      console.log('new version available - reload to update');
    }
  });
});

Background Sync

Mit der Background Sync API können Sie eine Aktion, etwa das Senden eines Formulars, zurückstellen, bis das Gerät wieder eine Verbindung hat. Sie registrieren ein Sync-Tag, und der Browser löst das sync-Ereignis aus, sobald eine Onlineverbindung besteht.

// In the page, after queuing data:
reg.sync.register('send-messages')
  .then(() => console.log('sync scheduled'));

Das sync-Ereignis behandeln

Hören Sie im Service Worker auf sync und gleichen Sie das Tag ab. Verwenden Sie waitUntil, damit der Browser den Worker am Leben hält, bis der erneute Versuch abgeschlossen ist.

self.addEventListener('sync', (event) => {
  if (event.tag === 'send-messages') {
    event.waitUntil(sendQueuedMessages());
  }
});

Muster: Erst in die Warteschlange, dann synchronisieren

Ein robuster Offline-Ablauf: Speichern Sie die ausstehende Aktion in IndexedDB, registrieren Sie eine Synchronisierung und lesen Sie im sync-Handler die Warteschlange aus. Senden Sie jedes Element per POST und entfernen Sie es bei Erfolg.

async function sendQueuedMessages() {
  const items = await readQueueFromIndexedDB();
  for (const item of items) {
    await fetch('/api/messages', {
      method: 'POST',
      body: JSON.stringify(item)
    });
  }
  await clearQueue();
}

Zusammenfassung zu Aktualisierungen und Synchronisierung

Zusammen machen diese Funktionen Anwendungen widerstandsfähig: Versionierte Caches und ihre Bereinigung halten Assets aktuell, skipWaiting/clients.claim steuern den Zeitpunkt der Einführung, und Background Sync schließt Aktionen zuverlässig ab, sobald der Benutzer wieder online ist.

Kurzer Test

Testen Sie Ihr Verständnis von Aktualisierungen und Background Sync.

Zusammenfassung

Sie haben Aktualisierungen und Background Sync kennengelernt:

Verwenden Sie versionierte Cache-Namen und bereinigen Sie alte Caches bei activate.
skipWaiting und clients.claim steuern den Zeitpunkt von Aktualisierungen.
Erkennen Sie neue Versionen über updatefound.
Background Sync stellt Aktionen mithilfe des sync-Ereignisses zurück, bis eine Onlineverbindung besteht.
Speichern Sie Aktionen in IndexedDB zwischen und leeren Sie die Warteschlange bei der Synchronisierung.

Sie haben den Abschnitt zu Service Workern und Offline-Caching abgeschlossen.

Häufig gestellte Fragen

Ist die Lektion „Hintergrundsynchronisierung und Updates“ kostenlos?

Ja — der vollständige Text von „Hintergrundsynchronisierung und Updates“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Hintergrundsynchronisierung und Updates“?

Aktualisieren Sie Caches und synchronisieren Sie, sobald wieder eine Verbindung besteht. Du übst JavaScript 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 JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript 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 4 von 4.

Wie lange dauert die Lektion „Hintergrundsynchronisierung und Updates“?

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 JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript 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

← Zurück zu JavaScript Academy