Web Apps

Home » App Development » Web Apps

Web Apps


Systemunabhängig, ob Android oder iPhone. Auch wenn Web Apps im Vergleich zu Native Apps auf weniger Funktionen eines Smartphones oder Tablets zugreifen können, haben sie dennoch eine Reihe von Vorteilen

Ein Web App ist grundsätzlich nichts anderes, als eine speziell programmierte HTML5 Website, die das Endgerät erkennt und den Inhalt optimiert dafür darstellt. Das hat den großen Vorteil, dass jedes Endgerät, das über einen Browser verfügt, die App nutzen kann.Von der Anmutung und der Benutzung lässt sie sich allerdings kaum von nativen oder hybriden Apps unterscheiden. Hierzu tragen vor allem immer bessere Internetverbindungen, leitungsstärkere Geräte und auch verbesserte Tools und Frameworks für effektiveren Code bei. Auf diese Weise lassen sich auch komplexe Funktionen wie etwa Bildbearbeitung in Form einer Webanwendung umsetzen.

Auch wenn die App auf weniger Funktionen eines Smartphones oder Tablets zugreifen kann, hat sie dennoch eine Reihe von Vorteilen, von welchen hier eine Auswahl in aller Kürze vorgestellt sei:

  • Direkter Zugang: Alles was der User für den Zugang zur Webseite braucht, ist ein Browser. Bei Native Apps dagegen müssen die User erst den jeweiligen App-Kiosk aufrufen, um die App herunterzuladen, bevor sie diese schliesslich benutzen können.
  • Kompatibilität der Web Apps: Das Betriebssystem des Users spielt nur eine untergeordnete Rolle. Die Web App kann sowohl vom iPhone, Android-, Windows oder sogar Mozilla-Smartphones aufgerufen werden. Bei der Entwicklung von Native Apps dagegen müssen die verschiedenen Betriebssysteme berücksichtigt werden.
  • Aktualisierungen sind schneller im Umlauf: Änderungen an Websites oder sogar Relaunches derselben sind sofort verfügbar. Alle User benutzen dieselbe Version. Bei Apps dagegen müssen die Updates und Upgrades erst heruntergeladen werden.
  • Web Apps werden leichter gefunden: Eine dominante Suchmaschine wie Google für das Web hat sich für Native Apps noch nicht durchgesetzt. Bei Web Apps dagegen machen Suchmaschinen selbst solche Seiten zugänglich, die in der Hierarchie eines Webauftritts weiter unten angesiedelt sind.
  • Web Apps können einfach geteilt werden: Per Facebook, Twitter oder Email eine URL zu teilen ist sehr viel einfacher und direkter als eine App für ein spezifisches, mobiles Betriebssystem, die erst heruntergeladen werden muss.
  • Web Apps werden nicht gelöscht: Web Apps sind stets verfügbar und immer nur einen Klick entfernt. Auf einem Smartphone installierte Apps dagegen können gelöscht werden. Es ist eher unwahrscheinlich, dass die Smartphone-Nutzer die App erneut aus dem App-Kiosk herunterladen und installieren.
  • Zeit und Kosten: Web Apps sind in den meisten Fällen einfacher und günstiger in der Entwicklung als Native Apps, die für jedes Mobile-Betriebssystem neu entwickelt werden müssen (z.B. für iOS und Android). Zudem ist es langfristig günstiger, eine Web App zu warten als native Apps über mehrere Plattformen wie iOS oder Android hinweg.

Entwickelt wird die Web App mithilfe gängiger Web-Technologien wie HTML5, CSS3 und speziellen Frameworks (jQuery Mobile, Sencha Touch…) In ihrem Design und in ihrer Funktionalität ähnelt die Web-App einer nativen App, weist jedoch bei genauerer Untersuchung einige Unterschiede auf.

Die Web-App ist plattform- und geräteunabhängig – also diesbezüglich das komplette Pendant zu einer nativen App. Wurde die Web-App mithilfe der entsprechenden Web-Technologien programmiert (also eine App für alle), kann sofort in den Publikationsprozess übergegangen werden, der wie folgt aussieht: Die Web-App wird auf einen Webspace Eurer Wahl hochgeladen – und ja, das war’s schon. Da jedes mobile Endgerät über einen Browser verfügt und die Möglichkeit bietet, das Internet zu nutzen, gibt es auf den Zugriff der Web-App keinerlei Einschränkungen.

