Web Apps — überraschend vielseitig

Die Neue Idee

Eine neue Idee steht im Raum. Ihr möchtet für die Kunden eurer Firma eine App auf den Markt bringen, mit der die Nutzer Euren neuen Service von überall in Anspruch nehmen können. Dabei soll egal sein, ob sich jemand in einer Großstadt mit LTE befindet, oder in einem Zug sitzt, der gerade durch einen Tunnel fährt.

Natürlich soll diese App sowohl für Android als auch für iOS verfügbar sein, denn Ihr müsst für jeden Eurer Kunden erreichbar sein. Gleichzeitig benötigt Ihr noch eine Webversion der Anwendung, denn User wollen den neuen Service ja auch am Laptop oder Desktop nutzen. Trotzdem müssen alle Systeme ein einheitliches Look & Feel vermitteln.

Statt drei verschiedene Versionen teuer zu entwickeln, kommen Webanwendungen zum Einsatz.

Die Anfänge des Web

Spult man einmal zurück zur Jahrtausendwende, wird man feststellen, dass das Internet anders aussieht als heute. Webseiten sind statische Dokumente, ähnlich wie Bücher in einer Bibliothek. Vor einiger Zeit geschrieben und jetzt unveränderbar. Nutzer konsumieren ohne zu interagieren. Das höchste der Gefühle ist ein Kontaktformular, in dem Nutzer ihr Anliegen schriftlich übermitteln können. Interaktionen wie zum Beispiel Navigation erfolgen immer nach dem Schema "Klick; warten bis das Modem die neue Seite geladen hat; Lesen".

Die Revolution des Web

Im Jahr 2004 startete dann ein Trend, der zwar von vielen belächelt wurde, das Web jedoch revolutioniert hat:  Web 2.0

Welche Prinzipien liegen dem „Web 2.0“ zugrunde?

• Das Web als Plattform für Anwendungen und Dienste
• User wird zum Teilnehmer (Stichwort "Mitmach-Web")
• Soziale Interaktion zwischen Usern

Das „Mitmachweb“ entsteht.

Der Nutzer ist nicht länger nur stiller Leser sondern Teilnehmer in einer großen Runde Gleichgesinnter. Vermehrt wird die Funktionalität direkt im Browser abgebildet. Ein Klick leitet nicht länger auf eine neue Seite, sondern öffnet einen Dialog oder startet einen Animation, die weiteren Inhalt offenlegt. Kommentarfelder, Gästebücher und GIFs prägen die Webseiten und ermöglichen es dem Nutzer, Teil von etwas zu werden. Etwas, das er zu dieser Zeit noch nicht richtig verstehen kann.

Die Entwicklung gewinnt an Fahrt

An diese wechselnden Anforderungen passen sich die existierenden und verwendeten Technologien an. Browser können nun besser mit Bildern und Videos umgehen. Findige Entwickler schließen sich zusammen und veröffentlichen Tools, mit denen die Umsetzung von interaktiven Elementen einfacher und einheitlicher wird. So entstehen MooTooles, jQuery und später Angular, React, Vue und viele weitere Bibliotheken und Frameworks.

Die ersten „Realtime“-Anwendungen

Um neue Kommentare zu lesen, muss die Seite nun nicht mehr neu geladen werden. Stattdessen ploppen neue Kommentare in dem Moment beim Nutzer auf, in dem ein anderen Nutzer "senden" klickt. Es ist also inzwischen möglich, Anwendungen zu bauen, die von einer Vielzahl von Nutzern on-demand aufgerufen und verwendet werden konnten. Schon damals musste man sich keine Gedanken darüber machen, wie Updates oder neue Versionen zu Nutzern kommen - beim Seitenaufruf waren sie einfach da.

Der kontrollierte Zugriff auf ihr Gerät

Bis jetzt waren die Anwendungen immer "eingeschlossen". Schnell wurde klar, dass der bedingungslose Zugriff auf das System des Besuchers keine gute Idee ist. Mit den steigenden Möglichkeiten bei der Umsetzung von Webseiten, steigt auch das Risiko des Missbrauchs. Um dem entgegen zu wirken entwerfen Browserentwickler bei Microsoft, Google, Mozilla oder Apple entsprechende Konzepte.

Wie kontrolliert man den Zugriff

Es wurden klar definierte Schnittstellen angeboten, die bei Benutzung immer eine Nachfrage beim User auslösen. Diese Anfrage stellt sicher, dass der Anwender auch wirklich bestimmte Funktionen seiner Hardware freigeben möchte. Aus diesem Grund tauchen auf immer mehr Webseiten Popups auf, die den Nutzer fragen, ob sein Microfon, sein Gerätestandort, die Kamera, etc. verwendet werden darf.

Browser merken sich was Sie tun

