Progressive-Web-Apps

Wir sind eine Berliner App-Agentur für die Entwicklung von Progressive-Web-Apps (PWA).

Individuell beraten lassen

Mit Progressive Web Apps schon heute von Zukunfts­technologien profitieren.

Progressive Web Apps (PWAs) lassen die Grenze zwischen klassischen Apps und mobiler Website verschwimmen. Genau wie Websites werden sie einfach im Browser aufgerufen, doch offenbaren dann schrittweise immer mehr Funktionen, die Nutzer eigentlich nur aus ‚echten‘ Apps kennen.

Mehr Nutzer erreichen

PWAs sind über eine normale URL und über Such­maschinen im Internet erreichbar. Kein Down­load, keine Instal­lation. Die Nutz­ungs­hür­de ist damit sehr klein.

Überall verfügbar

iOS oder Android? Diese Frage stellt sich nicht mehr. PWAs laufen mit kleineren Ein­schränk­ungen in jedem Browser auf jedem Betriebs­system.

Geringere Kosten

Weniger Entwicklungs­aufwand und keine App-Store-Gebühren: Die Inves­titions- und Wartungs­kosten sind geringer als bei einer Cross-Plattform-App.

PWA-Features

Moderne Technologien ermöglichen Funktionen, die bisher nativen Apps vorbehalten waren.

Responsive

PWAs passen sich an jedes Gerät an: Desk­top, Smart­phone, Tab­let und alles was zu­künf­tig noch kommt.

Add-to-Homescreen

PWAs können zum Home-Screen hinzu­gefügt werden – ganz ohne einen App-Store bemühen zu müssen.

Offline-Fähigkeit

Einmal auf­ge­rufen kann die PWA auch ohne Internet­ver­bindung genutzt werden, sofern der Use-Case es zu­lässt.

Native Features

Kamera, GPS, Push-Noti­fications: Immer mehr App-Funktionen werden auch von PWAs unter­stützt.

Vorteile gegenüber nativen Apps

Werden PWAs native Apps überflüssig machen? Ganz ablösen werden PWAs ihre nativen Pendants wohl nicht. In vielen Anwendungsfällen können sie aber punkten!

User Experience

  • Keine Installation
  • Geringe Ladezeiten
  • Läuft in jedem Browser

Marketing

  • Einfache Verbreitung über Links
  • Bei Google auffindbar
  • Unabhängig vom App-Store

Entwicklung

  • Eine App für alle Plattformen
  • Großes Software-Ökosystem
  • Schnelle Software-Updates

Kosten

  • Geringere Entwicklungskosten
  • Keine App-Store-Gebühren
  • Geringerer Wartungsaufwand

Jetzt loslegen

Kontaktieren Sie uns für eine
kostenlose Erstberatung

Portrait vom Geschäftsführer Kevin Röhl
Ihr persönlicher Ansprechpartner

Häufige Fragen zu Progressive-Web-Apps

Was ist eine PWA?

PWA steht für Progressive-Web-App. Web-Apps sind Software-Anwendungen, die über das Internet erreichbar sind und im Browser ausgeführt werden. Üblicherweise beschränkt sich der Funktionsumfang von Web-Apps auf das Anzeigen, Erfassen und Editieren von Daten. Progressive-Web-Apps erweitern diesen eingeschränkten Umfang: Beispielsweise können PWAs auf die Gerätehardware zugreifen oder Code im Hintergrund ausführen.

Wie sieht der User-Flow mit einer PWA aus?

  1. Auffinden: PWAs werden nicht im App-Store angezeigt. Sie können Ihre App direkt verlinken (z.B. in einem Newsletter), in der Google-Suche platzieren oder über einen QR-Code verbreiten.
  2. Erste Verwendung: Während eine durchschnittliche Android-App 15MB groß ist und eine iOS-App im Schnitt sogar 38MB beansprucht, beläuft sich die Größe von PWAs meist nur auf einige Kilobyte. Daher können sie auch problemlos unterwegs über das mobile Datennetz geladen werden. Einmal aufgerufen verbleibt die App im Speicher, sodass der Download bei weiteren Aufrufen sogar ganz wegfällt und die App auch offline genutzt werden kann.
  3. Installation: Falls dem Nutzer die App gefällt und er sie zukünftig wieder verwenden will, kann er sie mit einem Fingertippen zum Homescreen hinzufügen. Manche Browser schlagen die Installation automatisch vor, bei anderen muss der Nutzer selbst aktiv werden.
  4. Regelmäßige Nutzung: Nach der erfolgreichen Installation ist die App über ein normales App-Icon auf dem Homescreen verknüpft. Wird sie darüber aufgerufen, öffnet sich nicht mehr der Browser, sondern ein eigenständiges App-Fenster. Dieses Fenster beinhaltet weder eine URL-Leiste, noch andere Menü-Elemente des Browsers, sodass die PWA kaum mehr von 'normalen' Apps zu unterscheiden ist.
  5. Deinstallation: Wie native Apps auch, lassen sich PWAs auch über das App-Icon wieder vom Smartphone entfernen.

