Add to Homescreen: Progressive Web Apps (PWA) - Vorteile und Nachteile

20.07.2018

Add to Homescreen Apps 160Kaum ein Android-Smartphone ohne Chrome. Auch Progressive Web Apps (PWA) sind mittlerweile für viele versierte Nutzer keine Seltenheit mehr. Dennoch vertieft Android die Verbindung zwischen den PWAs und dem Browser: Mit Add to Homescreen will Google den nativen Apps den Kampf ansagen und die Web Anwendungen im App-Drawer salonfähiger machen. Was nach viel technischem Verständnis als Grundvoraussetzung klingt, ist in Wirklichkeit so einfach wie nie zuvor...

Update: Geänderte Startup-Voraussetzungen für den "Add to Homescreen Prompt"
Seit Juni 2018 (Chrome 68) wird nicht mehr automatisch der Prompt angezeigt, sondern erst, wenn die Voraussetzungen dafür erfüllt sind und der Web-App Betreiber mittels prompt() den Dialog anstößt. Siehe "Add to Home Screen".

Add to Homescreen - lohnen sich WebApps?

Bisher fragten sich Entwickler noch des Öfteren, ob es sich lohnt, Arbeit in Progressive Web Apps (PWA) zu stecken. Großer Pluspunkt: Die Anwendungen skalieren je nach der Leistungsfähigkeit des Gerätes, auf dem sie abgerufen werden. Ist das Smartphone potent, ist es die App auch. Allerdings lässt mit der Performance des Devices die der Anwendung ebenfalls nach.

Auch der Fakt, dass die PWAs nahezu ausschließlich auf offenen Webstandards basieren, machen sie zu einer beliebten Alternative. Allerdings hat alles eine Kehrseite, so auch diese Apps: Sie können nicht auf alle Gerätefunktionen zugreifen. Somit sind sie für so manchen Anwendungsfall also schlichtweg ungeeignet.

Die native Variante allerdings ist stets auf das Gerät, auf dem sie auch laufen soll, zugeschnitten. Die Ressourcen werden optimal genutzt und alle Schnittstellen funktionieren so wie sie sollen.

Diese Sicherheit will Google nun auch bei den PWAs bieten und intensiviert nun schon seit einer Weile die Anstrengungen, sie noch tiefer in die Android-Geräte zu integrieren, als je zuvor. Das Feature, das hierbei unterstützt hört auf den Namen „Add to Homescreen“ und macht genau das: Es erlaubt dem User, bequem vom Homescreen auf Webanwendungen zuzugreifen.

Add to Homescreen: Ein Fluch und ein Segen

Wenn es nach den Vor- und den Nachteilen der PWAs geht, sind diese Anwendung an und für sich ein Paradoxon. Denn der größte Nutzen ist auch zugleich die größte Schwäche. Auch wenn sie die Bezeichnung „App“ im Namen haben, sind sie per se keine App. Bisher war es so, dass der Shortcut zur Webanwendung wie eine Website behandelt wurde und auf dem Homescreen abgespeichert werden konnte.

Zusammen mit der Betaversion von Chrome 57 kam ein Dialog, den viele Web-App-Nutzer sehnlich herbeigesehnt haben. Nach kurzer Nutzungsdauer bietet der Browser den Dialog „Add to Homescreen“ an. Wird der Button betätigt, erscheint der Shortcut auf dem Startbildschirm und die „App“ startet bei Aktivierung ohne Chrome oder Firefox. Wäre man nun päpstlicher als der Papst selbst, müsste dieses Feature allerdings „Install to Homescreen“ heißen, denn Google verpackt die Anwendung auf einem externen Server in ein APK und installiert dieses.

Mit den PWAs hat sich Google ein ehrgeiziges Ziel gesteckt, denn bisher hatten diese – zu Unrecht – den Ruf einer „App für Arme“. Selbstverständlich ist der Kostenunterschied ein Totschlägerargument, stand doch die Behauptung im Raum, man müsse sich eben mit einer Web App zufrieden geben, wenn man sich keine „richtige“ leisten kann. Allerdings sollte doch eher das genaue Gegenteil der Fall sein!? Erst nach der Prüfung, ob sich gewisse Features nicht auch innerhalb einer Web-Variante realisieren lassen, sollte auf eine native App ausgewichen werden.

Nun will Google dieses angeschlagene Image ordentlich aufpolieren und den Progressiven Web Apps dieselben Features beziehungsweise Fähigkeiten wie den nativen Varianten ermöglichen – allerdings ohne den vorherigen Download.

Add to Homescreen: Mit Liebe von „Web“ zu „App“

