PWA - Vorteile im Vergleich zu nativen Apps | Anleitung zur Installation

Eine PWA, Progressive Web App, vereint die "besten" Eigenschaften von Websites und nativen Apps und stellt sozusagen den Hybrid in der Welt der Webanwendungen dar. Hier finden Sie eine Anleitung, wie man eine PWA installiert und erfahren alles, was Sie über PWAs und die Vorteile gegenüber nativen Apps wissen müssen.

Anleitung: PWA auf dem Smartphone in Apple & Android installieren

Am Beispiel app.bdfl.de

Der BDFL (Bund Deutscher Fußball-Lehrer e.V.) organisiert regelmäßig interaktive Fortbildungsprogramme für größere Gruppen. Eine eigens dafür entwickelte Progressive Web App (PWA) vereinfacht die Anmeldung für Teilnehmer und optimiert den Planungsprozess vor, während und nach der Veranstaltung für Vereinsmitglieder und Organisatoren.

Auf einem iOS-Gerät (iPhone oder iPad)

In Safari

• Öffnen Sie Ihren Browser (Safari) und navigieren Sie zur Webseite (app.bdfl.de)
• Tippen Sie auf das Teilen-Symbol am unteren Bildschirmrand

 

• Scrollen Sie nach unten und wählen Sie "Zum Home-Bildschirm"

• Geben Sie einen Namen für die App ein und tippen Sie auf "Hinzufügen"

PWA Auf einem Android-Gerät installieren

In Firefox

• Öffnen Sie Ihren Browser (Firefox) und navigieren Sie zur Webseite (app.bdfl.de)
• Tippen Sie auf das Menü-Symbol in der unteren rechten Ecke des Bildschirms

• Wählen Sie "Installieren" im Menü

• Tippen Sie auf "Zum Startbildschirm hinzufügen"

• Die PWA wird nun auf Ihrem Startbildschirm (wie eine native App) angezeigt und kann von dort aus geöffnet werden. Falls gewünscht, können Sie einen Namen für die Web App eintragen.

In Chrome

• Öffnen Sie Ihren Browser (Chrome) und navigieren Sie zur Webseite (app.bdfl.de)
• Tippen Sie auf das Menü-Symbol in der oberen rechten Ecke des Bildschirms

• Wählen Sie "App installieren"

• Tippen Sie auf "installieren"

• Die PWA wird nun auf Ihrem Startbildschirm (wie eine native App) angezeigt und kann von dort aus geöffnet werden. Falls gewünscht, können Sie einen Namen für die Web App festlegen.

PWA versus native App

PWAs und native Apps - zwei Ansätze in der Welt der mobilen Anwendungen, beide mit ihren eigenen Vor- und Nachteilen. Was macht sie so unterschiedlich? Wie können sie die Benutzererfahrung beeinflussen? Schauen wir hinter die Kulissen dieser Technologien ...

PWA - Was ist das?

Progressive Web Apps (PWAs) ist eine Website, die aussieht und sich verhält, als wäre sie eine mobile App.
Es handelt sich also um eine Webanwendung, die den Komfort von nativen Apps bietet, ohne dass der Download einer eigenständigen Anwendung/nativen App erforderlich ist.

Sie spielen eine wichtige Rolle bei der mobilen Optimierung, da sie plattformübergreifend sind.

Vorteile einer PWA

PWAs kombinieren Vorteile von Web- und App-Technologien.

• Kein Download erforderlich | Unabhängigkeit von App Stores
  Benutzer können PWAs direkt über den Webbrowser aufrufen, d. h. es ist kein Download im App Store erforderlich, was den Zugang erleichtert.
  Zusätzlich hat man die Möglichkeit, eine PWA zu installieren und auf dem Startbildschirm zu speichern, wie es bei einer nativen App üblich ist. 
  Da PWAs nicht in App Stores veröffentlicht werden müssen, haben Webmaster mehr Kontrolle und Reichweite über die Vermarktung und Promotion ihrer Anwendungen.
  
  
• Kein Speicherplatzbedarf
  Im Gegensatz zu herkömmlichen Apps, können die Funktionen und Inhalte einer PWA direkt über den Webbrowser aufgerufen und genutzt werden. Da PWAs nicht heruntergeladen werden müssen, beanspruchen sie keinen Speicherplatz auf dem Gerät des Benutzers.
  
  
• Aktualisierungen sofort verfügbar
  Änderungen und Updates an einer PWA werden sofort angezeigt, sobald der Benutzer die Anwendung neu lädt, ohne dass ein erneuter Download bzw. eine manuelle Aktualisierung durch den User erforderlich wäre.
  
  