Neben dem Zugriff auf Hardwarefunktionalität wird inzwischen auch die Möglichkeit geboten, Daten auf dem Gerät abzuspeichern. Der Browser könnte sich also merken, welche Daten der User in ein Formular eingegeben hat und könnte diese beim nächsten Besuch wieder anzeigen, um die Bearbeitung fortzusetzen. Dennoch brauchte der Nutzer immer eine stehende Internetverbindung, um die Seite initial zu laden. Danach kann auf gespeicherte Daten zugegriffen werden, ohne dass diese von einem Server geladen werden müssen.

Das Web verlässt den Browser

Die extrem niedrigen Einstiegsbarrieren sorgen dafür, dass Webtechnologien sowohl von professionellen Entwicklern als auch von Hobbyisten schnell aufgegriffen werden, um simple Webauftritte oder auch komplexere Anwendungen umzusetzen. Das führte dazu, dass JavaScript (die Programmiersprache des Webs) inzwischen eine der meistbenutzen Programmiersprachen weltweit ist. Durch das extrem gute Angebot von Webentwicklern liegt der Schluss nahe, dass diese Technologien nicht nur für Webseiten im klassischen Sinne verwendet werden sollten. Immer mehr Apps und Desktopanwendungen setzen auf Webstandards, die mithilfe von WebViews in eine native Anwendung eingebettet werden.

Wo verstecken sich Webtechnologien

So sind zum Beispiel die Spotify Desktop-Anwendung (Eigenentwicklung - Quelle), Teile der Instagram App auf iOS und Android (React Native - Quelle) oder die Chat-Anwendungen Micrsoft Teams und Slack (Electron Anwendungen) mit Webtechnologien entwickelt, ohne dass der Nutzer einen Unterschied zu klassischen Anwendungen merken würde.

Apps direkt aus dem Browser

Die neuesten Versionen der aktuellen Browser lassen die Grenze zwischen Website und App, weiter verschwimmen.

Progressive Web Applications (PWA`s)

Unter dem Namen "Progressive Web Applications" werden Webseiten entwickelt, die sich kaum noch von nativen Anwendungen abgrenzen lassen: Nach wiederholtem Besuch, wird der Nutzer gefragt, ob er die Anwendung zu seinem Homescreen hinzufügen möchte. Ab diesem Moment „lebt“ die Website zwischen den anderen nativen Apps, die der Nutzer installiert hat.

Progressive Web Applications (PWA`s) offline nutzen

Beim Verwenden des neuen Shortcuts auf dem Homescreen wird der Browser in einem Modus gestartet, in dem die Adressleiste und andere browsertypische UI-Elemente ausgeblendet sind. Der Nutzer merkt also nicht, dass er einen Link zu einer Webseite geöffnet hat. Des Weiteren können diese PWAs auch ohne laufende Internetanbindung geöffnet werden. Funktionen wie das Versenden von Chat-Nachrichten sind offline natürlich nicht möglich, dafür ist es möglich Offline-gespeicherte Daten abzurufen und lokal zu editieren, um sie zu einem späteren Zeitpunkt mit dem Server zu synchronisieren.

Webanwendungen interagieren nicht nur auf Anfrage

Entwickler haben sogar die Möglichkeit, Push-Notifications in ihre Webanwendungen einzubauen. Diese werden von einem Server an den Browser geschickt, der die Benachrichtigung auf dem Endgerät auslöst, auch wenn die Webseite gerade nicht geöffnet ist.

Die Grenzen der Technologie

Trotz der stetigen Weiterentwicklung von Webstandards, gibt es gewisse Limitationen, die eine allgemeingültige Empfehlung zur Entwicklung von Webanwendungen verhindern. Die starken Sicherheitsvorkehrungen der Browser sorgen dafür, dass aus der Anwendung nicht direkt auf das Dateisystem des Nutzers zugegriffen werden kann (noch - Native File System API).

Nachteile von Webtechnologien

Ein weiterer Nachteil, in der Verwendung von Webtechnologien, sind die benötigten Ressourcen. Der Browser ist eine relativ schwergewichtiges Programm. Soll also eine Anwendung für Systeme mit starken Ressourceneinschränkungen entwickelt werden, die zusätzlich mit großen Datenmengen oder sehr komplexen Oberflächen ausgestattet sind, sollte eine native Anwendung verwendet werden.

Zusammenfassung: Das können Webanwendungen heute

Der Griff zu Webtechnologien ist häufig die richtige Wahl, um zu einer effizienten Lösung zu kommen, die von vielen Entwicklern weitergeführt werden kann. Neben normalen Interaktionen über Maus oder Touch sind aufwändige Animationen, Zugriffe auf Sensoren oder Hardware des Gerätes (Kamera, Mikrofon) kein Problem mehr. Auf modernen Endgeräten können die Nutzer die Webseite sogar so installieren, dass sie dann als native App mit voller Offlinefunktionalität eingesetzt werden kann.

Wie genau man die Schnittstellen nutzen kann und worauf man achten muss, damit sich die Anwendung auch nativ anfühlt, soll dann Thema eines späteren Artikels werden.