Progressive Web Apps (PWA) – Vorteil: auch offline online sein

Progressive Web Apps (PWA) – Vorteil: auch offline online sein

Es ist selbstverst├Ąndlich, sch├Âne, mobilfreundliche, responsive Websites oder mit den Fingern gut bedienbare Apps vorzufinden. W├Ąhrend responsive Webseiten oder n├╝tzliche Apps also fast zum Standard geh├Âren, entwickelt sich derzeit nebenbei der Offline-first-Ansatz weiter. Die recht neuen Progressive Web Apps (kurz: PWAs) sind optisch nicht von einer responsiven Website zu unterscheiden und sollen das Beste von Apps und Websites miteinander vereinen.

Wie funktionieren Progressive Web Apps?

Progressive Web Apps wollen sich die Vorteile von Apps zu Nutze machen und deren Nachteile ausmerzen. Unser Kollege Stefan Grund formuliert das so:

Tats├Ąchlich kann man sich das besser als Progressive Web Sites vorstellen, d.h. Webseiten – egal, ob das eher klassische Auftritte wie bei unseren TYPO3-Seiten sind oder Web-Applikationen wie jetzt bei Red Dot oder Stepin – die durch das Einhalten bestimmter Konventionen eine moderne Nutzererfahrung bieten, wie man sie eben z.T. aus nativen Apps gewohnt ist.

Progressive Web Apps passen sich dem jeweiligen Endger├Ąt an – nicht nur in responsiver, also darstellender Weise. Indem sie den Browser des Endger├Ąts nutzen, agieren PWAs plattformunabh├Ąngig. Durch immer umfassender werdende Schnittstellen im Browser k├Ânnen PWAs Zugriff auf die Kamera, das Gyroskop oder die GPS-Koordinaten eines Mobilger├Ąts erhalten und so Funktionen bieten, wie man sie bisher nur von nativen Apps kennt.

Bei der Google Entwicklerkonferenz (Google I/O ’17) stellte Sam Birch die Vorteile von PWAs vor .

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerkl├Ąrung von YouTube.
Mehr erfahren

Video laden

PGlmcmFtZSB3aWR0aD0iNjAwIiBoZWlnaHQ9IjkwMCIgc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9tLXNDZFMwc1FPOD8iIGZyYW1lYm9yZGVyPSIwIiBhbGxvd2Z1bGxzY3JlZW49InRydWUiIGFsbG93PSJhdXRvcGxheTsgZnVsbHNjcmVlbiIgdGl0bGU9IiI+PC9pZnJhbWU+

Die Vorteile von Progressive Web Apps

1. Unabh├Ąngigkeit von App-Stores
Den Umweg ├╝ber die App-Stores m├╝ssen Nutzer nicht mehr machen. PWAs sind wie andere Websites auch ├╝ber normale Suchanfragen in den Suchmaschinen auffindbar. Statt in App-Stores um Aufmerksamkeit zu ringen und Werbung f├╝r die App zu machen, sind PWAs wie normale Websites in den Suchmaschinen durch klassische SEO- oder SEA-Arbeit sichtbar.

2. Keine Installation & Updates
Per ÔÇ×Add-To-Homescreen-ButtonÔÇť k├Ânnen Nutzer die PWAs mit einem Klick auf ihrem Smartphone ablegen. Und das ohne viel Speicherplatz zu ben├Âtigen! Updates entfallen, da PWAs ├╝ber den Browser laufen und sich online automatisch aktualisieren.

3. „Offline First“ durch Service Worker
Klingen niedlich, sind aber lediglich JavaScripts, die zwischen der Kommunikation von Client (Browser) und Server liegen. Mit ihrer Hilfe wird ÔÇô durch HTTPS gesichert ÔÇô der Offline-Austausch m├Âglich gemacht. F├╝r die Nutzer hei├čt das, dass sie im Bedarfsfall ├╝berall auf die PWA zugreifen k├Ânnen. Das erm├Âglicht maximale Unabh├Ąngigkeit von Bandbreite, Netzverf├╝gbarkeit oder Kosten.

4. Gute Performance
Was Google freut: die gute Performance von PWAs. Denn Googles Bewertung einer guten mobilfreundlichen Website unterliegt eben auch die Geschwindigkeit, mit der die Seite auf mobilen Endger├Ąten geladen werden kann.

5. Leicht teilbar
PWAs sind – wie jede Website – verlinkbar, k├Ânnen also einfach geteilt werden; sie sind also au├čerhalb des geschlossenen App-Store-Kosmos gut erreichbar.

Fazit. Progressive Web Apps vs. Mobile Apps

Apps sind n├╝tzlich. Vermutlich aus den Gr├╝nden, aus denen die PWAs ihnen den Rang ablaufen k├Ânnten: Intuitiv bedienbar, personalisierbar, offline verf├╝gbar und einmal geladen – schnell auffindbar auf dem Smartphone. All das sind Progressive Web Apps allerdings auch.

Und mehr noch: PWAs m├╝ssen nicht ├╝ber App Stores installiert werden, sondern sind wie Websites auffindbar, teilbar und gleichzeitig wie eine App auf dem Bildschirm ablegbar, ganz ohne Updates. Aus Kosten- und Effizienzgr├╝nden k├Ânnten Anbieter fortan nur noch in die Entwicklung einer PWA zu investieren, statt beides, App und Website, zu betreiben.

Derzeit ist die Nutzung einer PWA auf mobilen Devices jedoch noch mit Einschr├Ąnkungen verbunden. Nicht alle Funktionen k├Ânnen mobile Betriebssysteme schon umsetzen. Doch w├Ąhrend Google, Mozilla, Microsoft und Opera bereits die Wege ebnen, hinkt Apple noch hinterher. Ob sich das Unternehmen weiterhin z├Âgerlich verh├Ąlt, h├Ąngt wom├Âglich auch davon ab, wie stark sich PWAs durchsetzen werden und inwieweit sich Apple in seinem App-Store-Gesch├Ąftsmodell bedroht sieht. Seit der Ver├Âffentlichung von iOS 11.3 im letzten Monat unterst├╝tzt Apple nun aber auch schon einige PWA-Funktionen wie etwa Service Worker. Maximiliano Firtman gibt in seinem Artikel einen detaillierten ├ťberblick ├╝ber PWAs und beschreibt ausf├╝hrlich, wo es derzeit noch hakt.

 

Beispiele f├╝r Progressive Web Sites
Google Maps hat bereits eine schlanke PWA, Twitter (Twitter Lite) sowie Starbucks ├╝berzeugen bereits damit. Weitere PWAs gibt es unter https://pwa.rocks/ zu sehen.

Buchempfehlung
„Going offline“ von Jeremy Keith:
https://abookapart.com/products/going-offline


Weitere PPW Blogbeitr├Ąge, die dich interessieren k├Ânnten:

Strukturierte Daten mit schema.org – ausgezeichnete Snippets

Vue.js – Vorteile: Das Beste aus zwei Welten

TYPO3-Awards f├╝r Red Dot Website