Für welche Use-Cases eignen sich PWAs?

Der größte Vorteil von PWAs ist die geringe Nutzungshürde. Nur wenige Nutzer downloaden sich eine App um beispielsweise einen Tisch in einem Restaurant zu reservieren. Da eine PWA nicht installiert werden muss, sondern sofort Einsatzbereit ist, eignet sie sich besonders, wenn Schnelligkeit, Erreichbarkeit und Leichtgewichtigkeit wichtiger sind, als Funktionsreichtum.

Warum ist es ein Vorteil, dass PWAs nicht über den App-Store vertrieben werden?

Der App-Store ist sowohl für App-Entwickler als auch für Nutzer mit Aufwand verbunden. Nutzer müssen den App-Store öffnen, die gewünschte App finden, den Download, die Installation und den ersten App-Start abwarten. Nicht jeder Nutzer nimmt diese Arbeit auf sich, um eine neue App auszuprobieren.

App-Entwickler sparen mit dem Verzicht auf den App-Store Kosten: Um überhaupt eine App in den App-Store stellen zu können, fallen bei Apple 99€ und bei Google 20€ pro Jahr an. Darüber hinaus verlangen die beiden Unternehmen bis zu 30% der in der App erzielten Umsätze. Diese Gebühren fallen bei einer PWA nicht an.

Welche Einschränkungen haben PWAs?

PWAs sind eine noch junge Technologie. Nicht alle Browser unterstützen alle Funktionen in gleichem Maße. Während Chrome für Android eine weitestgehend vollständige Unterstüzung des PWA-Standards bietet, hinkt Apple mit Safari für iOS noch deutlich hinterher. Auf iOS sind aktuell folgende Funktionen nicht unterstützt:

  • Push-Notifications, wenn die App geschlossen ist
  • Kein Installation-Banner (manuelles Add-to-Homescreen ist aber möglich)
  • Probleme bei der Hintergrundsynchronisierung
  • Kein Support für andere Browser als Safari
In der Vergangenheit hat sich hier aber bereits einiges getan, sodass davon auszugehen ist, dass der Support auf iOS zukünftig noch besser wird.

Welche technischen Konzepte stecken hinter PWAs?

Service Worker

Der Service Worker ist ein Proxy zwischen Web-Browser und Server. Er wird in JavaScript programmiert, wobei der Code unabhängig vom Hauptthread läuft. Sein Haupteinsatzgebiet ist die Implementierung der Offline-Verfügbarkeit und der Empfang von Push-Notifications.

Web App Manifest

Das Web App Manifest ist eine JSON-Datei, die Informationen über die App beinhaltet, z.B. Name, Icon und diverse Meta- und Konfigurationsdaten. Die Daten werden insbesondere – aber nicht ausschließlich – für die Add-to-Homescreen-Funktion benötigt.

Was bedeutet 'Progressive'?

Der Begriff leitet sich vom Konzept des Progressive Enhancement ab. Dabei handelt es sich um eine Methode im Webdesign, eine Seite so zu entwickeln, dass sie für ältere Browser und Nutzer mit geringe Bandbreite zugänglich ist. In moderneren Browsern und bei besserer Internetverbindung werden dann erweiterte Funktionen freigeschaltet.

Progressive-Web-Apps funktionieren nach dem selben Prinzip. Die App sollte in ihren Grundfunktionen für alle nutzbar sein. Nutzer mit modernen Browserns (z.B. Chrome für Android) kommen darüber hinaus in den den Genuss der PWA-Features wie Offline-Verfügbarkeit, Push-Notifications und Add-to-Homescreen.

Mit welchen Frameworks lassen sich PWAs programmieren?

PWAs basieren auf offenen Web-Standards, d.h. es sind keine besonderen Frameworks für die Entwicklung notwendig. Wer möchte, kann eine PWA ausschließlich mit HTML, CSS und (Vanilla-)Javascript programmieren. Es empfiehlt sich jedoch ein Frontend-Framework wie Angular, Vue oder React einzubeziehen.