Dezember 2018 – Progressive Web Apps

tdm pwa

Progressive Web Apps

Mobile First

“Mobile first” hat sich bei der Realisierung von Websites in den letzten Jahren vom guten Vorsatz zur absoluten Notwendigkeit entwickelt. Die Zahl der Internetzugriffe von mobilen Geräten aus nimmt stetig zu und hat den Desktop-PC wie auch das Notebook als traditionellen Zugang zum Internet in manchen Altersgruppen bereits überholt: 2018 gehen in der Schweiz 63% der “Digital Natives” zwischen 14 und 29 Jahren häufiger mit dem Smartphone ins Internet als mit dem Computer. Bei den “Digital Immigrants” zwischen 30 und 54 Jahren beträgt dieser Anteil immerhin noch 45%, und selbst jeder Vierte “Silver Surfer” zwischen 55 und 69 Jahren greift für die Internetnutzung lieber zum Smartphone.

Allerdings geht auch beinahe jeder, der ‘meistens’ den Computer bevorzugt, dennoch auch mobil ins Internet. In der Schweiz trifft das auf rund 90% der Bevölkerung zu, aber es handelt sich hierbei um einen weltweiten Trend. Diese Zahlen belegen eindrücklich, welch enorme Bedeutung das mobile Internet mittlerweile hat.

mobile devices
Y&R (Switzerland). (n.d.). Entwicklung der Nutzung von Smartphones bzw. Tablets in der Schweiz von 2013 bis 2018. In Statista - Das Statistik-Portal. Zugriff am 30. Oktober 2018, von https://de.statista.com/statistik/daten/studie/307597/umfrage/internetnutzung-auf-mobilen-endgeraeten-in-der-schweiz/.
internetnutzung
GlobalWebIndex. (n.d.). Welches ist für Sie das wichtigste Endgerät für die Internetnutzung, egal ob unterwegs oder zu Hause?. In Statista - Das Statistik-Portal. Zugriff am 30. Oktober 2018, von https://de.statista.com/statistik/daten/studie/781162/umfrage/bedeutung-von-endgeraeten-fuer-die-internetnutzung-weltweit/.

Mit dieser Entwicklung gehen zahlreiche Herausforderungen einher: Die Hersteller von Smartphones und Tablets als mobilen ‘Zugangspunkten’ sind hier ebenso gefragt wie die Infrastruktur- und Serviceprovider, nimmt der Datenverkehr über mobile Netze doch in rasantem Tempo zu wie auch die Anforderungen an schnelles und möglichst überall verfügbares Internet steigen. Es geht weltweit immerhin um einen potentiellen Markt von über 5 Milliarden Kunden, welche 2018 ein mobiles Endgerät besassen – Tendenz kontinuierlich steigend.

Dass sich vor diesem Hintergrund Websites “responsive” verhalten müssen, das heisst durch ihre Umsetzung und Gestaltung auch (und vor allem) auf den kleineren Displays mobiler Geräte ansprechend erscheinen und bedienbar bleiben, liegt auf der Hand. Allerdings, und das muss in aller Deutlichkeit festgehalten werden, handelt es sich hierbei mittlerweile um eine unumgängliche Minimalanforderung. So gut wie keine Website kann es sich noch erlauben, auf mobilen Geräten durch kaum lesbare, da winzige Schrift zu bestechen oder Menüs anzuzeigen, die auf Smartphonedisplays kaum erkennbar, geschweige denn mit einer Fingerkuppe bedienbar sind.

Die Erfüllung solcher Voraussetzungen garantiert freilich noch längst keinen Erfolg. Je relevanter eine Website für das jeweilige Geschäftsmodell ist, desto höher sind die Anforderungen in technischer Sicht sowie hinsichtlich der User Experience. Dem Besucher der Website oder des Onlineshops soll ein umfassendes ‘Erlebnis’ geboten, er zum Kauf verleitet und im Idealfall an das Unternehmen gebunden werden. Dies erfordert entsprechend mehr als nur das Vorhandensein einer responsiven Website.

An dieser Stelle geht es allerdings nicht um denkbare Strategien zur Bewerbung von Unternehmen und Websites oder das Buhlen um die Gunst des Kunden mittels Social Media. Stattdessen befassen wir uns mit einer Möglichkeit, dem potentiellen Kunden die Nutzung von Website/Onlineshop mit mobilen Geräten zu erleichtern und dadurch unter anderem die Conversion-Rate zu verbessern

Was für viele grosse Onlineshops, Tageszeitungen und andere Portale selbstverständlich ist, kommt für die unzähligen Betreiber kleinerer Websites und Shops schon aus finanziellen Erwägungen in der Regel nicht in Frage: Die Entwicklung einer eigenen App für die am weitesten verbreiteten mobilen Betriebssysteme Android und iOS bringt das jeweilige Angebot dem Kunden wesentlich näher, geht allerdings mit erheblichem Aufwand einher.

Progressive Web Apps

Mittlerweile gibt es veritable Ansätze, die “Lücke” zwischen im Browser anzusteuernder Website und (beinahe) nativer Smartphone-App zu schliessen: Progressive Web Apps (PWA) werden nicht erst jetzt intensiv diskutiert, finden mittlerweile aber zunehmende Verbreitung. Wir stellen Ihnen dieses Konzept vor und gehen auf die wichtigsten daraus resultierenden Möglichkeiten ein.

Progressive Web Apps sind in erster Linie speziell angepasste Websites, die weiterhin wie gewohnt über eine URL aufgerufen werden. Erfolgt der Seitenbesuch allerdings über ein mobiles Gerät wie ein Smartphone oder Tablet, bietet sich eine zusätzliche Option: Je nach verwendetem Betriebssystem und Browser unterscheiden sich die Hinweise und das exakte Handling, aber in der Sache bleibt eines gleich – die Website lässt sich wie eine App auf den jeweiligen Homescreen legen, offline (bzw. auch bei schlechter Datenverbindung) nutzen und weitere Features anbieten. Die von vielen Apps bekannten Push-Notifications sind bei PWA ebenfalls realisierbar, wie sich Geolokalisierung oder der Zugriff auf Sensoren und Schnittstellen des Smartphones potentiell zunutze machen lassen; auf die Einschränkungen wird noch eingegangen.

An unserem Blog können wir die Basisfunktionalität aufzeigen. Rufen wir diesen auf einem Android-Smartphone auf, erscheint eine – je nach verwendetem Browser mitunter anders aussehende – Meldung, dass sich die Website zum Startbildschirm hinzufügen lässt. Wird das entsprechende Symbol in der Menüleiste ausgewählt, erscheint eine Vorschau des App-Icons sowie deren Beschriftung.

Ab diesem Zeitpunkt ist unser Blog über das neue Icon auf dem Homescreen aufrufbar, ohne dass der Umweg über den Browser gegangen werden muss. Die Offlinenutzung zeigt am deutlichsten den Unterschied zu einem blossen Link.

Zugegeben, unser Blog ist noch nicht bis ins kleinste Detail auf die Nutzung als PWA ausgelegt, in Sachen Navigation und Handling müssen wir noch ein klein bisschen nachbessern…

Was sich jedoch deutlich zeigt, ist die Möglichkeit, ohne die Entwicklung einer nativen App bis auf den Homescreen des Benutzers/Kunden vorzudringen, und dies ganz ohne den erheblichen Aufwand, den die Realisierung einer eigenständigen App mit sich bringen würde.

Für den User gibt es dabei ganz unterschiedliche Gründe und Vorteile, sich eine PWA auf den Homescreen zu legen:

  • Die Inhalte sind schneller erreichbar als durch URL-Aufruf im Browser.
  • Die Verfügbarkeit und Nutzbarkeit ist auch bei schlechtem Empfang oder fehlender Verbindung gewährleistet.
  • Durch Push-Mitteilungen bleibt der User über neueste Informationen, Angebote o.ä. auf dem Laufenden, ohne die Website besuchen zu müssen
  • Da eine gesicherte Verbindung über HTTPS bei jeder PWA Voraussetzung ist, kann dies als gegeben gelten, sobald das “Angebot” erscheint, die Website als App zu nutzen.

Doch auch für den Anbieter ist es durchaus lohnenswert, eine Website zur Nutzung als Progressive Web App aufzubereiten:

  • Die User/Kunden sind über Push-Mitteilungen direkt ansprechbar und auf Aktionen o.ä. hinzuweisen.
  • Durch die Möglichkeit erheblich besserer User Experience lässt sich die Conversion Rate mitunter deutlich erhöhen.
  • Je nach Angebot und Zweck ist es denkbar, die PWA mehr oder weniger wie eine “echte” App aussehen zu lassen.

Warum also nicht sofort alle Websites entsprechend anpassen, wenn es hierbei ausschliesslich Gewinner zu geben scheint?

Nachteile und Einschränkungen gibt es freilich auch hinsichtlich der Progressive Web Apps, zum einen was die Implementierung anbelangt und zum anderen hinsichtlich der tatsächlichen Nutzbarkeit durch die Anwender.

Wie umsetzen?

Die Frage des Aufwands, eine bestehende Website zur Progressive Web App zu transformieren, lässt sich nicht einheitlich beantworten. Je nach zugrunde liegendem System, der Komplexität der Website und deren genauen Absichten ist der Aufwand, eine bestehende Site zur PWA zu machen, unterschiedlich hoch. In manchen Fällen kann es zudem ratsam erscheinen, eine als PWA gewünschte Website von Grund auf neu zu entwickeln. Sind native Apps für Onlineshops besonders interessant, bedeutet das Aufkommen von Progressive Web Apps leider noch nicht, dass aus jedem Onlineshop mit wenigen Klicks eine PWA gezaubert werden kann. Gerade bei Shops gilt natürlich weiterhin, dass diese möglichst einwandfrei realisiert werden müssen, um nicht die Gunst des Nutzers zu verlieren. Wenngleich die Hürden bei Onlineshops noch höher sind als bei ‘normalen’ Websites, ist dennoch anzunehmen, dass in dieser Form von “Website” ein wesentlicher Teil der Zukunft des E-Commerce liegt.

Aktuell sind jedoch auch noch einige Inkompatibilitäten auf Benutzerseite, d.h. bezüglich der mobilen Endgeräte zu beachten.

Wer hats erfunden?  – Urheberschaft, Unterstützung und Kompatibilitäten

Während Google die vorgestellte Technik unter dem Begriff PWA nachdrücklich forciert, gibt es auch Stimmen, die den Grundgedanken dieser Erfindung Apple zuschreiben. Doch unabhängig von der geistigen Urheberschaft lässt sich konstatieren, dass die beiden grossen Ökosysteme – Apples iOS und Googles Android – unterschiedlich weit sind, was die Unterstützung wie auch die Möglichkeiten der PWA anbelangt. (Mehr zur Unterstützung durch iOS/Safari und die Unterschiede zu Android lässt sich hier nachlesen)

Allerdings beschränkt sich die uneinheitliche Unterstützung nicht nur auf das eingesetzte Betriebssystem, sondern auch den jeweils verwendeten Browser: Chrome, Firefox, IE, Edge, Safari et cetera gehen teils unterschiedlich mit PWA um und unterstützen (noch) nicht alle Features.

Es ist mehr als wahrscheinlich, dass diese Heterogenität in der Unterstützung durch die unterschiedlichen verfügbaren Browser und Betriebssysteme künftig abnimmt, das heisst PWA umfassender und gleichmässiger unterstützt werden. Eine Garantie kann es hierfür allerdings naturgemäss nicht geben.

Wollen Sie mehr über die Möglichkeiten wissen, die Progressive Web Apps bieten? Interessieren Sie sich für die an dieser Stelle ausgesparten technischen Hintergründe und Funktionsweisen der PWA?

Zögern Sie nicht und kontaktieren Sie uns!