Sobes.tech
Hilfe bei Vorstellungsgesprächen
Ressourcen
Vorbereitung auf Vorstellungsgespräche
Ressourcen
Jobsuche
Ressourcen
Legal
Zurück zu den Fragen
Middle

Was ist der Anwendungs-Cache in HTML5?

sobes.tech KI

Antwort von AI

Der Application Cache in HTML5 ist ein Mechanismus, der es Webanwendungen ermöglicht, offline zu funktionieren, indem eine Reihe von Ressourcen (HTML-Seiten, CSS, JavaScript, Bilder) lokal im Browser zwischengespeichert werden.

Um Application Cache wird durch eine Manifest-Datei mit der Erweiterung .appcache genutzt, die über das manifest-Attribut im <html>-Tag mit der HTML-Seite verbunden ist:

<html manifest="manifest.appcache">
...
</html>

Die Manifest-Datei hat folgende Struktur:

CACHE MANIFEST
# Version des Manifests (optional, zur Aktualisierung des Caches)
# v1.0

CACHE:
# Explizit zwischengespeicherte Ressourcen
/css/style.css
/js/script.js
/images/logo.png

FALLBACK:
# Reserve-Ressourcen bei fehlender Verbindung
/offline.html /

NETWORK:
# Ressourcen, die immer aus dem Netzwerk geladen werden sollen
*

Die wichtigsten Sektionen der Manifest-Datei sind:

  • CACHE:: Ressourcen, die in dieser Sektion aufgelistet sind, werden nach dem ersten Laden der Seite mit dem angegebenen Manifest zwischengespeichert.
  • FALLBACK:: Definiert Reserve-Ressourcen. Wenn eine Netzwerkanfrage für eine Hauptressource fehlschlägt, lädt der Browser die angegebene Reserve-Ressource. Format: Hauptressource Reserve-Ressource.
  • NETWORK:: Ressourcen, die in dieser Sektion aufgelistet sind, werden niemals zwischengespeichert und immer aus dem Netzwerk geladen. Das Symbol * bedeutet, dass alle Ressourcen, die in anderen Sektionen nicht aufgelistet sind, immer aus dem Netzwerk geladen werden.

Die Aktualisierung des Application Cache erfolgt, wenn sich die Manifest-Datei ändert. Der Browser lädt das aktualisierte Manifest herunter, vergleicht es mit dem aktuellen und lädt neue oder geänderte Ressourcen. Neue Dateien sind erst nach einem Neuladen der Seite verfügbar.

Ereignisse im Zusammenhang mit dem Application Cache:

  • checking: Der Browser prüft, ob eine neue Version des Manifests vorhanden ist.
  • downloading: Der Browser lädt die in der neuen Manifest-Version angegebenen Ressourcen herunter.
  • progress: Fortschritt beim Herunterladen der Ressourcen.
  • updateready: Die neue Cache-Version ist bereit zur Verwendung. Es ist ein Neuladen der Seite erforderlich.
  • cached: Ressourcen wurden beim ersten Mal erfolgreich zwischengespeichert.
  • noupdate: Das Manifest hat sich nicht geändert.
  • error: Es ist ein Fehler beim Laden oder Aktualisieren des Caches aufgetreten.

Die API des Application Cache ist über window.applicationCache zugänglich.

// Überprüfung des Cache-Status
console.log(window.applicationCache.status);

// Ereignisbehandlung für updateready
window.applicationCache.addEventListener('updateready', function() {
  if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
    // Neue Cache-Version anwenden und Seite neu laden
    window.applicationCache.swapCache();
    window.location.reload();
  }
}, false);

Obwohl der Application Cache Offline-Fähigkeiten bot, wird seine Verwendung in neuen Projekten aufgrund der Komplexität der Verwaltung, Problemen bei Updates und mangelnder Flexibilität nicht empfohlen. Für moderne Offline-Zugriffe und andere Funktionen progressiver Web-Apps (PWA) werden Service Workers verwendet.

ZurückAls nächstes