2015-11-21-offline-funktionalitaeten.markdown 8.51 KB
Newer Older
1 2 3 4 5 6 7 8
---
layout: post
title:  Offline Funktionalitäten
subtitle: Welche Möglichkeiten gibt es für moderne Webentwickler?
category: funktionalitaet
author: Jannik Spieker
---

9
Eine Webseite wird mit dem Internet, also mit dem Begriff „*online*“ assoziiert. Was also haben *Offline*-Funktionalitäten im Bereich erwartungskonformer Webseiten zu suchen?
10

11
Webseiten erreicht man, indem man die URL, also die Adresse der Internetseite, in die Navigationsleiste seines Browsers eingibt. Ein Internetbrowser kann neben diesen Webseiten aus dem Internet auch Offline-Webseiten anzeigen, also solche, die sich nur lokal auf dem Gerät befinden und nicht mit dem Internet verbunden sind. Über eine Offline-Webseite kann man beispielsweise Multimedia-Präsentationen darstellen. <!--more-->
Dario Imsande's avatar
test2  
Dario Imsande committed
12
 Ein weiteres Konzept komplett internetloser Webseiten sind offline „*Single Page Applications*“ (Einzelseiten-Webanwendung). Die Seite [TiddlyWiki][tiddlywiki]{:target="_blank"}<sup>3</sup> bietet beispielsweise eine dieser Single Page Applications zum herunterladen an. Hierbei handelt es sich um einen persönlichen Notizblock, auf den man über seinen Internetbrowser zugreift und Notizen hinzufügt. Diese Notizen gelangen aber nie ins Internet sondern werden lokal auf der Festplatte gespeichert.
13

14

Dario Imsande's avatar
test2  
Dario Imsande committed
15
Wirklich interessant aber werden Seiten, welche im Internet laufen, aber viele der Funktionalitäten auf den Computer des Nutzers verlagern und somit verschiedene Offline-Features anbieten. Somit kann der Besucher Teilbereiche einer Webseite auch dann benutzen, wenn er kurzzeitig die Internetverbindung verliert. Ein sehr praktisches Beispiel hierfür ist die beta-Version, also die nicht ganz fertiggestellte Seitenerweiterung [„Gmail Offline“][gmailoffline]{:target="_blank"}<sup>4</sup> von Google. Diese erlaubt es dem Nutzer - nach einer ersten Synchronisierung mit dem jeweiligen Gmail-Account - sämtliche Mails auch ohne Internetzugriff zu lesen oder darauf zu antworten (abgeschickt werden die E-Mails wenn wieder ein Internetzugriff vorhanden ist). Diese Funktion ist äußerst praktisch, da einem ein Mail-Entwurf, den man in der Internetseite eingibt nicht verloren geht wenn das Internet ausfällt bevor man auf „*Absenden*“ gedrückt hat.<sup>1</sup>
16

Dario Imsande's avatar
test2  
Dario Imsande committed
17
Auch wenn die Anzahl der Breitbandanschlüsse in Deutschland in den Vorjahren [drastisch gestiegen][fazstatistik]{:target="_blank"}<sup>2</sup> ist, macht es dennoch Sinn, Teilbereiche einer Webseite auf das Endgerät des Nutzers ausuzlagern. Offline-Technologien können die Daten von jedem Besucher individuell *cachen* (zwischenspeichern), was der Webapplikation erlaubt, die für den Nutzer relevanten Daten noch schneller anzuzeigen als wenn dieser alles neu herunterladen müsste. Der Server, also dort wo die Internetseite und damit die Webapplikation die der Besucher benutzt liegt, bekommt nur die Veränderungen zu sehen, und passt die Daten dementsprechend an.
18

Dario Imsande's avatar
test2  
Dario Imsande committed
19
[Cookies][cookieswiki]{:target="_blank"} speichern auch einen Teil an Informationen offline, jedoch ist hierbei die Kapazität zu gering um derarte Seiteninhalte zu speichern. Auch *Plugins* (Zusatzmodule), wie Flash oder Java können Inhalte zwischenspeichern. Hierbei ist jedoch vorausgesetzt, dass das Plugin beim Benutzer installiert ist, sodass man durch benutzen dieser einige Nutzer von diesen Funktionalitäten ausschließt.
20 21

### Was sind moderne Methoden zum Zwischenspeichern?
22
Es gibt primär zwei relevante offline-Funktionalitäten in HTML5: Zum einen das „*application caching*“ und den „*offline storage*“ (auch „*client-side storage*“). Beim application caching werden Teile der grundlegenden Programmlogik und der Bedienoberfläche zwischengespeichert, und beim offline storage wird nutzerspezifische Inhalte und Daten gespeichert.
23 24 25

Application caching ist zum Teil bereits durch den Internetbrowser möglich, welcher besuchte Webseitenlayouts zwischenspeichern kann um die Seite beim erneuten Aufruf schneller darzustellen. So würde bei dem oben genannten Beispiel „Gmail Offline“ das Layout und das Design der Seite (also die HTML- und die CSS-Struktur) zwischengespeichert. Die durch den Browser angebotene Funktionalität bleibt jedoch nicht für immer vorhanden, sondern wird irgendwann durch aktuellere Inhalte ausgetauscht. Ein richtiger application cache hat dabei sozusagen einen „Sonderstatus“, denn diese Inhalte bleiben auf der Festplatte vorhanden bis sie manuell gelöscht werden.

