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.