Abstriche müssen in der Funktionalität der Web-App gemacht werden. Da Web-Technologien nicht über den vollen Funktionsumfang von nativen Programmiersprachen verfügen, ist der Zugriff auf Hardware, sagen wir mal, unkomfortabel. Mit verschiedenen Workarounds ist es möglich auf die Hardware zuzugreifen, wird aber oft von den verschiedenen Plattformen, wie z.B. iOS, unterbunden, indem sie den Zugriff verweigern.

Stattdessen lassen sich alle Arten von multimedialen Inhalten wiedergeben und auf ihr Maximum ausreizen. Ist jedoch der Zugriff auf die Hardware des Endgerätes nötig, so können die multimedialen Inhalte diese leider nicht kompensieren.

Auch im User Interface müssen kleinere Abstriche gemacht werden. Da iOS, Android und Co. keine Frameworks anbieten (was natürlich irgendwie auch verständlich ist, wer würde sonst noch die kostenpflichtigen Entwicklerlizenzen kaufen), müssen auf Alternativen zurückgegriffen werden. Diese gibt es zum Glück en masse. Da die Entwickler der Frameworks natürlich auch auf die Guidelines der verschiedenen Plattformen schielen, sind die Themes dementsprechend up to date und fügen sich in das Bild der nativen Apps. Web-Apps werden dadurch jedoch nie 100% wie native Apps aussehen.

Vorteile

  • Bestehendes Know-how zu Web-Technologien kann genutzt werden
  • Günstige Entwicklung
  • Schnelle und häufige Updates einfach möglich
  • Plattform- und geräteunabhängig

Nachteile

  • Läuft immer in der Browser-Umgebung
  • Eingeschränkter Offline-Betrieb
  • Oft weniger komfortabel als native App
  • Kein Zugriff auf Gerätehardware

Der Trend geht derzeit spürbar hin zur WebApp. Diese Entwicklung ist insofern richtig, als dass Sie wieder mehr das Preis-/Leistungsverhältnis in den Vordergrund rückt. Gerade der Erfolg von Android, der eine starke Verbreitung des Betriebssystems gebracht hat, zog in der Bugwelle ebenso eine große Palette von Endgeräten mit sich, die für den App Entwickler nur schwer zu handhaben ist. Die Fehlersuche ist schon heute nur noch für die Topseller der Smartphones zu einem vertretbaren Budget möglich.

 

Desktop, Mobile oder APP? - Progressive Web App!

Google denkt in ganz neue Richtungen und präsentiert eine Lösung für dieses Problem: Progressive Web Apps (kurz: „PWA“). Eine Progressive Web App ist vereinfacht gesagt die optimale Symbiose einer mobilen Webseite und einer App. Das Beste beider Welten! Dies verringert Entwicklerkosten, vereinfacht das Tracking und ist einfach ziemlich sexy. 

Was ist eine Progressive Web App?

  • eine „normale“ Webseite, die sich wie eine App verhält
  • eine „normale“ Webseite, die sich offline bedienen lässt
  • eine „normale“ Webseite, die so schnell lädt, wie ein installiertes Programm

Eine Progressive Web App ist die perfekte Mischung aus Webseite und App. In HTML5 und JavaScript programmiert, sind sie wie eine normale Webseite in jedem Browser aufrufbar, schaffen aber ein authentisches App-Erlebnis beim Nutzer und stärken nachhaltig die Kundenbindung. Dies geschieht durch die Verwendung derselben Techniken, der sich auch traditionelle Apps bedienen: Push-Nachrichten informieren den Benutzer über auftretende Ereignisse, extrem schnelle Ladezeiten (sogar bei einer schlechten Internetverbindung) sorgen für ein Echtzeit-Erlebnis und Offline-Bedienbarkeit ermöglicht eine permanente Verfügbarkeit der Webseite.

Im Gegensatz zu traditionellen nativen Apps für Handy oder Tablet-PC kommen Progressive Web Apps ohne Installation aus und vermeiden so die Hauptursache dafür, dass Benutzer sich gegen die Verwendung einer App entscheiden. Stattdessen kann eine Verknüpfung auf dem Home-Screen des Nutzers angelegt werden, wodurch der Inhalt jederzeit wieder aufgerufen werden kann.

Technische Details

HTML5, CSS3, JavaScript

Service Worker sorgen für Offline-First Experience

Entwicklung z.B. mit Polymer

Progressive Web Apps sind aufgebaut wie jede andere Webseite auch und werden in HTML5, JavaScript und CSS3 programmiert. Sie verhalten sich responsive, passen ihre Darstellung also immer auf das zum Anzeigen der Seite verwendete Gerät wie Handy oder Tablet-PC an. Was aber macht nun eine PWA besonders? Das Geheimnis: Service Worker.

Der Schlüssel zum Erfolg: Service Worker

Ein Service Worker ist ein JavaScript, das von Web-Browsern im Hintergrund, getrennt von der übrigen Webseite, ausgeführt wird. So können Service Worker Funktionalitäten zur Verfügung stellen, die unabhängig von einer Webseite oder Benutzerinteraktion sind. Dazu gehört zum Beispiel eine Cache-Funktion, die es ermöglicht einmal angezeigte Inhalte zwischenzuspeichern. Auf diese Weise kann beim nächsten Besuch die Seite auch dann angezeigt werden, wenn eine schlechte oder sogar gar keine Internetverbindung besteht (Offline-Betrieb). Auch Push-Benachrichtigungen sind auf diese Weise möglich, um Benutzer auf neue Ereignisse hinzuweisen. Service Worker müssen im JavaScript der Seite registriert werden und können erst dann installiert werden. Außerdem bedingen sie HTTPS. Mehr und mehr Frameworks stellen bereits Service Worker bereit. Ein Beispiel ist Angular mit seinem mobile Toolkit. In Zukunft werden noch weitere Features wie Hintergrundsynchronisierung oder Geofencing möglich sein.

Progressive Enhancement

Aber was wenn ein Benutzer mit einem Browser, der keine Service Worker unterstützt die Progressive Web App öffnet? Eines der großartigen Kernfeatures von Progressive Web Apps ist das sogenannte Progressive Enhancement. Damit ist gemeint, dass die PWA immer abwärtskompatibel arbeitet und moderne zusätzliche Funktionen einfach automatisch zuschaltet, wenn diese verfügbar sind. Das bedeutet, dass ein Benutzer mit einem Browser ohne Service Worker eine ganz normale voll funktionale Webseite angezeigt bekommt – Push-Benachrichtigungen und Offline-Benutzung stehen ihm dann zwar nicht zur Verfügung, jedoch wird er dies gar nicht bemerken. Auf diese Weise wird sichergestellt, dass Progressive Web Apps für jeden Besucher ein optimal auf diesen abgestimmtes Benutzererlebnis bieten.

 

Angular Mobile Toolkit

Automatic Progressive Web Apps mit Hilfe von Service Workern:  Progressive Web Apps sind aufgebaut wie jede andere Webseite auch und werden in HTML5, JavaScript und CSS3 programmiert. Sie verhalten sich responsive, passen ihre Darstellung also immer auf das zum Anzeigen der Seite verwendete Gerät wie Handy oder Tablet-PC an. Ein Service Worker ist ein JavaScript, das von Web-Browsern im Hintergrund, getrennt von der übrigen Webseite, ausgeführt wird. So können Service Worker Funktionalitäten zur Verfügung stellen, die unabhängig von einer Webseite oder Benutzerinteraktion sind. Dazu gehört zum Beispiel eine Cache-Funktion, die es ermöglicht einmal angezeigte Inhalte zwischenzuspeichern. Auf diese Weise kann beim nächsten Besuch die Seite auch dann angezeigt werden, wenn eine schlechte oder sogar gar keine Internetverbindung besteht (Offline-Betrieb).

 

 

 

jQuery mobile ist eine freie JavaScript-Bibliothek, die speziell für die Bedürfnisse für mobile Applikationen entwickelt wurde. Sie baut auf dem Javascript Framework jQuery auf, und passt das Framework auf die Besonderheiten von Applikationen und Webseiten, die auf Smartphones und Tablets laufen sollen an

Kontaktieren Sie uns jetzt!

Werkzeuge

Angular 2

