Weblösungen am Puls der Zeit, innovativ und massgeschneidert.

#Blog

Individualentwicklung Intersim AG Mobile Apps Programmieren

vor einem Jahr

Pascal Christen

Wann entscheidet man sich für eine Webseite, wann für eine App? Progressive Web Apps können eine Antwort auf diese Frage bieten.

Article Image

Progressive Web Apps 🚀

Ausgangslage

Aus einer Webseite eine Mobile-App für Android oder iPhone zu machen gestaltete sich in den letzten Jahren als aufwändig. Eine Möglichkeit war bisher, zusätzlich zu einer Webseite Native Apps zu machen. Dabei programmiert man die Funktionalitäten der Webseite jeweils nochmals in den Programmiersprachen und Frameworks der jeweiligen Mobile-Betriebssysteme (iOS und Android) nach und erweitert diese dann mit Mobile-App-Features (mehr dazu später). Die Nachteile liegen auf der Hand:

  • Höherer zeitlicher und finanzieller Aufwand
  • Know-How von mehreren Sprachen und Frameworks notwendig
  • Funktionalitäten mehrfach vorhanden (einmal fĂĽr iOS, einmal fĂĽr Android und nochmals fĂĽr die Webseite)
  • Time-To-Market: ein Release Prozess der App kann aufwändig sein und wie im Falle von Apple lange dauern
  • …

Eine Alternative stellen die sogenannten Hybrid-Apps dar. Dabei bieten gewisse Tools/Frameworks die Möglichkeit an, eine Webseite automatisch oder zumindest (in der Theorie) mit wenigen Anpassungen in Native Apps «umzuwandeln». Entweder wird dann die App komplett in nativem Code erzeugt oder ein Gerüst mit nativem Code und einem Browser kombiniert. Letztendlich stellt auch dies wieder einen Mehraufwand dar und nicht alle Funktionalitäten sind einfach umzusetzen.

Wieso so kompliziert, geht das nicht einfacher? Das dachten sich wohl auch die Beteiligten Personen, die seit 2015 am Standard PWA (Progressive Web Apps) arbeiten.

Progressive Web Apps

Vereinfacht erklärt ist das Ziel von PWA, Webseiten mit Funktionen von Mobile-Apps zu erweitern, ohne dass man eine hybride oder native App programmieren müsste.

Zu solchen Funktionen gehören etwa:

  • Web-Push: Push Benachrichtigungen
  • Add-To-Homescreen: Installierbar und auf dem Homescreen mit Icon zur VerfĂĽgung stellen
  • Offline-Cache: Offline Funktionalität
  • Background-Sync: Automatische Synchronisierung von Inhalten im Hintergrund, wenn die Webseite nicht geöffnet ist
  • Zugriff auf Hardware-Komponenten vom Mobiltelefon, wie z.B. Gyroskop
  • …

Dabei wird auf die fĂĽr Webseiten schon lange verwendete Script-Sprache JavaScript zurĂĽckgegriffen. Man muss also nicht eine weitere Sprache lernen, sondern programmiert diese Funktionen in den Code der Webseite mit ein.

Das klingt erst mal sehr verlockend – und wäre zumindest aus Sicht des Autors die Zukunft der Apps. Doch es gibt immer ein «Aber…» Wie oft in der Geschichte des Webs sind Standards abhängig von den Browsern - also ob sich diese an die Standards halten oder wann sie diese herausbringen.

Eine kleine Auflistung soll diesen Umstand verdeutlichen (Stand 27.03.2020, aktuellste Browserversion):

  Safari iOS Google Chrome Android Samsung Internet Android Firefox Android
Offline Cache âś… âś… âś… âś…
Web Push ❌ ✅ ✅ ❌
Background Sync ❌ ✅ ✅ ❌
Add-To-Homescreen ❌ ✅ ✅ ✅

 

Generell sieht man, dass Apple hier im Rückstand ist. Eine mögliche Erklärung ist, dass Apple Wert auf hohe Qualität und Sicherheit bei den Apps im App-Store legt. Wenn nun aber eine Webseite direkt aus dem Browser installiert werden kann, geht die Kontrolle über das verloren. Wie aber Android zeigt, gibt es auch hier Möglichkeiten, dem entgegenzuwirken, z.B. mit «Trusted Web Activities (TWA)» – jedoch noch mit dem Nachteil, dass man wieder die Webseite in eine Native-App konvertiert (wenn auch viel einfacher).

Fazit

Trotz diesen Einschränkungen schrecken wir nicht zurück und verwenden auch erste Features wie z.B. Offline-Funktionalität in unseren Projekten. Da die Kompatibilität der Features immer weiter zunimmt, werden wir auch in Zukunft vermehrt auf diese setzen, um die Kluft zwischen App und Webseite weiter zu schliessen und die Webseiten unserer Kunden mit coolen, nützlichen Funktionen zu erweitern.