⚡App Features

Offline Funktionalitaet

Deine App funktioniert auch ohne Internet

Nutzer erwarten dass Apps auch ohne Verbindung funktionieren. Mit Service Workers und lokalem Caching machst du deine App offline-faehig. Keine Fehlermeldung, keine weisse Seite.

Pro-Tip — Der schnelle Weg
Speichere die wichtigsten Daten in IndexedDB statt localStorage. IndexedDB kann Megabytes an strukturierten Daten speichern und blockiert nicht den Main Thread.
Seite 1
1

Cache-Strategie waehlen

Cache-First fuer statische Assets wie Bilder und Fonts. Network-First fuer dynamische Daten wie API-Responses. Stale-While-Revalidate fuer Content der sich selten aendert.

2

Workbox einrichten

Workbox von Google vereinfacht Service Worker Caching enorm. Es bietet fertige Strategien die du nur noch konfigurieren musst.

npm install workbox-webpack-plugin


// service-worker.js
import { precacheAndRoute } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { CacheFirst, NetworkFirst } from 'workbox-strategies';


precacheAndRoute(self.__WB_MANIFEST);


registerRoute(
 /\.(?:png|jpg|svg)$/,
 new CacheFirst({ cacheName: 'images' })
);
3

API-Daten lokal speichern

Nutze IndexedDB um API-Responses lokal zu speichern. Beim naechsten Aufruf zeigst du die gecachten Daten sofort und aktualisierst im Hintergrund.

// Einfach mit idb-keyval
import { set, get } from 'idb-keyval';


async function fetchWithCache(url: string) {
 const cached = await get(url);
 if (cached && !navigator.onLine) return cached;
 const res = await fetch(url);
 const data = await res.json();
 await set(url, data);
 return data;
}
4

Offline-Erkennung einbauen

Zeige dem Nutzer einen dezenten Hinweis wenn er offline ist. Kein blockierender Fehler, sondern eine Info-Leiste die verschwindet sobald die Verbindung zurueck ist.

const [isOnline, setIsOnline] = useState(navigator.onLine);


useEffect(() => {
 window.addEventListener('online', () => setIsOnline(true));
 window.addEventListener('offline', () => setIsOnline(false));
}, []);


{!isOnline && <Banner text="Du bist offline" />}
5

Offline-Queue fuer Aktionen

Wenn der Nutzer offline etwas speichert, leg die Aktion in eine Queue. Sobald er wieder online ist, sende alle wartenden Requests automatisch ab.

Seite 2
Warum das funktioniert
  • Offline-faehige Apps funktionieren auch bei schlechtem Empfang
  • Gecachte Inhalte laden sofort ohne Netzwerk-Wartezeit
  • Nutzer vertrauen Apps die zuverlaessig funktionieren
  • PWA-Installierbarkeit erfordert Offline-Faehigkeit
Tipps
  • Teste offline indem du im DevTools Network Tab auf Offline stellst
  • Versioniere deinen Cache um veraltete Daten zu vermeiden
  • Speichere nur das Noetigste offline, nicht die gesamte App
  • Background Sync API sendet wartende Requests automatisch
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen