Sie benutzen einen alten Browser.

Bitte updaten Sie Ihren Browser damit Sie diese Seite so sehen, wie wir das geplant haben ...

Progressive Web Apps 101 im Apps with love Blog
Dienstag, 24. Juli 2018 / Gepostet von Patrick Delz

Progressive Web Apps 1/5: eine Alternative zur native mobile App?

Progressive Web Apps - kurz PWAs - sind die nächste Entwicklungs-Stufe in der Web App-Technologie. Sie sind nicht nur für Entwickler interessant, sondern bieten auch neue Perspektiven für Umsatz und Vermarktung. In dieser Artikelserie erklären wir die grundlegenden Konzepte, zeigen was PWAs für Chancen und Möglichkeiten bieten und erläutern, was sich für Anwender und Programmierer verändert.

Neue Wege gehen

Deine kreativen Ideen für eine Unternehmens-, oder Business-App, ein Spiel oder eine Kampagne stehen bei uns immer am Anfang. Wenn Du diese in eine App verpacken willst, kommt die gesamte technische Umsetzung dazu.

Vom Smartphone her sind wir es heute gewohnt, die Welt durch Apps zu erleben. Die technischen Möglichkeiten zur Umsetzung Deiner Ideen verändern sich mit der Zeit genauso wie die Gewohnheiten und Erwartungen von Enduser. Bei der App-Entwicklung sind es die so genannten Progressive Web Apps (PWA), welche heute die Grenzen zwischen installierten Apps aus den App Stores und Web Anwendungen verwischen, denn sie laufen wie eine herkömmliche Webseite einfach im Browser. Sie bieten je nach Betriebssystem und Web Browser mehr oder weniger Funktionalitäten, welche bis anhin den nativen Apps vorenthalten waren. PWAs können zum Beispiel lokal gespeichert und deshalb schneller und auch offline genutzt werden. PWAs basieren auf einer Initiative von Google aus dem Jahre 2015. Google treibt die Weiterentwicklung im Web - also Web-Technologien wie auch die Benutzererfahrung - stetig voran. Progressive Web Apps werden vom Google-eigenen Browser Chrome seit 2017 unterstützt und seit iOS 11.3 (Frühling 2018) bietet auch Apple mit dem eigenen Browser Safari neue Möglichkeiten für PWAs durch sogenannte Service Workers.

Um die Bedeutung dieses Fortschritts zu verstehen, schauen wir als nächstes, was es technisch gesehen für verschiedene Typen von Apps gibt und beginnen dazu mit einem kleinen Blick in die Geschichte.

Zwei Haupt-Typen von Apps

Den Browser als Plattform für Anwendungen zu verwenden, ist streng genommen eine Idee, die fast so alt ist wie das World Wide Web selbst.

Klassische Webanwendungen nutzen dabei den Browser für die Darstellung einer Benutzeroberfläche zur Eingabe und Ausgabe von Daten, die eigentliche Daten-Verarbeitung findet auf einem Server statt. Die Übertragung der Daten geschieht via dem HTTP-Protokoll. Um die Webanwendung nutzen zu können, ist eine konstante Online-Verbindung notwendig. Webanwendungen sind nicht speziell für die Nutzung auf Mobil-Geräten konzipiert. Viele bekannte Content Management-, CRM- oder Shop-Systeme funktionieren als reine Webanwendungen (Webapps).

Als Steve Jobs im Jahre 2007 mit dem ersten iPhone unseren Umgang mit Computern und digitalen Inhalten für immer veränderte, war es nicht vorgesehen, dass Benutzer «Apps» herunterladen und installieren. Externe Entwickler sollten auf Web Apps für den Safari-Browser setzen. Bei den Entwicklern stiess dieses Konzept damals jedoch auf starke Ablehnung aufgrund mangelnder technischen Möglichkeiten. Noch im Herbst desselben Jahres kündete Apple einen Strategiewechsel an und versprach die Veröffentlichung eines Software Development Kit (SDK), um Allen die Möglichkeit zu geben, installierbare native Apps zu entwickeln. Im Juli 2008 wurde dann der App Store für iPhones eröffnet. Im Herbst desselben Jahres eröffnete auch Google für sein Betriebssystem Android einen eigenen App Store, der damals noch Android Market hiess.

