pwa blogpost

Der ultimative PWA Guide – Progressive Web Apps

Loading Likes...

Progressive Web Apps (PWA) sind die moderne Alternative zu Apps und Webseiten. Der technologische Hybrid wird als zukunftsweisendes Modell gehandelt und könnte künftig die uns gut bekannten Apps ersetzen. Wie PWAs funktionieren und welche Vorteile sie bieten erfahren Sie in diesem PW-Ratgeber.

Was ist eigentlich eine PWA?

PWA steht kurz für Progressive Web Application. Das Modell schlägt die Brücke zwischen einer nativen App und einer herkömmlichen Webseite, fungiert also gewissermaßen als technischer Hybrid. Vom “Look and Feel” ähnelt die PWA einer nativen App, jedoch funktioniert sie anders als diese losgelöst vom Betriebssystem, sowohl als Webseite als auch als App. Eine Progressive Web App wird ebenso wie eine Webseite über eine URL im Internet verfügbar gemacht und im Browser ausgeführt. PWAs sind somit unabhängig von App Stores und den damit verbunden Aufwänden (z.B. wenn ein Update ausgerollt wird). 

Einfache Installation trifft responsives Design

Anders als eine native App, wird eine PWA nicht über Appstores (Apple App Store/ Google Playstore) installiert. Stattdessen muss nur eine Verknüpfung mit der URL hergestellt werden. Besitzt der User ein internetfähiges Gerät, so kann er sich ganz einfach eine Verknüpfung mit der URL auf seinem Homescreen ablegen.

PWAs sind responsiv gestaltet und passen sich daher jeglicher Bildschirmgröße optimal an. Die Verknüpfung der PWA ist App-ähnlich und kann auch offline, unabhängig von mobilen Daten, auf dem Gerät ausgeführt werden. Ist der Internetzugang einmal nicht vorhanden, bedient sich die PWA der Daten aus dem Cache des Service Worker.

Der Service Worker ist eine Weiterentwicklung des Web Worker, der als Javascript im Hintergrund des Browsers ausgeführt wird. Beim ersten Aufruf der PWA URL wird der Service Worker über den PWA-Server heruntergeladen und installiert. Sind der Service Worker und der zugehörige Cache einmal im Browser gespeichert, wird er über jegliche Netzwerkabfrage auf der entsprechenden Domain informiert und speichert die aktuellen Daten. Ohne bestehende Netzwerkverbindung werden die Daten dann einfach aus dem Cache geladen.

Diese Application Shell Architecture ermöglicht so nicht nur die Verwendung im Offline-Modus, der Ladevorgang nimmt allgemein weniger Zeit in Anspruch als bei herkömmlichen Apps oder Websites. Denn ist das App-Gerüst einmal gecacht müssen nur noch die aktualisierten Daten der PWA heruntergeladen werden.

pwa.bar
Auf https://pwa.bar erhält man eine Übersicht über einige bekannte PWA-Beispiele.

Wofür kann man PWAs einsetzen?

PWAs punkten durch ihre Flexibilität und eine gute UX. Grundsätzlich lassen sich PWAs in jedem Bereich einsetzen. Einfache Websites können bspw. leicht zu einer PWA weiterentwickelt werden. Das bietet sich besonders dann an, wenn bereits eine gute Webseite vorhanden ist, der Entwicklungsaufwand für eine App jedoch als zu hoch und zu teuer eingestuft wird.

Einen Überbau für die PWA zu erstellen ist unter Berücksichtigung der Grundsätze der Single-Page-App Entwicklung relativ kostengünstig. Eine Progressive Web App bietet sich auch dann an, wenn für die User ein viefältig kompatibles App-Erlebnis geschaffen werden soll. Nutzen Kunden die Anwendung auf vielen verschiedenen Geräten, ist eine PWA aufgrund ihres responsiven Designs womöglich besser geeignet als eine herkömmliche App.

Ab wann ist eine Website auch eine PWA?

Die Unterschiede zwischen Website und PWA erscheinen im ersten Moment fließend, jedoch gibt es einige Upgrades die eine PWA einer normalen Website gegenüber bereithält.

Eine Website ist dann eine PWA, wenn:

  • sie auf jedem Endgerät funktioniert, also ein responsives Design besitzt und in jedem Format angezeigt wird.
  • sie sicher ist, also die Datenübertragung per SSL (Secure Sockets Layer) verschlüsselt wird.
  • sie über über eine Synchronisation der Daten im Hintergrund verfügt (Application Shell Architecture).
  • sie zu jeder Kernfunktion und signifikanten Inhalten verlinkt.
  • sie über eine überdurchschnittliche Netzwerk-Resilienz verfügt.
  • sie über Funktionen wie Push-Benachrichtigung verfügt.

