JavaScript/Tutorials/App/Einstieg

10min

leicht

keine

App ist eine Verkürzung des englichen Begriffs Application, was die Anwendungssoftware eines Computers bezeichnet. Die Kurzform kam zunächst für Programme im Apple Store für iOS Geräte auf, weswegen im englischen Sprachgebrauch auch häufig mobile app verwendet wird, sie wird aber zunehmend auch für Anwendungssoftware auf klassischen PCs verwendet.

Kennzeichnend für mobile Apps ist, dass sie für Geräte mit kleinen Bildschirmen und wenig Speicher entwickelt werden. Sie müssen daher effizient und platzsparend erstellt werden und können nur eine begrenzte Menge an Funktionen anbieten.

Seit Mobiltelefone immer leistungsfähiger werden, muss man leider feststellen, dass diese Kompaktheit immer mehr nachlässt. Kompakte Software bedeutet auch, auf Abstraktionsbibliotheken zu verzichten und direkt für das Betriebssystems zu programmieren. Das ist umständlicher und dauert länger; vor allem, wenn man eine App für mehrere Betriebssysteme anbieten will. Und so findet man beispielsweise schlechte, Werbung schleudernde Sudoku Apps, die 25MB belegen, während andere, viel bessere Apps, mit 1,7MB auskommen.

Arten von Apps

Es gibt unterschiedliche Arten, Apps zu erstellen. Je nach verwendetem Baukasten unterscheidet man native Apps, hybride Apps und progressive Web-Apps.

Native Apps

Native Apps haben neben dem freien Internet einen festen Platz gefunden. Sie gelten als schnell, da sie in der nativen Programmiersprache des jeweiligen Betriebssystems (ObjectiveC für iOS, bzw. Java für Android) geschrieben wurden. Andererseits ist man an dieses System gebunden, da man sie nur schwer auf andere Plattformen portieren kann und von den App-Stores der jeweiligen Plattformen abhängig ist.

Geburtsstunde der Nativen Apps war 2008, als Apple für das damals neue iPhone einen App Store einrichtete.

Sie können sehr leicht über ein herstellerspezifisches Online-Portal wie Google Play oder AppStore bezogen und installiert werden. Um in diesen Portalen präsent zu sein, kapselten viele Anbieter von Webseiten ihre Inhalte in Native Apps. Dies läuft einerseits dem Gedanken des freien Internets zuwider, stellt Anbieter von Inhalten aber auch vor Probleme, da es für sie anfänglich zu Kosten führt, andererseits auch gute Bewertungen nicht eine eventuelle Entfernung aus dem Portal verhindern können, wenn Apple oder Google die Geschäftsbedingungen ändern.

hybride Apps

Hybrid-Apps vereinen die Vorteile von nativen Apps und Webanwendungen, indem Quellcode in HTML und JavaScript geschrieben und plattformübergreifend verwendet werden kann. Hybrid-Apps laufen – für den Nutzer nicht sichtbar – innerhalb des nativen Webbrowsers der jeweiligen Plattform, z. B. Safari oder Google Chrome.

Frameworks wie z.B. PhoneGap von Adobe ermöglichen es, die plattform-spezifischen Fähigkeiten einzubinden. Sie enthalten eine Komponente, die von der konkreten App unabhängig ist und dem JavaScript-Code der hybriden App den direkten Zugriff auf die Programmierschnittstellen des Mobilgeräts ermöglicht. Deswegen müssen solche Apps wie native Apps installiert werden.

Dabei bieten die Frameworks auch die Möglichkeit, die App so an die spezifische Benutzerführung der iPhone- bzw. Android-Welten anzupassen, dass an das jeweilige System gewöhnte Benutzer gut mit der App umgehen können. Da nur die wenigsten Nutzer auf mehreren Handys surfen, fällt das unterschiedliche Design im Normalfall gar nicht auf.

PWA (Progressive WebApps)