User verbrachten 2015 zu 87% Zeit mit nativen Apps auf Ihrem Smartphone.
User verbrachten 2015 zu 87% Zeit mit nativen Apps auf Ihrem Smartphone. Progressive Web Apps erhoffen sich durch die Annäherung an native Apps mehr Nutzungszeit zu erhalten.

Native und Web Apps

In diesem kurzen Ausflug in die Geschichte sind zwei verschiedene Typen von Apps deutlich geworden. Diese grundlegende Unterscheidung hat bis heute ihre Gültigkeit.

Für den Kontext dieser Artikel-Serie konzentrieren wir uns im Folgenden auf die Unterschiede zwischen installierbaren, nativen Apps und Progressive Web Apps.

Native Mobile Apps

Diese Schritte kennst Du aus der eigenen Erfahrung: eine App im Store suchen, auswählen und dann warten, bis sie heruntergeladen und installiert ist. Damit sind wir beim wichtigsten Unterschied zu Progressive Web Apps - eine native App muss zwingend auf dem Gerät installiert sein, damit der Anwender sie in vollem Umfang benutzen kann. Die Bereitschaft hierzu ist jedoch nicht mehr so hoch wie früher - auf das Phänomen der «App-Müdigkeit» werden wir im nächsten Beitrag in unserer Serie näher eingehen.

Plattformspezifisch

Eine native App wird immer für die jeweilige Plattform entwickelt - wenn man von Mobilgeräten spricht, sind das realistisch gesehen iOS von Apple und Android von Google. Bei Android kommt die starke Fragmentierung bei den Versionen des Betriebssystems hinzu. Ältere Versionen von Android haben tendenziell höhere Marktanteile als die jeweils Neuste. Zudem gibt es bei den Android-basierten Geräten eine viel grössere Bandbreite was Leistung und Ausstattung betrifft.

Distribution

Die Distribution läuft fast ausschliesslich über den zentralen Store der jeweiligen Plattform. Das bedeutet auch, dass man keine Chance hat potentielle Benutzer zu erreichen, wenn man mit der eigenen App nicht in den jeweiligen Store aufgenommen wird. Google und Apple haben Richtlinien zu verschiedenen Kriterien aufgestellt, die Apps erfüllen müssen.

Zugriff auf alle Gerätefunktionen ermöglichen komplexe Applikationen

Als Entwickler hat man bei nativen Apps die maximale Kontrolle über Gestaltung und Funktionalität. Man kann auf viele Sensoren, Funktionen und Schnittstellen zugreifen, welche viel komplexere Anwendungen und pixelgenaue Umsetzung zulassen, wie es aktuell mit Web Apps noch nicht möglich ist.

Kostentreiber für Native Apps

Entwickelt man eine App für Android Smartphones und iPhones (iOS), was aus Gründen der Reichweite auch meistens angezeigt ist, entstehen höhere Kosten durch den zusätzlichen Arbeitsaufwand in der initialen Entwicklung und im Unterhalt. Weiterer Arbeitsaufwand entsteht bei der Einreichung in die App Stores. Will man ein Update veröffentlichen, muss man immer zuerst den Freigabe-Prozess des jeweiligen Stores abwarten, bevor die Nutzer die neuste Version herunterladen können.

Progressive Web Apps

Das Ziel von Progressive Web Apps ist es, eine Kombination aus den Vorteilen von native installierten Apps und browserbasierten Applikationen zu schaffen. «Progressive» - also im Sinne von fortschrittlich oder zukunftsorientiert - sind sie, weil sie technologisch über die oben beschriebenen klassischen Web Apps hinausgehen und nahtlos in «jedes» System integrierbar sind. Die technischen Grundlagen entsprechen dem neusten Stand der Webtechnologie, darauf wird in einem späteren Kapitel noch näher eingegangen.

