Der SHIFT vom Web zur App – Teil 1

Veröffentlicht von Sören - 6. Februar 2019

Heutzutage hat fast jedes Medienunternehmen nicht nur eine Website, sondern auch eine oder gleich mehrere Apps. Der Grund dafür ist schnell erklärt. Durch Apps sind Unternehmen im Alltag ihrer Kunden präsenter und können diese zu jeder Zeit über ihre neusten Angebote informieren. Doch wie schafft man den Schritt von der Webseite zur mobilen App? Mit

woman-sitting-at-table-and-working-on-laptop-with-coffee-mug-beside

Eine Webview ist keine App!

Mitte letzten Jahres war es mal wieder so weit! Eines unserer Nachrichtenportale sollte einen neuen Anstrich bekommen, um so den Charme der vergangenen Jahrzehnte abzulegen und im neuen Glanz zu erstrahlen. Na gut, vielleicht war es so schlimm dann doch nicht, aber es war auf jeden Fall wieder nötig und unsere Apps sollten auch gleich mit überarbeitet werden. Denn anders als viele Konkurrenzprodukte, basierten unser Apps noch auf Webviews und waren dadurch einfach nicht mehr zeitgemäß. Doch was ist so verkehrt an Webviews? Erst mal nichts. Webviews bieten einen schnellen und einfachen Weg, Inhalte von einem Server abzurufen, ohne dabei spezielle Schnittstellen zu benötigen. Durch sie lassen sich praktisch alle Inhalte darstellen, die man auch in einem Browser aufrufen kann. Toll nicht? Ja und nein, denn alles was in einem Webview dargestellt werden soll, kann erst zur Laufzeit heruntergeladen werden. Genau hier liegt das Problem, denn damit funktioniert die App nur bei einer bestehenden Internetverbindung und der User muss teils lange warten, bis die App fertig geladen ist. 

Sind wir bereit für PWAs?

Also mussten wir nach eine besseren Lösung suchen, denn unsere App sollte im Idealfall auch offline funktionieren. Ein interessanter Kandidat, den wir dabei ausgemacht hatten, waren Progressive Web Apps. PWAs sind Webseiten, die durch Serviceworker Zugriff auf Gerätefunktionen erhalten. Damit ist es möglich, Funktionen umzusetzen, die bisher nur nativen Apps vorbehalten waren. Eine der wichtigsten Funktionen dabei ist der Zugriff auf den Gerätespeicher, denn dadurch lassen sich wiederverwendbare Ressourcen speichern und so die Reaktionszeit der App deutlich verbessern. Es ist aber auch möglich, Daten im Hintergrund herunterzuladen, um sie so auch bei fehlender Internetverbindung anbieten zu können.

PWAs installieren sich direkt im Browser

So einfach kann man eine PWAs installieren!

Zusätzlich ist die Installation wesentlich angenehmer, da sämtliche App-Stores umgangen werden und die Installation direkt auf der Seite erfolgt. Ein schönes Beispiel ist da die Seite airhorner.com, eine kleine PWA, die ihr mit einem Tap installieren könnt. Probiert es doch mal aus! Darüber hinaus sind PWAs im Bezug auf Entwicklungsaufwand und Wartung hochinteressant, denn sie sind plattformunabhängig. Das bedeutet, eine PWA kann im Idealfall sowohl die Apps, also auch die dazugehörige Webseite ersetzen. Also ist die Entscheidung ganz klar, oder? Leider ja, denn während Android und sogar Microsoft akzeptable Implementationen anbieten, hinkt die Innovationsschmiede Apple hinterher. Zwar werden ab iOS 11.3 PWAs unterstützt, doch unterscheidet sich die Implementierung so entscheidend von der Konkurrenz, dass der Nutzen hinterfragt werden muss. Ein gutes Beispiel dafür ist der Cache der Serviceworker, dieser wird nach langer Inaktivität gelöscht, wodurch jegliche Offline-Funktionalität zum Glücksspiel wird. Sollte der Cache aber dennoch bestehen, so wird er spätestens beim nächsten Aufruf mit Internetverbindung überschrieben, da die komplette App neu geladen wird. Außerdem ist es auch nicht möglich, Pushmeldungen zu versenden oder Synchronisationen im Hintergrund durchzuführen.

Die gute alte native App

Also scheiden PWAs für unser Projekt leider aus, denn gerade für ein Nachrichtenportal sind Pushmeldungen enorm wichtig. Damit bleibt nur noch eine Alternative für uns übrig, eine native App. Also mehr vom Alten? Nein, nicht wirklich, denn dieses Mal legen wir deutlich mehr Wert auf die Ladezeiten und greifen deswegen noch mal tief in die Trickkiste. Wie wir die neue App letztendlich umgesetzt haben und welche Herausforderungen uns dabei begegnet sind, erfahrt ihr im nächsten Teil!

Das könnte Dich auch interessieren

Wie baue ich eine Auswertung die für jeden verständlich ist?

Eine Auswertung sollte für jedermann verständlich sein, für Experten und für Laien. Aber wie macht man das am besten?

Eine Einführung in HTML und CSS

Im ersten Teil beschäftigen wir uns mit den Grundlagen von HTML, insbesondere der allgemeinen Dokumentenstruktur, verschiedenen HTML-Elementen und ihren Attrib...

Internet Halunke

Internet Halunke bei Font Awesome

Die Icon und Schriften CSS-Bibliothek Font Awesome hat den Trend der Zeit erkannt und ein "Internet Halunken Icon" raus gebracht, bzw. sich daran versucht. Das ...