Wie programmiert man eine Offline-Funktionalität für den Währungsumrechner?
- Grundidee der Offline-Funktionalität
- Speicherung und Aktualisierung der Wechselkurse
- Implementierung von Offline-Logik mit localStorage
- Verbesserung durch Service Worker
- Fazit
Grundidee der Offline-Funktionalität
Um einen Währungsumrechner auch offline funktionsfähig zu machen, ist es notwendig, relevante Daten und Logik lokal im Browser zu speichern. Normalerweise erfordert ein Währungsumrechner aktuelle Wechselkurse, welche online von APIs bezogen werden. Diese Daten lassen sich jedoch zwischenspeichern, sodass der Rechner auch ohne Internetverbindung zumindest mit einem Stand der letzten Online-Abfrage arbeiten kann. Das bedeutet, die Anwendung lädt die Wechselkurse bei Zugriff auf das Internet und sichert sie lokal ab, beispielsweise in localStorage oder IndexedDB. Zusätzlich kann eine Service Worker-basierte Cache-Strategie sicherstellen, dass die gesamte Anwendung offline verfügbar bleibt.
Speicherung und Aktualisierung der Wechselkurse
Die Kernherausforderung ist das Speichern der Wechselkurse. Dazu kann man beim ersten Online-Zugriff die Kurse von einer API abfragen, zum Beispiel von ExchangeRate-API oder ExchangeRatesAPI. Anschließend speichert man das Ergebnis als JSON im localStorage oder, für größere und komplexere Datenmengen, in IndexedDB. IndexedDB ist robuster und asynchron, während localStorage synchron und limitiert ist.
Um veraltete Wechselkurse zu vermeiden, sollte die App prüfen, wann die Daten zuletzt aktualisiert wurden. Ist das Alter der Daten zu groß, wird beim nächsten Online-Zugriff eine Aktualisierung durchgeführt.
Implementierung von Offline-Logik mit localStorage
Hier ein vereinfachtes Beispiel, wie man Wechselkurse per Fetch holt, speichert und offline nutzt:
async function fetchRates() { try { const response = await fetch(https://api.exchangerate-api.com/v4/latest/EUR); if (!response.ok) throw new Error(Netzwerkantwort nicht ok); const data = await response.json(); // Daten mit Zeitstempel speichern localStorage.setItem(rates, JSON.stringify({ timestamp: Date.now(), data: data })); return data; } catch (error) { console.warn(Fetch fehlgeschlagen, verwende gespeicherte Daten, error); const stored = localStorage.getItem(rates); if (stored) { return JSON.parse(stored).data; } else { throw new Error(Keine Wechselkurse verfügbar); } }}// Beispiel einer Funktion, die die Umrechnung durchführtasync function convertCurrency(amount, fromCurrency, toCurrency) { const ratesData = await fetchRates(); const rates = ratesData.rates; // Umrechnung über EUR (Basiswährung) const amountInEUR = amount / rates ; const convertedAmount = amountInEUR * rates ; return convertedAmount;}In diesem Beispiel wird bei einem Netzwerkfehler auf gespeicherte Daten zurückgegriffen. So bleibt die App auch offline funktionsfähig.
Verbesserung durch Service Worker
Um die ganze Anwendung offline zugänglich zu machen, kann ein Service Worker eingesetzt werden. Dieser lädt beim ersten Start wichtige Dateien wie HTML, CSS, JavaScript und auch statische Assets (Icons, Fonts) vorab in einen Cache. Beim späteren Start greift die App dann direkt auf diese gecachten Dateien zu, auch ohne Internetverbindung.
Die Wechselkurse können zusätzlich im Cache oder weiterhin im localStorage gespeichert werden. Optional kann der Service Worker auch Netzwerk-Anfragen an die API abfangen, im Hintergrund aktualisieren und dabei zwischengespeicherte Versionen zurückgeben, falls keine Verbindung vorhanden ist.
Fazit
Die Offline-Funktion für einen Währungsumrechner basiert auf einer Kombination von lokalem Datenspeicher (localStorage oder IndexedDB) und einer Cache-Strategie mit Service Workern. Kernpunkt ist, dass die Wechselkurse bei Verfügbarkeit einer Internetverbindung abgefragt und zwischengespeichert werden, um sie bei Offline-Nutzung zu verwenden. Die Anwendung sollte Datenalter prüfen und gegebenenfalls beim nächsten Online-Zugriff aktualisieren, um möglichst genaue Umrechnungsergebnisse zu gewährleisten. Durch den Service Worker wird die gesamte Anwendung offline bedienbar inklusive Oberfläche und zugehörigen Skripten.