Stellt man nun die Überlegung an, dass die Web Anwendungen bald genau so mächtig sein können, wie die Nativen – wie kann man sie dann noch unterscheiden? Und will man das dann überhaupt noch? Das Wollen muss letztlich jeder für sich selbst entscheiden. Für das Können gibt es das Web App Manifest, das auch gleich dafür genutzt werden kann, das Erscheinungsbild der Anwendung auf dem Startbildschirm oder dem App Drawer festzulegen. Das Gute daran: Theoretisch muss dafür der Code nicht einmal verändert werden. Wer dennoch etwas Zuneigung investieren möchte, kann die installierte PWA mit den im Kopf des HTML-Dokuments hinterlegten Metadaten nach Belieben editieren.

Das Web App Manifest ist ein JSON-basiertes Dateiformat und wird wie folgt referenziert:

="manifest.json>

Ist dieser Link-Tag vorhanden, kann die entsprechende Datei vom Internet-Browser geladen werden. Kann ein Browser mit der Verbindung aus „manifest“ und dem Web App Manifest nichts anfangen, wird er die Definition ignorieren. Ein kurzes Manifest für eine Beispiel-Web-App könnte beispielsweise folgendermaßen aufgebaut sein:

{

"short_name": "Bsp App",

"name": "Beispiel App",

"icons": [

{

"src": "assets/launcher-icon-3x.png",

"sizes": "144x144",

"type": "image/png"

}

],

"theme_color": "#303F9F",

"start_url": "/",

"display": "standalone",

"gcm_sender_id": "483951879776"

}

Dieses kurze Manifest bietet:

  • eine kurze und eine lange Bezeichnung

  • ein Icon

  • die Theme-Color, die die Plattform beispielsweise für die Farbe der Statuszeile nutzen kann

  • die Start-URL, auf welcher die Website geöffnet werden soll

  • die Anzeigeart (im Beispiel Standalone)

  • und die Google-Cloud-Messaging-Sender-ID für Push Notifications (nicht mehr notwendig bei neueren Versionen von Chrome)

Bekommen die Web-Apps also etwas Zuneigung, werden sie quasi zur „App-App“. Für Entwickler bieten die PWAs und das Web App Manifest aber noch weitere attraktive Möglichkeiten. Suchmaschinen etwa können das Manifest nutzen, um spezielle Suchen nach Web-Anwendungen durchzuführen. Bing etwa sucht sogar spezifisch nach Progressiven Web Apps. Für Windows Nutzer ist das besonders interessant, denn beliebte Anwendungen sollen aufgrund der Plattformunabhängigkeit automatisch in den Windows Store übernommen werden.

Ob eine App beliebt ist, kann der Entwickler einfach selbst überprüfen. Google bietet dafür die hauseigene open-Source Browser-Erweiterung Lighthouse an, die Service Worker, Web App Manifest und das Websiteverhalten überprüft.

Add to Homescreen: Fazit

Im Großen und Ganzen können Googles Anstrengungen, die Web Apps zu einer attraktiven Alternative zu machen, fruchten. Die Einbindung ist mit Add to Homescreen so einfach wie nie und stellt selbst für Laien kein Problem dar und die Anwendungen haben das Potenzial, den nativen „Vorbildern“ in nichts nachzustehen – ja, deren Leistung sogar zu überflügeln, wenn die Geräte, auf denen sie installiert werden, potent genug sind.

Dennoch bleibt an den Progressive Web Apps eines auszusetzen – zumindest aus betriebswirtschaftlicher Sicht. Zwar ist die Plattformunabhängigkeit einer der größten Vorteile, der PWAs, aber auch eine Herausforderung an die Entwickler. Denn wenn die App-Stores als Plattform wegfallen, muss nach Alternativen gesucht werden, um kommerzielle Anwendungen zu Geld zu machen. Welche das sind, wird sich wohl früher oder später zeigen.


Weitere Artikel zum Thema PWA

Der Progressive Web Apps (PWA) Guide




Logge die ein, um mitzudiskutieren


Jetzt registrieren   |   Passwort vergessen?


Verwandte Artikel

Warum du eine KI wie GitHub Copilot oder ChatGPT zum Programmieren verwenden solltest
Cross-Plattform Entwicklung: Flutter, React Native und Xamarin im Vergleich - Update 2023
App Entwicklung für Webentwickler - von der responsiven Web App zur nativen App
App Store Connect: Tester zu Testflight hinzufügen
App Entwicklung mit Appcelerator Titanium von Axway
App Programmierung anfragen - App programmieren lassen
Der Progressive Web Apps (PWA) Guide
App Programmierung Tutorial Teil 2: Kamera Zugriff mit Delphi
Web-App Entwicklung mit HTML5: Der Große Praxis-Guide
App Store Optimierung - App Nutzerzahlen verdoppeln oder gar verdreifachen
App Programmierung Tutorial: Mit Delphi zu mobilen Welten
Neues Entwicklerwerkzeug für BusinesSAPps: Cloud Platform SDK for iOS
Enterprise App Cloud - Ein mobivention-Service für alle Fälle
Caffe2: KI Open Source Deep-Learning-Framework von Facebook und Nvidia