JavaScript/Tutorials/App/Offline-Browsing

Aus SELFHTML-Wiki
< JavaScript‎ | Tutorials‎ | App(Weitergeleitet von Offline-Browsing)
Wechseln zu: Navigation, Suche

Offline-Browsing[Bearbeiten]

Webseiten werden online angeschaut, Apps heruntergeladen und später benutzt. Was beim Begriff Offline-Browsing wie ein Widerspruch in sich klingt, wird heute immer wichtiger: Benutzer laden Webseiten und wollen sie später offline noch einmal anschauen. Dafür hat HTML5 eine AppCache-Schnittstelle entwickelt, die dem Browser über den offline-Event signalisiert, dass es keine Verbindung zum Internet und damit zum Server gibt.

Um jetzt weiterarbeiten zu können, nutzen die Browser nun die im Cache gespeicherten Dateien, Skripte und Bilder. Um hier eine einheitliche Schnittstelle zur Verfügung zu stellen, wird beim ersten Aufrufen der Seite ein Manifest geladen, in dem alle für das Offline-Browsing benötigten Ressourcen aufgeführt sind.

Die AppCache-Schnittstelle war allerdings nicht ganz einfach zu handhaben. Ja, war. Firefox ab Version 84 und Chromium-Browser ab Version 85 haben die Unterstützung eingestellt. Wenn man bedenkt, wieviele Altlasten Webbrowser aus Kompatibilitätsgründen mitschleppen, ist dieser Schritt ziemlich radikal. Wenn Sie Englisch können und abwechselnd herzhaft lachen und weinen möchten, lesen Sie Jake Archibalds Artikel Application Cache is a Douchebag bei A List Apart, um die Gründe dafür zu erfahren. An Stelle von AppCache setzen die heutigen Browser auf das Service Worker-API, das neben einer flexiblen Verwaltung der Dateien im Offline-Modus auch Push Notifications erlaubt.

AppCache wird heute (September 2021) noch vom Internet Explorer unterstützt (ja, tatsächlich, der unterstützt mal was!), und von Safari (Eintrag bei caniuse.com).

Die folgenden Abschnitte beschreiben demnach eine Technologie, die bald verschwinden wird, und diese Abschnitte werden es irgendwann wohl auch tun.

manifest-Attribut[Bearbeiten]

Das manifest-Attribut legt die URL des Cache Manifest fest. Das ist eine Textdatei, in der Sie angeben können, welche Dateien der Browser zwischenspeichern und Offline-Nutzern zur Verfügung stellen soll.[1]

  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

Eine Verwendung eines Cache Manifest hat folgende Vorteile:

  • Nutzer können auch beim Offline-Browsing die Navigation zwischen Unterseiten nutzen.
  • Im Cache gespeicherte Ressourcen liegen lokal vor und werden daher schneller geladen.
  • Nur geänderte Dateien werden heruntergeladen, Serverlast und Datentransfermengen werden so reduziert.
Das manifest-Attribut
<!doctype html> <html lang="de" manifest="beispiel.appcache"> <head> </head> <body> </body> </html>

AppCache-Manifest[Bearbeiten]

Das mit dem manifest-Attribut referenzierte Cache-Manifest ist eine Textdatei, die alle für das Offline-Browsing benötigten Elemente enthält.[2]


Beispiel eines Manifests:

beispiel.appcache
CACHE MANIFEST # die obige, erste Zeile ist eine Pflichtangabe # Kommentare werden mit einer Raute # eingeleitet # ihre Anzahl ist nicht beschränkt # sie werden immer ignoriert # sie dürfen Leerzeichen davor haben # sie müssen aber alleine in einer Zeile sein # Leerzeilen werden ebenfalls ignoriert # Dateien, die gecacht werden sollen, können entweder # 1.einfach am Anfang aufgelistet werden: images/sound-icon.png images/background.png # 2. Mit einem CACHE- Header eingeleitet werden:. CACHE: style/default.css # Beachten Sie, dass jede Datei eine eigene Zeile benötigt. # here is a file for the online whitelist -- it isn't cached, and # references to this file will bypass the cache, always hitting the # network (or trying to, if the user is offline). NETWORK: comm.cgi

Ohne die Kommentare sähe das Manifest so aus:

beispiel.appcache
CACHE MANIFEST CACHE MANIFEST NETWORK: comm.cgi CACHE: style/default.css images/sound-icon.png images/background.png

Quellen[Bearbeiten]

  1. W3C: Offline Web Applications
  2. W3C: 5.6.3 The cache manifest syntax