In den letzten Jahre haben mehr als eine Million Entwickler erfolgreich mit AngularJS Single-Page-Anwendungen erstellt. Angular ist damit das populärste Framework um client-seitige Webanwendungen zu entwickeln (siehe z.B. Stack Overflow). Allerdings blieb das Framework dabei bislang immer auf das Web beschränkt. Das bedeutet, dass man bis dato völlig andere Tools, Programmiersprachen und Frameworks benötigte, um Anwendungen für den Desktop oder für mobile Geräte an den Start zu bringen.

Hier wird Angular 2 interessant. Der komplette Rewrite von AngularJS 1 wurde stark auf Plattformunabhängigkeit ausgerichtet. Ab Angular 2 ist es möglich, eine Anwendung auf verschiedenen Plattformen  (sei es Web, Mobil, Desktop) mit spezifischen Oberflächen auszuführen. Das Framework wurde dafür vom DOM entkoppelt und in eine Ausführungsschicht und eine Renderschicht unterteilt. Komponenten und Direktiven enthalten keine direkte DOM-Manipulationen mehr, sondern beauftragen einen Renderer mit ebendieser.  Vereinfacht ausgedrückt ist die Angular-2-Architektur in zwei Teile aufgeteilt:

  • Plattform-unabhängiger Teil: hier wir das Markup (HTML) durch einen DOM-Adapter geparst und in so genannte „Proto Views“ compiliert. Dieser Prozess ist nicht spezifisch für eine Zielplattform und die meisten Funktionen können in den verschiedenen Plattformen genutzt werden
  • Plattform-spezifischer Teil: hier geschieht die Magie. Es werden plattformspezifische Renderer verwendet, um die unterschiedlichen Zielplattformen abzubilden. Jene Renderer haben die Aufgabe, aus den „Proto Views“ einen „Visual Tree“ zu generieren. Dieser kann dann verwendet werden, um die Oberfläche anzuzeigen. Der Renderer ist ebenso dafür verantwortlich, Änderungen und Events zwischen „Proto Views“ und „Visual Tree“ auszutauschen. Der Renderer ist dabei ein vom Framework zur Verfügung gestellter Service, der per DI konsumiert werden kann.

Es gibt z. B. folgende Renderer:

  • Standard Renderer: Das Template wird in HTML geschrieben und im Browser gerendert, dieser Renderer ist standardmäßig in Angular enthalten.
  • Angular Universal [9]: Ist ein Backend Renderer der vom Angular-Team entwickelt wird. Die Seite wird auf dem Server gerendert und dann als HTML an den Browser gesendet. Dies hat den Vorteil, dass Browser und Suchmaschinen eine vollständige Seite geliefert bekommen, auch wenn diese keinen JavaScript-Code ausführen können.
  • NativeScript [10]: Ist ein Renderer für mobile Apps auf iOS und Android. Statt HTML-Elementen werden native UI-Elemente gerendert, so kann mit Angular eine native Smartphone-App entwickelt werden.

 

 

JQuery mobile

JQuery mobile ist mit den meisten mobilen Betriebssystemen wie Android, Apple iOS und Microsoft Windows Phone kompatibel. Mit Hilfe von Apache Cordova können hybrid Applikationen für mobile Endgeräte erstellt werden, die auch auf Programmierschnittstellen der Betriebssystem zugreifen können und damit z.B. über die App-Stores der Hersteller vertrieben werden können, und die gerätespezifische Funktionen wie Bewegungsmelder und GPS Systeme mitbenutzen können, was normalen Webanwendungen nicht oder nur schwer möglich ist. Auch werden Ereignisse (englisch events) auf mobilen Endgeräten oft anders ausgeführt und abgearbeitet als Ereignisse bei einem Webbrowser eines Desktop Computers. Eigentlich gibt es keine Maus Ereignisse und kein Hoover auf einem Mobilgerät oder einem Tablet, dafür aber Gestik wie Swipes. JQuery mobile versucht das Programmieren von Funktionen, die Ereignissen abarbeiten in einer mobilen Umgebung zu erleichtern, z.B. durch das Bereitstellen von swipeleft, swiperight und swipe Ereignissen. Auch sind die mitgelieferten Cascading Style Sheets (CSS) speziell für mobile Geräte angepasst. Durch diese CSS ist es möglich Webseiten für mobile Geräte in relativ kurzer Zeit zu erstellen, die Betriebssystem nahen Applikationen ähneln. Im Gegensatz zur Desktop Version jQuery setzt jQuery mobile konsequent auf AJAX. Seiteninhalte werden nachgeladen.