Sie können aber auch Applikationen nur mittels HTML 5 und JavaScript erstellen, die im Browser ausgeführt werden und keine Sonderrechte beim Zugriff auf Geräteschnittstellen haben. Sie sind auf die APIs beschränkt, die auch Webseiten zur Verfügung stehen. Durch den Einsatz eines Service Workers und einer Manifest-Datei ist es aber möglich, eine solche Webseite so auf dem Gerät zu installieren, dass es auch ohne eine Onlineverbindung ausgeführt werden kann. Die Installation ist nicht zwingend, die Entscheidung liegt beim Anwender. Auch ohne Installation ist ein Offline-Betrieb möglich, weil der Serviceworker auch bei Aufruf im Browser im Stande ist, die für den Offline-Betrieb gespeicherten Ressourcen bereitzustellen.

Während früher der mangelnde Zugriff auf die verschiedenen Hardware-Komponenten der einzelnen Mobilgeräte wie Nutzung von Kamera, Geolocation oder das Abfragen des Batteriestatus bemängelt wurde, entwickelt die Device and Sensors Working Group des W3C viele neue JavaScript-APIs, die den Nutzen mobiler Web-Apps progressiv verbessern können.

Eine PWA ist nicht auf mobile Geräte beschränkt. Man spricht zwar oft von Progressive Mobile Web-Apps, die verwendeten Techniken funktionieren aber genauso gut auf Desktop-PCs. Wenn Sie mit Ihrem Laptop in der Bahn sitzen und durch ein Funkloch fahren, ist eine PWA auch auf diesem Gerät von Nutzen. Das Problem auf Desktop-Geräten ist nur, dass die Installation einer PWA als Desktop-Icon nur von Browsern auf Chromium-Basis unterstützt wird. Die Desktop-Versionen von Firefox und Safari bieten diese Funktion nicht (mehr) an. ServiceWorker, die Voraussetzung für den Offline-Betrieb sind, sind aber auf allen modernen Browsern verfügbar.

Geschichte des Begriffs Progressive Web App

Die Idee der Web-App stammt vom iPhone. Steve Jobs hatte die Idee, dass HTML5 Seiten mit AJAX-Architektur das Standardformat für Apps auf iPhones werden sollten. Ein SDK (Software Developer Kit) und ein App Store sollten überflüssig sein, und die Integration der App ins Gerät sollte der Safari-Browser übernehmen. Allerdings hatte diese Idee keinen Erfolg. Ein Jahr später erschien ein SDK, es gab einen App Store und die meisten iOS-Apps sind heute über den Store verfügbar. Allerdings unterstützt Safari immer noch Web-Apps. Mozilla unternahm 2013 mit Firefox OS einen ähnlichen Versuch. Auch dort sollten Web-Apps die nativen Apps für mobile Geräte sein. 4 Jahre später wurde das Projekt abgebrochen.

Der Begriff der Progressive Web App wurde 2015 in einem Artikel von Alex Russell auf infrequently.org geprägt. Seitdem hat Google einige Anstrengungen unternommen, die PWA-Entwicklung für Android und Chromium-Browser zu fördern.

Was sind progressive Web-Apps

Übersetzte Auszüge eines Artikels auf web.dev, der Entwicklerplattform von Google.

Das Web ist eine Plattform, das auf einer Vielzahl von Geräten und Betriebssystemen allgegenwärtig ist. Sein auf den Anwender orientiertes Sicherheitsmodell und der Umstand, dass weder Spezifikation noch Implementierung von einem einzelnen Unternehmen beherrscht werden, macht das Web zu einer einzigartigen, stets aktuellen Softwareplattform. Webanwendungen können mit einer einzigen Codebasis jeden erreichen, überall und auf jedem Gerät.

