Eine Progressive Web App, kurz PWA, ist eine Web-Anwendung, die sich wie eine App verhält. Sie wird über eine normale Adresse im Browser aufgerufen, lässt sich mit wenigen Fingertipps auf dem Startbildschirm ablegen und öffnet sich dann im eigenen Fenster ohne Adressleiste. Wer eine Progressive Web App entwickeln lässt, erreicht mit einer Codebasis Smartphone, Tablet und Desktop.
Updates spielen wir auf dem Server ein; niemand muss eine neue Version aus dem Store laden. Das macht PWAs interessant für Anwendungen, die sich häufig ändern, für interne Werkzeuge und für Angebote, bei denen eine App-Installation eine zu hohe Hürde wäre.
Technisch stützt sich eine PWA auf drei Bausteine. Das Web App Manifest beschreibt Name, Symbol und Farben, damit sich die Anwendung installieren lässt. Ein Service Worker arbeitet im Hintergrund, speichert Dateien und Daten zwischen und ermöglicht so die Nutzung ohne Netz sowie Push-Benachrichtigungen. HTTPS schließlich ist Voraussetzung für all das, denn Service Worker funktionieren nur über verschlüsselte Verbindungen.
Darunter liegt vertraute Webtechnik: HTML, CSS und JavaScript, je nach Projekt mit einem Framework wie React oder Vue.js. Die Daten liefert ein Backend über eine Schnittstelle, das wir in der Regel mit Laravel umsetzen.
Viele Funktionen, die man mit Apps verbindet, sind auch im Browser möglich: Kamera und Standort, der Teilen-Dialog des Systems, Formulare ohne Netz, Push-Benachrichtigungen. Auf Android-Geräten lassen sich PWAs besonders einfach installieren. Auf iPhone und iPad fügen Nutzerinnen und Nutzer die Web-App über das Teilen-Menü zum Home-Bildschirm hinzu; Push-Benachrichtigungen erhalten sie dort erst, wenn die Web-App so installiert ist.
Grenzen gibt es bei tiefen Gerätefunktionen. Schnittstellen wie Web Bluetooth oder Web NFC stehen nicht in allen Browsern zur Verfügung, Hintergrundaufgaben sind eingeschränkt, und auf manche Systemfunktionen hat nur eine native App Zugriff. Braucht Ihr Projekt genau das, ist eine native oder plattformübergreifende App die bessere Wahl.
Eine PWA spart die Einreichung in den Stores, die Prüfung durch Apple und Google und die Entwicklung für zwei Plattformen. Dafür fehlt die Sichtbarkeit in den Stores, und nicht alle Nutzerinnen und Nutzer kennen den Weg zum Startbildschirm. Bei Google Play lässt sich eine PWA als sogenannte Trusted Web Activity verpacken und veröffentlichen. Apple erwartet laut seinen Prüfrichtlinien dagegen mehr als eine verpackte Website; für den App Store ist meist eine echte App nötig.
Wie direkt der Weg über den Browser sein kann, zeigt edolences, unser eigenes Produkt: Der Scan eines QR-Engels öffnet die zugeordnete Gedenkseite, und die Oberfläche ist so gestaltet, dass sie auf Desktop wie Smartphone einheitlich bedienbar ist.
Anders als eine Store-App ist eine PWA zugleich eine Website. Ihre Inhalte können von Suchmaschinen erfasst und über normale Links geteilt werden – ein Vorteil, wenn Ihre Anwendung auch neue Kundinnen und Kunden gewinnen soll. Damit das gelingt, achten wir auf sauberes HTML, sprechende Adressen und kurze Ladezeiten, besonders bei mobilen Verbindungen. Mehr dazu unter technisches SEO.
Der Service Worker hilft beim Tempo: Einmal geladene Dateien kommen beim nächsten Aufruf aus dem Zwischenspeicher. Wichtig ist eine durchdachte Strategie, damit nach einem Update niemand mit veralteten Inhalten arbeitet.
Erzählen Sie uns, wofür Ihre Anwendung unterwegs genutzt werden soll. Wir melden uns persönlich und sagen Ihnen offen, ob eine PWA oder eine App aus dem Store besser passt.
Unser Studio liegt in Königstein im Taunus. Wir kommen zu Ihnen oder sprechen per Video-Call – hier finden Sie unsere Seiten für Ihren Ort:
Ja. Nutzerinnen und Nutzer fügen die Web-App über das Teilen-Menü zum Home-Bildschirm hinzu. Danach startet sie wie eine App im eigenen Fenster. Push-Benachrichtigungen sind auf iPhone und iPad nur für so installierte Web-Apps möglich.
Teilweise. Der Service Worker kann Seiten, Dateien und Daten zwischenspeichern, sodass die Anwendung auch ohne Verbindung startet und zuvor geladene Inhalte zeigt. Eingaben lassen sich lokal sichern und übertragen, sobald wieder eine Verbindung besteht. Welche Teile offline verfügbar sein sollen, legen wir gemeinsam fest.
Oft ja. Mit Manifest, Service Worker und HTTPS lässt sich eine bestehende Website schrittweise zur installierbaren Web-App erweitern. Wie sinnvoll das ist, hängt davon ab, wie oft Ihre Besucherinnen und Besucher wiederkommen und welche Funktionen sie unterwegs brauchen.