Progressive Web Apps - Dein Guide

Wir lieben sie. Seit über 10 Jahren entwickeln wir sie. Und auch unser Unternehmensname hat schon lange eine: Wir reden von Apps. Kein Wunder also, dass wir eigentlich alle Arten von Apps schon einmal kennengelernt haben. Denn es gibt sie für viele unterschiedliche Hardware, Zwecke und Inhalte – die Möglichkeiten sind quasi unendlich. Eine tragende Rolle spielt dabei immer die Technologie dahinter: Nur sie ermöglicht es nämlich, Apps zu bauen, die reibungslos funktionieren und beeindruckende Benutzererfahrungen bieten. 

Das Beste: Es gibt für jedes App-Projekt die richtige Technologie. Doch manchmal fällt es schwer zu verstehen, welche davon für Dein Projekt am meisten Sinn macht. In dieser Reihe werden wir deshalb alle Stärken und Schwächen jeder Technologie beleuchten und Dir dabei helfen, die beste Wahl für Dein nächstes App-Projekt zu treffen. 

Bisher haben wir Dir in unserer Reihe die Native App Entwicklung, Cross-Plattform Entwicklung und LowCode Apps nahe gebracht. Heute dreht sich alles um Progressive Web Apps.

Progressive Web Apps, meist bekannt unter der Abkürzung PWA, sind im Grunde Websites, die aber eine App-ähnliche Erfahrung bieten. Sie verwenden webbasierte Technologien und können deswegen direkt über den Webbrowser aufgerufen werden. Sie bietet sogar Offline-Funktionalität, Push-Benachrichtigungen und eine ansprechende Benutzeroberfläche. Sie sind ziemlich praktisch, da sie die Vorteile von Websites und Apps kombinieren und somit eine benutzerfreundliche und effiziente Lösung bieten.

Um als PWA vom Browser betrachtet zu werden, muss die Anwendung bestimmte Anforderungen erfüllen. Dazu gehören die Unterstützung von Responsive Design, die Bereitstellung über HTTPS, das Vorhandensein eines Web-App-Manifests und die Verwendung eines Service Workers.

Allerdings muss Dir bei der Wahl dieser Technologie bewusst sein, dass PWAs auch Begrenzungen im Gegensatz zu Native Apps haben. Sie haben zum Beispiel einen begrenzten Zugriff auf die Hardware, eingeschränkte Benachrichtigungsfunktionen und werden nicht über den App-Store verbreitet.

Sie sind eine gute Option für Unternehmen, die eine plattformübergreifende Lösung suchen, ohne die Komplexität der Entwicklung und Wartung von nativen Apps für verschiedene Betriebssysteme. Als Beispiele gibt es Pinterest oder Uber, die eine PWA anbieten, sodass Nutzer*innen Zugriff auf die Plattformen haben, ohne die Native App herunterladen zu müssen. Das ist nützlich, wenn die App zum Beispiel nicht regelmäßig verwendet wird. 

🏄‍♂️ Plattformunabhängig

Nach der Installation und dem Start läuft eine PWA intern immer noch über den Browser und ist daher plattformunabhängig. Sie präsentiert sich optisch und funktional, aber wie eine native App. Dies bedeutet, dass sie ein normales App-Symbol hat, sich wie eine native App öffnet (anstatt in einem Browser-Tab), keine Browser-Steuerelemente wie die Adressleiste anzeigt ("Standalone-Modus"), einen Splash-Screen während des Ladens hat und sogar offline betrieben werden kann. Sie kann sogar auf Desktop-Computern installiert werden, was die Reichweite der Anwendung erhöht.

⏲️ Hintergrundaktualisierungen

Da es sich um eine Webseite handelt, kann sie sich automatisch im Hintergrund aktualisieren, ohne dass Deine Nutzer:innen etwas tun müssen. Dies stellt sicher, dass immer die neueste Version der App genutzt wird.

🛜 Offline-Funktionalität

PWAs können auch ohne Internetverbindung genutzt werden, da sie Daten lokal speichern können.

🛒 Kein App-Store-Zwang

Da PWAs keine herkömmlichen Apps sind, werden sie nicht über einen App-Store veröffentlicht oder aktualisiert. Das ermöglicht schnelle Updates und die Implementierung neuer Funktionen ohne die Einschränkungen der App-Store-Richtlinien. Sie können einfach über normale Web-Links geteilt werden, was die Verbreitung erleichtert. Allerdings werden die meisten Apps von Nutzer:innen über App Stores entdeckt. Das bedeutet, dass PWAs alternative Methoden zur Auffindbarkeit und Installation benötigen. Es liegt also in Deiner Verantwortung, andere Wege zur Steigerung der Sichtbarkeit Deiner PWA zu finden.