Capability and Reach of PWA compared to Web and native Apps Chart
Quelle Grafik: Google Developer Training

Was macht eine PWA aus?

Doch was heisst das genau? Wir fassen hier die wichtigsten Kriterien zusammen, die eine PWA ausmachen. Eine Progressive Web App ist eine moderne responsive Website, die möglichst viel mit einer native App gemeinsam hat. Zum Beispiel können User auch ohne mobiles Internet auf diese Arten von Websites zugreifen. Grund dafür sind JavaScript und Service Worker, welche durch intelligentes Caching Inhalte auch bei schlechter Internetverbindung anzeigen können. Zudem können PWAs, ähnlich wie herkömmliche Apps, dem Homescreen hinzugefügt werden. Anders als bei herkömmlichen Apps muss eine PWA dafür nicht installiert werden.

Die hier aufgeführten Eigenschaften einer Progressive Web App decken sich grösstenteils mit denen, welche Google auf seinen Developer-Seiten als Richtlinien für App-Entwickler aufführt. Auch Chrome ist längst nicht mehr der einzige Browser, welcher PWA unterstützt. Apple ist im Frühling 2018 ebenfalls entsprechend nachgezogen.

Mobile First und App-Nutzung

In den Stores von Google und Apple warten rund 6 Millionen der kleinen Programme darauf, heruntergeladen und installiert zu werden. Braucht es jetzt ausgerechnet auch noch MEINE App? mag die Frage sein, die Dir durch den Kopf geht. Die Antwort sollte ein überzeugtes JA sein, vor allem wenn man sich diese Tatsachen vor Augen führt: Aufs Internet greifen wir heute mehrheitlich mobil zu - Smartphones, Tablets und Notebooks machen es uns möglich, das Internet sozusagen in der Hand oder zumindest in der Tasche immer mit dabei zu haben. Neben dem Surfen nach News und Informationen, gehören Messaging sowie Streamen von Musik und Videos zu den beliebtesten Online-Aktivitäten. Im Trend liegt zudem das Shopping via Smartphone.

Herausforderungen durch verändertes Nutzerverhalten

Diese Veränderungen im Nutzerverhalten stellen auch die Anbieter vor Herausforderungen, die vor wenigen Jahren noch viel weniger relevant waren. An oberster Stelle stehen heute die Verfügbarkeit auf Mobil-Geräten (Funktionalität und gut bedienbar) und die Erreichbarkeit von überall her, egal wo man sich als Anwender gerade befindet.

Mobile First

In diesem Zusammenhang fällt immer wieder der Begriff «Mobile First». Er hat eigentlich zwei unterschiedliche Bedeutungen, aber wie bei einer Münze, kommt die eine Seite nicht ohne die andere aus. «Mobile First» ist einerseits eine Vorgehensweise bei der Entwicklung von Webseiten-Layouts: Dabei wird zuerst ein Layout für die Darstellung auf Mobilgeräten wie Smartphones entwickelt, und erst danach das Layout für Bildschirme von Notebooks und Desktop-Rechnern. Dieses kann im Vergleich zum Mobilgerät zusätzliche grafische und inhaltliche Elemente enthalten. Im Umkehrschluss kann sich der Begriff Mobile First aber auch auf die Bevorzugung der Internet-Nutzung via mobile Geräte beziehen, wie wir es oben beschrieben haben. Die Fokussierung auf das Mobile geht bis hin zu «Mobile Only» Anwendungen, welche ihre digitalen Services nur für die Nutzung via Smartphone ermöglichen.

Ausblick

Grafik über die PWA-Fähigkeiten des Browsers.

