Progressive Web Apps, Teil 3: Wie die Web-App zur App-App wird

Wenn Webanwendungen künftig so mächtig sein können wie ihre nativen Gegenstücke, wie kann man sie dann von übrigen Websites unterscheiden? Dafür gibt es das Web App Manifest, das zudem das Aussehen der Anwendung auf dem Homebildschirm oder im App-Switcher spezifiziert.

In Pocket speichern vorlesen Druckansicht
Lesezeit: 5 Min.
Von
  • Christian Liebel

Wenn Webanwendungen künftig so mächtig sein können wie ihre nativen Gegenstücke, wie kann man sie dann von übrigen Websites unterscheiden? Dafür gibt es das Web App Manifest, das zudem das Aussehen der Anwendung auf dem Homebildschirm oder im App-Switcher spezifiziert.

In der vergangenen Woche haben wir gesehen, dass Websites um Funktionen angereichert werden können, die bislang nativen Anwendungen vorbehalten war. Wenn Webseiten jetzt zu vollwertigen Anwendungen werden, stellt sich die Frage, wie sie denn von übrigen Websites unterscheiden lasse. Die Antwort lautet: Mithilfe des Web App Manifest, das zugleich dazu verwendet wird, um das Aussehen der Anwendung auf dem Homebildschirm oder im App-Switcher zu definieren. Per Fingertippen wird so die Web-App zur auf dem Gerät installierten App-App – natürlich ohne Änderung einer Zeile Code.

Das Konzept, Websites als Lesezeichen an das Startmenü oder den Homebildschirm anzuheften, ist nicht neu: Die iOS-Funktion "Zum Homebildschirm" wurde im ersten Teil dieser Serie vorgestellt. Möglicherweise erinnern sich die Leser auch noch an die Pinned Websites für Internet Explorer 9 oder die Pinned Sites von Windows 8. Um in diesen Fällen das auf dem Homebildschirm dargestellte Icon zu spezifizieren, werden Metadaten im Kopf des HTML-Dokumentes hinterlegt. Je nach Plattform sind unterschiedliche Meta-Tags zu setzen. Im Falle der Progressive Web Apps kommt hingegen das Web App Manifest zum Einsatz. Dieses stellt ein JSON-basiertes Dateiformat dar, das die Informationen zur Web-App enthält. Es wird folgendermaßen referenziert:

<link rel="manifest" href="manifest.json">

Bei Vorhandensein dieses Link-Tags kann der Webbrowser die verwiesene Datei laden. Auch hier ist wieder die Eigenschaft des Progressive Enhancement erkennbar: Browser, die mit der Relationship "manifest" und dem Web App Manifest nichts anfangen können, übergehen diese Definition einfach.

{
"short_name": "KA City Guide",
"name": "Karlsruhe City Guide",
"icons": [
{
"src": "assets/launcher-icon-3x.png",
"sizes": "144x144",
"type": "image/png"
}
],
"theme_color": "#303F9F",
"start_url": "/",
"display": "standalone",
"gcm_sender_id": "482941778795"
}

Das oben angezeigte Listing zeigt ein solches minimales Web App Manifest mit

  • einer kurzen und langen Bezeichnung
  • einem Icon
  • der Theme-Color, welche die Plattform zum Beispiel zur Steuerung der Farbe der Statuszeile heranziehen kann
  • der Start-URL, auf der die Website geöffnet wird
  • der Anzeigeart, hier Standalone, also ohne Fensterdekoration des Browsers
  • der Angabe der Google-Cloud-Messaging-Sender-ID für Push-Benachrichtigungen, für neuere Versionen von Chrome ist diese Angabe nicht mehr erforderlich

Progressive Web App auf dem Homebildschirm

Ebenso ist es möglich, auf zugehörige native Anwendungen in einem Store zu verweisen, eine Beschreibung zu hinterlegen oder einen Splash-Screen zu konfigurieren. "Installiert" werden Progressive Web Apps so, wie wir es von den Safari-Lesezeichen unter iOS kennen: Unter Google Chrome auf Android tippt der Anwender im Website-mMnü auf den Menüpunkt Add to Home Screen.

App Install Banner in Aktion

Weiterhin können Browser ein "App Install Banner" anzeigen, das zur Installation der vorliegenden Web-App auf dem Gerät auffordert. Aus guten Gründen wird die Anzeige dieses Banners vom Browser gesteuert: Websiteanbieter können es nicht explizit anzeigen lassen, sie können es allerhöchstens unterdrücken. Google Chrome erfordert derzeit, dass Websites, die ein App Install Banner anzeigen wollen, ein minimales Web App Manifest implementieren müssen, ein Service Worker registriert sein muss (dazu muss die Website über HTTPS ausgeliefert werden) und der Anwender die Website mindestens zweimal besucht – in einem Abstand von mindestens fünf Minuten.

Progressive Web App im Tab-Switcher

Wichtig anzumerken ist, dass es sich technisch nicht um eine echte Installation handelt. Alle Features wie die Unterstützung der Offlinefähigkeit oder Push-Benachrichtigungen funktionieren auch im Browser, ohne Hinzufügen der Anwendung zum Homebildschirm. Zu diesem hinzugefügte Anwendungen laufen auf Wunsch jedoch ohne die Fensterdekoration des Webbrowsers, werden als "eigene App" gestartet und erscheinen somit separat im App-Switcher.

Suchmaschinen wie Google können das Web App Manifest jedoch nutzen, um etwa eine spezielle Suche nach Webanwendungen einzuführen. Bing durchsucht das Web ebenfalls nach Progressive Web Apps: Besonders beliebte Anwendungen sollen automatisch im Windows Store verfügbar gemacht werden. Klar, denn die Web-Apps sind natürlich plattformunabhängig.

Wie kann ein Entwickler feststellen, wie gut er sich beim Entwickeln einer Progressive Web App geschlagen hat? Dazu bietet Google die Chrome-Browsererweiterung Lighthouse an. Diese prüft Service Worker, Web App Manifest und das Websiteverhalten. Etwa sollen sich Progressive Web Apps gemäß der Eigenschaft Responsive an die zur Verfügung stehenden Bildschirmabmessungen anpassen.

Mit Offlinefähigkeit, Push-Benachrichtigungen und Installierbarkeit wurden in dieser Serie einige der wichtigsten technischen Eigenschaften beschrieben. Gäbe es da nicht ein betriebswirtschaftliches Problem: Denn wenn die App-Stores als Plattform wegfallen, müssen Entwickler einer kommerziellen Anwendung auf andere Art und Weise an sein Geld kommen. Eine Möglichkeit hierfür besprechen wir in der kommenden Woche. ()