Plattformspezifische Anwendungen sind für ihren Funktionumfang und ihre Zuverlässigkeit bekannt. Sie sind immer da, auf Startbildschirmen, Docks oder Taskleisten. Sie funktionieren unabhängig von Netzwerkverbindungen. Sie starten mit dem ihnen eigenen Erscheinungsbild. Sie können im lokalen Dateisystem lesen und schreiben, Hardware ansprechen und Daten auf dem Gerät verwenden, z. B. Kontakte oder Termine. In diesen Anwendungen können Sie fotografieren oder die Audiowiedergabe steuern. Sie fühlen sich wie ein Teil des Gerätes an, auf dem sie laufen.

Im Vergleich haben plattformspezifische Apps die meisten Möglichkeiten, und Web Apps die beste Reichweite. PWAs stehen dazwischen, sie versuchen, verbesserte Möglichkeiten, Verlässlichkeit und Installierbarkeit zu bieten und dabei jeden überall und auf jedem Gerät zu erreichen.

Möglichkeiten

Das Web verfügt heute über sehr viele Möglichkeiten. Sie können beispielsweise mit WebRTC, Geolocation und Push-Notifications eine hyper-lokale Videochat-App bauen. Sie können diese App installierbar machen. Mit Hilfe von WebAssembly können auch andere Ökosysteme wie C, C++ oder Rust einbezogen werden.

Bis vor kurzem konnten aber nur native Anwendungen die Geräteeigenschaften wirklich nutzen. Einiges ist immer noch außer Reichweite des Webs, es werden aber immer weitere APIs entwickelt, um das zu ändern und Features wie Dateisystemzugriff, Mediensteuerung, Badging (die Anzeige einer kleinen Info am App-Icon, z. B. die Zahl der ungelesenen Mails) oder die Zugriff auf die Zwischenablage zu ermöglichen.

Verlässlichkeit

Die Ladegeschwindigkeit entscheidet mit darüber, ob Anwender eine Webseite – oder App – nutzen oder sie gleich wieder verlassen. Das endet nicht beim load-Event. Die Benutzer müssen immer merken, ob eine Interaktion von der App registriert wurde oder nicht. Scrolling und Animationen sollen glatt erscheinen.

Eine verlässliche Anwendung soll auch funktionieren, wenn sie keine Netzwerkverbindung hat. Sie soll die zuletzt genutzten Daten zur Verfügung haben. Und wenn ein Serverzugriff benötigt wird, und nicht gelingt, soll es eine klare Meldung geben, statt keiner Reaktion, oder einem Crash der App.

Installierbar

Installierbare progressive Web Apps laufen in ihrem eigenen Fenster, nicht in einem Browser-Tab. Sie können vom Desktop oder aus dem Startmenü aufgerufen werden, sie können auf dem Gerät gesucht werden und man kann mit dem Taskwechselmechanismus des jeweiligen Geräts zu ihnen wechseln. Sie fühlen sich an, als wären sie nativ installiert.

Eine installierte App hat einige neue Möglichkeiten. Beispielsweise reservieren Browser einige Tastaturkombinationen für sich. PWAs können sich dafür registrieren, Inhalt von anderen Anwendungen zu erhalten oder Default-Anwendung für bestimmte Dateitypen zu sein.

Fazit

Soweit die Meinung von Google. Wie üblich etwas marktschreierisch, aber tatsächlich werden PWAs gerade im kommerziellen Bereich als ein massiver Umsatzsteigerer angesehen. Wie Sie sicher schon gemerkt haben, haben sich viel zu viele Webseitenbetreiber in Push-Notifications verliebt und wollen Ihnen unbedingt welche schicken. Der Serviceworker, den Sie für eine PWA bereitstellen, kann diese Notifications erhalten und damit arbeiten.

Die Funktionalitäten, die Sie in Ihre Webseite einbauen müssen, damit sie als PWA funktioniert, sollen nun beschrieben werden.

• Apps entwickeln
  (Übersicht)
• Service Worker

Quellen

• css-tricks: Why would a business push a native app over a website? von Chris Coyier, 10.12.2021