• Plattformunabhängigkeit | Responsive Design
  PWAs sind plattformunabhängig und laufen auf verschiedenen Geräten und Betriebssystemen, ohne dass separate Versionen erstellt werden müssen.
  Sie passen sich verschiedenen Bildschirmgrößen an und bieten ein optimales Erlebnis auf mobilen Geräten, Tablets und Desktops.
  
  
• Geringerer Pflegeaufwand
  Die Wartung einer PWA erfordert weniger Aufwand im Vergleich zur Pflege nativer Apps. Da PWAs plattformübergreifend sind, müssen Entwickler Änderungen und Updates nur einmal vornehmen, um sie auf verschiedenen Geräten und Betriebssystemen zu implementieren.
  Im Gegensatz dazu erfordern native Apps separate Updates für jede unterstützte Plattform, was mehr Zeit und Ressourcen in Anspruch nimmt. Durch die Vereinfachung des Wartungsprozesses können Entwickler effizienter arbeiten und gleichzeitig eine konsistente Benutzererfahrung auf verschiedenen Geräten sicherstellen.
  
  
• Offlinefähigkeit | Nutzung bei schlechter Verbindungsqualität
  PWAs können auch ohne aktive Internetverbindung funktionieren, indem Inhalte zwischengespeichert und später synchronisiert werden, wenn die Verbindung wieder besteht. Da Webinhalte bei nahezu jeder Verbindungsqualität genutzt werden können, wird die Benutzererfahrung verbessert.
  PWAs sind bekannt für schnelle Ladezeiten und reagieren schnell auf Benutzereingaben.
  
  
• Kostengünstige Entwicklung im Vergleich zu nativen Apps
  Die Entwicklung von PWAs ist in der Regel deutlich kostengünstiger im Vergleich zur Entwicklung nativer Apps. Da PWAs mit Webtechnologien, wie HTML, CSS und JavaScript erstellt werden können, entfallen die Kosten für separate Entwicklungsteams und -umgebungen für verschiedene Betriebssysteme.
  Darüber hinaus können PWAs - wie bereits erwähnt - einfacher gewartet und aktualisiert werden, was langfristig zu niedrigeren Betriebskosten führt.
  Diese vergleichsweise günstige Entwicklung macht PWAs zu einer attraktiven Option für Unternehmen, die eine gute mobile Benutzererfahrung anbieten möchten.
  
  
• Indexierung und Ranking der Inhalte
  Die Inhalte von PWAs können von Suchmaschinen - wie bei "herkömmlichen" Websites - indexiert und gerankt werden, was die Sichtbarkeit verbessert.

Aber auch native Apps können inzwischen indexiert werden ...

Nachteile einer PWA 

• Begrenzter Zugriff auf Gerätefunktionen / native APIs
  PWAs können auf verschiedene Gerätefunktionen wie Push-Benachrichtigungen, Geolokalisierung, Kamera und Mikrofon zugreifen. Im Vergleich zu nativen Apps haben sie jedoch nur begrenzten oder keinen Zugriff auf spezifische Gerätefunktionen wie Kontakte, Kalender oder Bluetooth, die der Browser nicht oder nur eingeschränkt bereitstellen kann.
  
  
• User-Wahrnehmung und "Prestige"
  Obwohl eine Webanwendung visuell den Eindruck einer nativen App vermittelt, läuft sie ausschließlich im Browser. Das fällt den Usern spätestens beim Scrollen auf, wenn die Browserelemente und die URL sichtbar werden. Obwohl diese Tatsache die Funktionalität nicht beeinträchtigt, könnte sie den Eindruck einer geringeren Qualität vermitteln, und Besucher könnten die Anwendung lediglich als eine "einfache" Webseite wahrnehmen, unabhängig von ihrer tatsächlichen Komplexität.
  Es ist jedoch absehbar, dass sich dieser Eindruck im Laufe der Zeit verändern wird, insbesondere mit der zunehmenden Etablierung und Verbesserung von PWAs sowie mit der steigenden Unterstützung seitens der Entwickler-Community und der Industrie.
  
  
• Mögliche Usability Einschränkungen
  Die fehlende Möglichkeit eines vollständigen Vollbildmodus, der die Standard-Browserfunktionen unterdrückt, kann unter Umständen zu unvermeidbaren Bedienungsproblemen führen, insbesondere in Bezug auf die Usability.

Vorteile von nativen Apps

Native Apps sind eigenständige Anwendungen, die über Play/App Stores wie iOS, Android und Microsoft auf Tablets oder Smartphones heruntergeladen werden können. Obwohl native Apps ihre Inhalte aus dem Web beziehen, handelt es sich um geschlossene Systeme.

• Direkten Zugriff auf Hardware-Funktionen
  Native Apps können auf die gesamten Hardwareressourcen zugreifen, was eine höhere Leistung und Integration im Vergleich zu PWAs ermöglicht. 
  Bei Anwendungen mit hohem Rechenaufwand, wie Spielen oder bei Einsatz von künstlicher Intelligenz, wird die volle Leistung des Geräts benötigt, um optimal zu funktionieren, was eine PWA nicht in diesem Umfang leisten kann.
  
  