Was sind die Vorteile einer PWA?

Eine PWA bietet gegenüber nativen Apps und Websites dem Benutzer vielerlei Vorteile. PWAs sind einfach flexibler als die herkömmlichen Anwendungen und bieten somit auch ein verbessertes UX/UI Design. 

Die Vorteile im Vergleich zu einer Webseite:

PWAs punkten mit schnelleren Ladezeiten als gewöhnliche Webseiten. So beträgt die durchschnittliche Ladezeit pro Seite bei einer PWA ca. 1,4 Sekunden. Herkömmliche Webseiten können da mit einer durchschnittlichen Ladezeit von ca. 6,2 Sekunden nicht mithalten.

Doch auch in puncto zusätzliche Funktionen ist die PWA der Website weit voraus. Denn die PWA bietet Usern im Gegensatz zur Website viele Möglichkeiten, die mit denen einer nativen App vergleichbar sind. Dazu zählen bspw. Push-Benachrichtigungen (als foreground und background Messages), der Kamera- und Mikrofonzugriff, Gerätevibration, Geolocation, Beschleunigungssensor, Kompass und Akkuladestatus, sowie Bildschirmausrichtung. Die Application Shell Architecture ermöglicht außerdem die Offline-Nutzung der Inhalte.

Die Vorteile im Vergleich zu einer nativen App:

Einer der großen Vorteile von PWAs gegenüber Apps ist sicherlich, dass kein App-Store mehr benötigt wird. Eine PWA muss nicht heruntergeladen werden, sie gestaltet sich also in sachen Installation viel benutzerfreundlicher. Stattdessen wird die Verknüpfung zur URL ganz einfach mit nur einem Klick als Icon auf dem Screen abgelegt.

Während User sich bei nativen Apps außerdem selbstständig um den download der neuesten Updates kümmern müssen, entfällt der Mehraufwand bei PWAs. Schließlich aktualisiert sich die PWA bei jedem Zugriff übers Netzwerk und bestehender Serveranbindung selbst. Ein weiterer Pluspunkt ist die Größe von PWAs. Da das Icon grundsätzlich als Verknüpfung auf dem Gerät abgelegt wird, nehmen PWAs nur einen Bruchteil der Speicherkapazität des Smartphones in Anspruch verglichen zu nativen Apps.

Lange Downloadzeiten und fehlender Speicherplatz auf dem Smartphone gehören mit PWAs der Vergangenheit an. Wer sichergehen möchte, dass die Inhalte der eigenen Applikation im Web auch gefunden werden, der fährt mit einer PWA in jedem Fall besser. Im Gegensatz zu nativen Apps, sind die App-Website-Hybriden nämlich SEO-fähig. Sie erscheinen in den Suchergebnissen von Suchmaschinen wie Google und sind damit besser auffindbar.

Auch in Sachen Verbreitung und Marketing haben PWAs Apps einiges voraus, denn anders als diese, können PWAs einfach über ihre URL geteilt werden und garantieren so eine höhere Reichweite.

Neben den Vorteilen für User, benötigen PWAs gleichzeitig einen geringeren Entwicklungsaufwand. Genau wie eine Web-App ist für die Veröffentlichung einer PWA kein Entwicklerkonto nötig. Bei nativen Apps benötigen Entwickler gleich zwei Entwicklerkonten: eines für den Play-Store und eines für den AppleStore. Dabei laufen PWAs auch gleich auf allen Betriebssystemen.

Gleichzeitig bilden sie die Inhalte durch ihr responsives Design auf jeglicher Bildschirmgröße gut ab. Das hält nicht nur die Entwicklungszeit, sondern auch die Kosten gering. Weiterhin besitzen PWAs im Gegensatz zu nativen Apps die Fähigkeit im Vollbildmodus zu starten. Zu guter letzt sind Progressive Web Apps sicherer als native Apps. Denn die Datenübertragung wird bei PWAs per SSL (Secure Sockets Layer) verschlüsselt.

Interessieren Sie sich dafür Ihre Websites zukunftsorientiert umzugestalten? Möchten Sie Ihr Produkt mit dem Look and Feel einer nativen App präsentieren und Ihren Kunden nur die Beste Experience bieten? Möchten Sie die Inhalte Ihrer Application im Web besser auffindbar machen?

Dann sind wir Ihr Ansprechpartner rund um Entwicklung, Design, SEO und Marketing Ihres Produkts! Schreiben Sie uns, und vereinbaren Sie gerne ein unverbindliches Erstgespräch.

Kontakt aufnehmen.

Kontaktanfragen über das Formular,

oder per Mail an

mail@storyandstory.de

+49 221 957 999 25

Unsere Adresse.

S&S Digital UG
Eupener Straße 165
50933 Köln