«Viele native Smartphone-Funktionen sind heute schon in diversen Browsern integriert. Teste Dein Browser auf https://whatwebcando.today»

— Patrick Delz

Trotz gewissen Vorteilen von Progressive Web Apps, gibt es aktuell immer noch etliche Anwendungsfälle, wo eine native App klar besser geeignet ist.

Deshalb nehmen wir von Apps with love Dich mit auf eine kleine Reise rund ums Thema Progressive Web Apps, den PWA sind kein herbei-gehypter Trend sondern Alltagsrealität. In den folgenden Artikel dieser Serie wollen wir darauf eingehen, was die technologische Weiterentwicklung aus Marketing- und Business-Sicht bedeutet, wie das Benutzererlebnis bei einer PWA aussieht, wie sie technisch funktioniert und was das alles für Entwickler und Programmierer bedeutet.

Patrick Delz

Head of Office Basel

Begann im letzten Jahrtausend (1999) mit Webdesign und Webprogramming. Seither hat sich Patrick ununterbochen mit dem Web auseinandergesetzt. Er hat schon mindestens 5 Browser, 3 HTML-Standards und x PHP-Versionen unbeschadet überlebt … 😎

Das könnte dich auch interessieren

subpixel joins Apps with love blog header
01. November 2018

Apps with love eröffnet zweiten Standort in Basel und verstärkt Web Kompetenzen

Apps with love bezieht in der Nähe vom Hauptbahnhof Basel einen zweiten Firmenstandort und erweitert das Team mit Web-Tech Kompetenzen.

SCB Bär Emojis
29. Oktober 2018

Täglich 5 Milliarden Emojis - Join The Conversation

Die Beliebtheit von Emojis wächst unaufhörlich. Unsere Emotionen konnten noch nie so leicht dargestellt und übermittelt werden wie heute.

21. September 2018

PWA Teil 2: Möglichkeiten, Grenzen und Stärken

Was können Progressive Web Apps (PWA) heute schon? Wie sieht es mit der Browser-Kompatibilität aus? Wir zeigen Beispiele und wo ihre Stärken liegen.

24. August 2018

Mit Apps Geld verdienen, wie geht das?

App Monetarisierung - welche verschiedenen App Business Modelle gibt es und was sind ihre Vor- und Nachteile?

Bay of Fires Tasmanien
06. Juli 2018

Als Remote Worker in Australien und Südostasien

Remote Working Erlebnisse, Fotos & viele App Markt Insights. Vom Camping in Tasmanien, den Reisfeldern in Bali, bis zu Dschungelwanderungen in Laos.

21. Juni 2018

App Indexing: mehr Traffic, Installationen und Nutzung

Durch App-Indexing werden App-Inhalte in mobilen Suchergebnissen von Google angezeigt. Dies führt zu mehr Traffic, Downloads & höherer Nutzung.

Mobile Deep Linking Apps with love Bern
07. Juni 2018

Tiefe Links: Wie können Deep Links helfen das Nutzungserlebnis zu verbessern?

Das Verlinken auf Unterseiten von Apps wird Mobile Deep Linking genannt. Das Nutzungserlebnis wird verbessert und der App Markt damit revolutioniert.

App Trends Illustration Keyvisual Apps with love Blog
11. Mai 2018

15 APP MARKT UND TECHNOLOGIE TRENDS

Diese App und Tech-Trends werden die Softwarebranche in den nächsten zwei Jahren beschäftigen. Blockchain, KI, 5G, PWAs, VR, AI-Chatbots, AMP, ...

Apps with love an der Droidcon in Turin 2018
26. April 2018

droidcon Turin 2018  - Rückblick & Highlights

Unsere Android Entwickler Yannick und Adel haben die droidcon in Turin besucht. In diesem Blog beschreibt Yannick seine Eindrücke und Highlights.

04. März 2018

HOW TO PIMP YOUR APP – WAS WENN APP USER NICHT WOLLEN?