26
Mithilfe des application cache kann der Nutzer also die Seite sofort laden, aber was wenn er in seinem vorherigen Besuch der Seite eine E-Mail verfasst hat und als Entwurf gespeichert hat? Solche Daten sind nutzerspezifisch und deshalb nicht im application cache gespeichert. Stattdessen können diese Daten im offline storage gespeichert werden. Somit kann auch der Entwurf sofort absendebereit dargestellt werden. Würde der Nutzer nun Text zu der mail hinzufügen, würden nur diese Veränderungen an den Server übermittelt werden und gleichzeitig lokal gespeichert. Sollte das Internet erneut abgeschaltet werden, sind die letzten Änderungen immer noch vorhanden. Logisch wird dabei auch, dass der Seitenanbieter damit deutlich Bandbreite einsparen kann, da die Veränderungen viel kleiner sind als die gesamte Seite.
27

28
### Wofür kann man Offline-Speicher noch verwenden?
29
Mit lokalem Speicher kann man auch andere Resultate erzielen. Beispielsweise kann man dadurch Informationen auf den Nutzer soweit auslagern, dass man auf eine eigene Datenbank verzichten kann. Dies hat unter anderem den Vorteil, dass der Nutzer sich nicht zwangsweise registrieren muss, und trotzdem die Webseite mit seinen eigenen Daten benutzen kann. Logischerweise sollte dies nur für nicht-sensitive Daten geschehen, beispielsweise kann man so den Suchverlauf eines Nutzers auf einer Webseite darstellen.
30

Dario Imsande's avatar
test2  
Dario Imsande committed
31
Ein weiterer Verwendungszweck ist das sogenannte **Host-Proof Hosting**. Hierbei wird die Verschlüsselung von sensitiven Informationen auf den Nutzer ausgelagert. Das bedeutet, dass beispielsweise ein Passwort nie im Klartext den Browser verlässt, sondern vom Browser des Nutzers automatisch verschlüsselt wird. Würde ein potentieller Angreifer die Verbindung des Nutzers mit einer Internetseite abfangen, würde er also nicht das Passwort erlangen können, sondern nur die verschlüsselte Variante dessen, von der er nicht ohne Weiteres auf das Passwort schließen könnte. An dieser Stelle ist es aber wichtig zu erwähnen, dass diese auf den ersten Blick sehr sichere Art von Verschlüsselung [nicht absolut sicher ist][javascriptharmful]{:target="_blank"}<sup>5</sup>.
32

33 34

### Fazit
35
Offline-Funktionalitäten haben viel Wachstumspotential. Dabei muss das Ziel nicht umbedingt sein, dass eine Webapplikation auch im Flugzeug oder im Zug benutzbar ist. Mit aktuellen Funktionen wie dem HTML5 offline storage hat ein moderner Entwickler viele Möglichkeiten um seine Seite nicht nur schneller sondern auch praktischer und für den Nutzer individueller zu gestalten.
36 37

<hr id="sources">
38
#### Quellen
39
<small>
Dario Imsande's avatar
Dario Imsande committed
40
    <sup>1</sup> Mahemoff, M. (2010) ["Offline": What does it mean and why should I care?](http://www.html5rocks.com/en/tutorials/offline/whats-offline/){:target="_blank"}. Abgerufen: 18.11.2015.
41 42
</small><br>
<small>
Dario Imsande's avatar
Dario Imsande committed
43
    <sup>2</sup> Bünder, H (2010) [Aufbruch in die Gigabit-Gesellschaft](http://www.faz.net/aktuell/technik-motor/computer-internet/bandbreite-in-deutschland-aufbruch-in-die-gigabit-gesellschaft-1592576.html){:target="_blank"}. Abgerufen: 19.11.2015.
44
</small><br>
45
<small>
Dario Imsande's avatar
Dario Imsande committed
46
    <sup>3</sup> [TiddlyWiki](http://tiddlywiki.com){:target="_blank"}. Abgerufen: 19.11.2015.
47
</small><br>
48
<small>
Dario Imsande's avatar
Dario Imsande committed
49
    <sup>4</sup> [GMail Offline](https://chrome.google.com/webstore/detail/gmail-offline/ejidjjhkpiempkbhmpbfngldlkglhimk?hl=en){:target="_blank"}. Abgerufen: 20.11.2015.
50
</small><br>
51
<small>
Dario Imsande's avatar
Dario Imsande committed
52
    <sup>5</sup> Ptacek, T. (2001) [Javascript Cryptography Considered Harmful](https://www.nccgroup.trust/us/about-us/newsroom-and-events/blog/2011/august/javascript-cryptography-considered-harmful/){:target="_blank"}. Abgerufen: 22.11.2015.
53
</small><br>
54 55 56 57 58



[//]: #

Dario Imsande's avatar
test2  
Dario Imsande committed
59 60 61 62 63 64
[html5rocks]: <http://www.html5rocks.com/en/tutorials/offline/whats-offline/>
[tiddlywiki]: <http://tiddlywiki.com>
[gmailoffline]: <https://chrome.google.com/webstore/detail/gmail-offline/ejidjjhkpiempkbhmpbfngldlkglhimk?hl=en>
[fazstatistik]: <http://www.faz.net/aktuell/technik-motor/computer-internet/bandbreite-in-deutschland-aufbruch-in-die-gigabit-gesellschaft-1592576.html>
[cookieswiki]: <https://de.wikipedia.org/wiki/Cookie>
[javascriptharmful]: <https://www.nccgroup.trust/us/about-us/newsroom-and-events/blog/2011/august/javascript-cryptography-considered-harmful/>