💌 Benachrichtigungen

Push-Benachrichtigungen sind möglich, allerdings teilweise begrenzt im Vergleich zu nativen Apps und können je nach Anwendung variieren.

🔧 Vielfalt an Entwicklungstools und Frameworks

Für die Entwicklung von PWAs können eine Vielzahl von Webentwicklungstools und Frameworks verwendet werden, was Flexibilität und Auswahlmöglichkeiten bietet.

🙅 Begrenzter Hardware-Zugriff

PWAs können nur eingeschränkt auf bestimmte Hardware-Funktionen zugreifen. Das kann die Umsetzung bestimmter Funktionen im Vergleich zu nativen Apps einschränken.

🧮 Komplexität bei schweren Berechnungen

Für rechenintensive Aufgaben oder komplexe Anwendungen können PWAs aufgrund ihrer Webtechnologie möglicherweise nicht so performant sein wie nativ entwickelte Anwendungen.

🚷 Kein Zugriff auf native APIs

Es besteht kein Zugriff auf native APIs für Dinge wie Kontakte, Konten, Berechtigungen, Dateiverwaltung usw. Obwohl es viele Web-APIs gibt, sind diese, wie zum Beispiel für Bluetooth, Kamera, Sensoren, USB, Sharing, usw., derzeit experimentell und werden in der Regel nicht von allen Browsern unterstützt.

🚫 Kein Zugriff auf native UI-Elemente

PWAs haben keinen Zugriff auf native UI-Elemente. Daher müssen Bibliotheken wie Onsen, Material UI oder Material Components Web verwendet werden.

📟 Begrenzte Unterstützung auf älteren Geräten

PWAs werden nicht von allen älteren Browsern oder Betriebssystemen gleichermaßen gut unterstützt, was die Reichweite auf älteren Geräten einschränken kann.

❌ Keine Integration mit bestehenden Apps

Sie lassen sich nicht in bestehende Apps integrieren.

Anforderungsanalyse

Beginne mit einer klaren Definition der Anforderungen für dein Projekt. Lass dich hier gerne schon beraten, um ganz genau herauszufinden, welche Art von Anwendung du erstellen möchtest, welche Funktionen sie haben soll und wer zu deiner Zielgruppe gehört. Dieser Schritt ist super wichtig, um den Umfang des Projekts zu verstehen und festzustellen, ob die Umsetzung als PWA sinnvoll ist.

Insbesondere dann, wenn eine bereits bestehende Webseite als Kernfunktion integriert werden soll und reine Webfunktionalität ausreicht (auch zukünftig), bietet sich die Nutzung einer PWA an. Dies ist eine kosteneffiziente Option, insbesondere wenn bereits eine bestehende Webanwendung vorhanden ist. Der Wartungsaufwand für PWAs ist in der Regel niedrig.

Auswahl der PWA-Technologien

Nun geht es darum, passende Frameworks, Bibliotheken und Tools auszuwählen, die die gewünschten Funktionen und Anforderungen deines PWA-Projekts unterstützen. Da PWAs im Wesentlichen normale Webseiten mit einer Manifestdatei sind, kann man Frameworks wie React, Angular, VueJS und Svelte nutzen. Auch bereits bestehende Webseiten können relativ schnell in PWAs umgewandelt werden, indem man ein Manifest integriert, das beispielsweise App-Icons enthält, wie beispielsweise in diesem Beispiel. Um jedoch Offlinefähigkeit zu gewährleisten, ist ein weiterer wichtiger Schritt erforderlich, nämlich die Integration eines Service Workers. Die Auswahl der richtigen Technologien in Bezug auf die Anforderungen deines Projektes sind wichtige Schritte auf dem Weg zur Entwicklung einer leistungsfähigen Progressive Web App.

Design und Prototyp

Nutze die visuellen Entwicklungstools, um das Benutzererlebnis (UX) und das Design deiner PWA zu gestalten. Beachte dabei, dass PWAs auf verschiedenen Betriebssystemen laufen können, daher ist eine responsive Gestaltung wichtig. Mit einem Prototypen kannst Du das geplante Erscheinungsbild und die Funktionalität überprüfen, bevor Du mit der eigentlichen Entwicklung beginnst.

Entwicklung & Testings