Dieser Blog Beitrag beschreibt wieso Apps nach dem Download gleich wieder gelöscht, oder kaum genutzt werden und was man dagegen tun kann.

21. Februar 2018

ERFOLGREICH EINE APP ENTWICKELN - SO FUNKTIONIERT'S

Von der ersten Idee bis zum Go-Live einer App ist es oftmals ein steiniger Weg. Hier beschreiben wir unseren agilen App Entwicklungsprozess.

23. Dezember 2017

Pre Launch App Marketing durch User Research und Community Building

Mit “Updraft App Delivery” wurde die Beta-Version der Helsana+ App einfach und ohne die App Stores an mehrere tausend Beta-Tester verteilt.

13. Oktober 2017

Helsana+ Bonusprogramm: Der Weg ist das Plus

Mit dem Ziel ein nachhaltiges Plus im Leben bestehender Kunden zu schaffen, hat Helsana das Helsana+ Bonusprogramm mit Apps with love entwickelt.

carvelo2go blog titelbild
07. September 2017

carvelo2go App – mit 3 Tabs zum nächsten Cargobike

Die carvelo2go App ermöglicht Endkunden ganz einfach via App Cargobikes zu suchen, zu reservieren & Buchungen zu verwalten. Ein App Projektbericht...

User Research Workshop von Apps with love in Murten
13. Juli 2017

User Research in der App-Entwicklung - Unsere Erfahrungen

Die Apps with love User Researcherinnen Julia Klammer, Milena Rutz und Alexandra Tanner blicken auf ein Jahr angewandte Nutzerforschung zurück.

Apps with love Know How für die App Entwicklung
20. Januar 2017

7 entscheidende Tipps für eine erfolgreiche App

Die App-User Experience, der Mehrwert im Kontext, das Projektteam, oder deine Denkweise sind wichtige Erfolgsfaktoren für die App Entwicklung.

21. April 2016

PATROUILLE DES GLACIERS APP - SPITZENSPORT FÜR DIE ENTWICKLER

Die Patrouille des Glaciers ist nicht nur sportlich gesehen ein sehr hartes Rennen, sondern auch für die Entwickler eine Art Marathon.

04. März 2016

App USER ONBOARDING TEIL 2

Die Hälfte der Nutzer öffnet eine App kein zweites Mal. Was kann man dagegen tun? Die Antwort liegt beim allzu oft vergessenen User Onboarding.

18. Februar 2016

EINTAUCHEN IN DIE WELT DES USERS BEFRUCHTET DIE KONZEPTION

Mit der App HORNUSSEN wird eine neue Kommunikations- und Informationsplattform für den EHV geschaffen.

07. Februar 2016

DER ERSTE EINDRUCK ZÄHLT – USER ONBOARDING TEIL 1

Rund die Hälfte der App-User öffnet eine App kein zweites Mal! Was kann man dagegen tun? Die Antwort liegt beim App User Onboarding.

03. Dezember 2015

DESIGN VS. TECHNOLOGY

Sind programmierende Designer die besseren Interaction Designer? Sind gestaltende Programmierer die besseren Interface Programmierer? App Knowhow

11. November 2014

IN 7 SCHRITTEN BIS ZUR APP - ENTWICKLUNGSPROZESS

Existierende Denkrichtungen und Ansätze im Projektmanagement sind nicht schlecht. Wir haben jedoch unseren eigenen App Entwicklungsprozess designed.

04. August 2014

DIE WETTER-ALARM APP ERHÄLT EIN NEUES KLEID

Zu Beginn dieses App-Projektes wurde in mehreren Workshops & Kundenbefragungen der Status Quo analysiert. Dann wurde Konzept & App Design entwickelt.

04. Oktober 2013

"BIMANO" DER BOULDER-GUIDE FÜR DIE HOSENTASCHE

Konzipiert mit lokalen Kletterern, ist Bimano der mobile Guide für Bouldering Orte in der Schweiz und Europa.