• Optimierte Benutzererfahrung
  Da native Apps speziell für eine Plattform entwickelt werden, bieten sie eine optimierte Benutzererfahrung. Native Apps bieten ein hochwertiges Gesamterlebnis und lenken den Nutzer nicht vom präsentierten Inhalt ab.
  
  
• Vermarktung über den App Store möglich
  Die Vermarktung über den App Store ist eine bewährte Methode für native Apps, die speziell für Plattformen wie iOS (Apple App Store) oder Android (Google Play Store) entwickelt wurden. Diese Plattformen bieten eine breite Reichweite und ermöglichen es Entwicklern, ihre Apps einem großen Publikum zugänglich zu machen. PWAs können nicht direkt im App Store vermarktet werden, da sie im Wesentlichen Webanwendungen sind und im Browser ausgeführt werden. Allerdings können PWAs über andere Kanäle vermarktet werden, wie z.B. über die eigene Website des Unternehmens oder über soziale Medien.

Nachteile von nativen Apps

• Hohe Entwicklungskosten & Einhaltung strenger Richtlinien
  Die Entwicklung einer App für Android und iOS verursacht doppelte Entwicklungskosten, da unterschiedliche Technologien wie Objective-C, Swift, Java oder Kotlin, verwendet werden müssen. Zudem unterliegt die Veröffentlichung im App Store einer Vielzahl von Richtlinien und komplexen Genehmigungsverfahren. Entwickler müssen alle Vorgaben und Vorschriften einhalten, um die App erfolgreich in den App Stores zu vertreiben und die Qualität und Sicherheit der Apps zu gewährleisten.
  Im Vergleich zu einer Webanwendung ist der Zeit- und Kostenaufwand für die Entwicklung einer nativen App erheblich höher.
  
  
• Plattformabhängigkeit
  DIe Plattformabhängigkeit stellt eine herausfordernde Realität bei der Entwicklung von nativen Apps dar. Für jede Plattform müssen separate Anpassungen vorgenommen werden, was zu einem erheblichen Mehraufwand in Bezug auf Zeit, Kosten und Ressourcen führt.
  
  
• Aufwendiger Aktualisierungsprozess
  Aktualisierungen müssen über den App Store heruntergeladen und installiert werden, was zu Verzögerungen bei der Bereitstellung von Updates führen kann.

PWA oder native App? - Fazit & Zusammenfassung

Letztendlich hängt die Wahl zwischen PWA und nativer App von verschiedenen Faktoren ab, wie z. B.:

1. Zielgruppe
   Wenn Sie eine Zielgruppe über eine breite Reichweite und über verschiedene Plattformen hinweg erreichen möchten, könnte eine PWA die richtige Wahl sein.
   Wenn Ihre Zielgruppe auschließlich aus mobilen Nutzern besteht und Sie eine "prestigeträchtige", spezifische Nutzererfahrung anstreben, sind native Apps zu bevorzugen.

2. Funktionalität der App
   Wenn Ihre App auf spezielle Hardwarefunktionen wie Kamera, Bluetooth oder GPS zugreifen muss, ist eine native App die bessere Option. PWAs haben zwar Zugriff auf einige Gerätefunktionen, aber nicht in dem Maße wie native Apps.

3. Budget und Ressourcen
   Die Kosten spielen bei der Entscheidung eine wichtige Rolle. Das hängt davon ab, wie viel Sie für ein Projekt investieren möchten und können. Die Entwicklung einer nativen App ist in der Regel wesentlich teurer und aufwendiger.

4. Benutzererfahrung und Leistung
   Native Apps bieten in der Regel eine "reichhaltigere" Benutzererfahrung, da sie nahtlos in das Betriebssystem und die Gerätefunktionen integriert sind. PWAs können jedoch dank moderner Technologien eine bemerkenswerte Leistung erzielen und eine Nutzererfahrung bieten, die sich kaum von einer nativen App unterscheidet.
   Die Wahl zwischen einer nativen App und einer PWA hängt stark von den spezifischen Anforderungen Ihres Projekts ab. Es ist entscheidend zu prüfen, ob die angestrebten Funktionen auch mit einer PWA umgesetzt werden können.

Haben Sie Fragen/Interesse?

Wir stehen Ihnen mit Rat & Tat zur Verfügung

Quellen:

• https://www.conductor.com/de/academy/glossar/progressive-web-apps/
• https://blog.searchmetrics.com/de/app-indexing-studie/
• https://www.seobility.net/de/wiki/Progressive_Enhancement
• https://codecell.de/blog/webapp-pwa-oder-native-app-vor-und-nachteile