Progressive-Web-Apps

Entdecken Sie die Vorteile von PWAs - der modernen und kostengünstigen Alternative zu traditionellen Apps. Mit unserer langjährigen Erfahrung in der PWA-Entwicklung beraten wir Sie gern.

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 – auch auf dem PC.

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.

3 Gründe, warum Sie mit uns arbeiten sollten

01

100% erfolgreiche Projekte

Bisher haben wir jedes Kundenprojekt erfolgreich abgeschlossen. Unsere Kunden sind zufrieden und empfehlen uns weiter.

02

Kleines Team

Keine wechselnden Ansprechpartner, keine ständiger Entwicklerwechsel. Wir sind ein kleines Team und arbeiten langfristig mit unseren Kunden zusammen.

03

Qualität von Herzen

Die Qualität unserer Apps liegt uns am Herzen. Wir entwickeln mit Leidenschaft und geben uns nicht mit halbgaren Lösungen zufrieden.

Sie haben eine Idee?

Starten Sie ein Projekt mit uns

Jetzt Kontakt aufnehmen und einen einen kostenlosen Beratungstermin vereinbaren

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
Erfolgreiche Kundenprojekte

PWA-Beispielprojekte aus unseren Referenzen

lialo ist Stadtführung, Schnitzeljagd & Stadtrallye

  • Kategorie: Progressive Web App
  • Kunde: AS Apps GmbH
  • Beschreibung: Schöneberg durch die Augen und Ohren von David Bowie? Oder sportlich durch den Olympiapark? lialo.com ist eine Web-App für digitale Stadtrallyes und Stadtführungen. Viele Touren sind kostenlos im Browser spielbar. Professionelle Stadtführer können Ihre Touren aber auch zum Kauf anbieten.
  • Unsere Leistung: Design, Front- & Backend-Entwicklung, Online-Zahlungsabwicklung
  • Technologien: PWA React Redux Typescript Braintree Kotlin Spring
  • Website: Stadtführung, Schnitzeljagd & Stadtrallye - lialo

Interne App zur Mitarbeiter-Entwicklung

  • Kategorie: Progressive Web App
  • Kunde: REWE- Markt Andreas Lück oHG
  • Beschreibung: Mitarbeitergespräche sind ein wichtiges Instrument zur Personalentwicklung. Mit der PWA können die Mitarbeiter:innen ihre Entwicklung monatlich mit Hilfe eines interaktiven Fragebogens selbst reflektieren und die Ergebnisse mit ihren Führungskräften besprechen.
  • Unsere Leistung: Entwicklung der Progressive-Web-App, Design & Illustration
  • Technologien: React.js PWA Survey.js Typescript Nest.js Firebase

Protokoll-App für die Bausicherheit

  • Kategorie: Progressive Web App
  • Kunde: ibag – Ingenieurbüro für Arbeitssicherheit und Gesundheitsschutz
  • Beschreibung: ibag inspiziert Baustellen und dokumentiert die Arbeitssicherheit. Die PWA ermöglicht die Erfassung von Mängeln und Gefahren direkt vor Ort mit einem Tablet – auch offline. Die Mitarbeitenden im Backoffice können die Protokolle anschließend finalisieren und verschicken. Der bisher mit Word durchgeführte Prozess wird damit digitalisiert und vereinfacht.
  • Unsere Leistung: Beratung, Entwicklung der PWA & der Datenbank, Integration in die Unternehmens-IT
  • Technologien: React.js Typescript PWA ServiceWorker Zustand Nest.js Firebase

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.

Sie haben eine Idee?

Starten Sie ein Projekt mit uns

Jetzt Kontakt aufnehmen und einen einen kostenlosen Beratungstermin vereinbaren