Nun geht es mit der Entwicklung los! Wenn Du alles gut geplant hast, kannst Du Deine App mit den vorher ausgewählten Frameworks entwickeln. In der Entwicklung deines PWA-Projekts kannst Du Progressive Enhancement integrieren, um sicherzustellen, dass die PWA auf verschiedenen Geräten und Browsern optimal funktioniert. Schaut gut aus? Dann musst Du deine Anwendung nochmal ausgiebig testen, um sicherzustellen, dass sie den definierten Anforderungen entspricht und deine Nutzer:innen auch ein tolles Erlebnis haben.

Deployment und Verbreitung

Veröffentliche deine PWA auf deiner gewählten Domain. PWAs werden ja nicht über App-Stores verbreitet, sondern können über Links und Suchmaschinen gefunden werden. Deswegen ist es hier besonders wichtig, für eine effektive Verbreitung zu sorgen, unter anderem indem Du die Sichtbarkeit durch Verlinkung und SEO-Optimierung verbesserst.

Wartung und Aktualisierung

Wie bei allen digitalen Anwendungen gilt es auch hier, die PWA auf dem neuesten Stand zu halten. Auch hier gehören Wartungsarbeiten, Aktualisierungen und Erweiterungen mit neuen Funktionen dazu.

Wir programmieren kaum PWAs, da unsere Kund:innen meist komplexe Apps benötigen, die entweder als Native oder Crossplattform-App programmiert werden. PWAs lohnen sich, wenn Du über ein kleines Budget verfügst, deine Anwendung nicht auf die Hardwarefunktionen zugreifen muss und wenn Du bereits eine vorhandene Webseite bzw. Web App hast, die Du offlinefähig machen kannst. 

Letztendlich hängt die Wahl zwischen einer PWA und einer nativen App von den spezifischen Anforderungen deines Projekts und den Bedürfnissen deiner Zielgruppe ab. Es kann auch sinnvoll sein, beide Ansätze je nach den Umständen zu kombinieren. Bei dieser Entscheidung können wir dich gerne beraten.

App-Technologien sind ständig im Wandel, und manchmal kommen Veränderungen, die uns alle betreffen. So auch jetzt: Apple hat offiziell bestätigt, dass Progressive Web Apps (PWAs) mit dem Update auf iOS 17.4 in der EU nicht mehr verfügbar sein werden. Dies geschieht im Rahmen der Anpassungen des Unternehmens an den Digital Markets Act (DMA), der darauf abzielt, den Wettbewerb im App-Ökosystem zu fördern. 

Apple begründete die Entscheidung mit Sicherheitsbedenken. Durch die Zulassung alternativer Web-Engines von Drittanbietern sieht das Unternehmen keine Möglichkeit mehr, die Sicherheit und den Datenschutz von PWAs zu gewährleisten. 

Für Entwickler:innen und Nutzer:innen, die PWAs aktuell noch verwenden, bedeutet dies eine Umstellung auf alternative Lösungen. Das kann beispielsweise die Entwicklung nativer Apps oder die Nutzung von Web-Apps im Browser ohne die Möglichkeit, sie auf dem Homescreen zu installieren, umfassen. 

Das Ende von PWAs in der EU markiert einen Rückschlag für die Open-Web-Bewegung. Nun wird sich zeigen, wie sich diese Entscheidung auf die Entwicklung des App-Ökosystems und die Wahlmöglichkeiten der Nutzer:innen in der EU auswirken wird.

Als Reaktion hat die Europäische Kommission hat Webentwickler:innen damit beauftragt die Auswirkungen von Apples Web-App-Beschränkungen zu prüfen, um herauszufinden, ob Apples PWA Beschränkung gerechtfertigt ist. Es bleibt also spannend rund um das Thema PWAs.

Apple hat ein Update für Home Screen Web Apps, aka PWAs, veröffentlicht. Aufgrund zahlreicher Anfragen werden diese doch weiterhin in der EU verfügbar sein. Durch ihren Aufbau über WebKit bedeutet dies, dass ihr Sicherheits- und Datenschutzmodell sich mit dem für native iOS-Apps deckt.

Dir hat der Artikel gefallen?

Dann schau doch gerne mal bei den anderen Artikeln aus dieser Reihe vorbei, die dir die Native App Entwicklung, Cross-Plattform Entwicklung, LowCode Apps und Hybrid Apps näher bringen.

Du bist ein Unternehmen und möchtest mit uns zusammenarbeiten? Melde Dich gerne!

Du bist ein:e krasse:r Digital-Expert:in und möchtest ein Homie werden? Hier entlang!