Zehn erstaunliche Beispiele für Progressive Web Apps (PWA)
In diesem Artikel werden zehn verschiedene Arten von Progressive Web Applications (PWA)-Fällen vorgestellt, die Web-Technologie geschickt nutzen, um ein Benutzererlebnis zu bieten, das mit nativen Anwendungen vergleichbar ist.
Redmenta ist eine KI-basierte Plattform, die Lehrern und Schülern hilft, personalisierte Lernpfade aus bestehenden Kursen zu erstellen. Die Software generiert Lernaktivitäten für Schüler und ermöglicht es Lehrern, den Fortschritt der Schüler zu verfolgen. Als Progressive Web App (PWA) kann Redmenta direkt über den Browser auf jedem Gerät installiert werden, ohne dass eine App Store-App heruntergeladen werden muss.
Redmenta ist das perfekte Beispiel für eine moderne App: erstellt mit React, angetrieben durch KI, wunderschön gestaltet, mobil reaktionsfähig und über das offene Web verteilt.
Fodmapedia wurde speziell für Menschen mit Reizdarmsyndrom entwickelt, um ihnen bei der Bewältigung der Symptome durch eine Low-FODMAP-Diät zu helfen. Dieses No-Code-Beispiel einer mit Bubble entwickelten PWA hilft Benutzern dabei, herauszufinden, welche Lebensmittel ihren Ernährungsbedürfnissen entsprechen. Da es sich um ein Tool für den täglichen Gebrauch handelt, kann die Website als Anwendung direkt von der Startseite aus installiert werden.
Klicken Sie auf „Installieren“ und Sie werden Schritt für Schritt durch das Hinzufügen der PWA zu Ihrem Startbildschirm geführt. Die Anleitung passt sich intelligent an Ihr spezifisches Gerät an. Dank moderner Webtechnologie können PWAs mittlerweile von nahezu überall installiert werden.
Für Benutzer, die die erste Eingabeaufforderung möglicherweise verpasst haben, stellt Fodmapedia in der Kopfzeile einen praktischen Installationslink zur Verfügung. Über diesen Link gelangen Sie zu einer speziellen Installationsseite mit App-Screenshots, Details und sogar Rezensionen.
Fodmapedia ist ein großartiges Beispiel für eine PWA, die zeigt, wie Sie ein klares, greifbares Problem für Ihre Benutzer lösen und es außerhalb des App Stores verbreiten können, ohne dass Code erforderlich ist.
Bingo em Casa ist eine brasilianische Sportwetten- und Casino-App, die sich für die Verwendung einer PWA anstelle einer nativen App entschieden hat – eine klare Entscheidung, wenn man bedenkt, dass ihre App bei Google Play und im App Store in eine verbotene Kategorie fällt.
Tatsächlich sind PWAs die ideale Lösung für Anwendungen in sensiblen Branchen wie Glücksspiel, Inhalte für Erwachsene, Kryptowährung, Cannabis und Gesundheit. Mit einer PWA haben Sie die volle Kontrolle über die Verteilung und stellen gleichzeitig sicher, dass sich Ihre App bequem auf den Startbildschirmen der Benutzer befindet, ohne dass diese eine verdächtige ausführbare Datei herunterladen müssen.
Bingo em Casa ermutigt Benutzer, seine PWA direkt von der Anmeldeseite aus zu installieren. Die Installation erfolgt sofort und Sie werden aufgefordert, Push-Benachrichtigungen zu aktivieren, sobald die App von Ihrem Startbildschirm aus gestartet wird. Dieser Ablauf funktioniert besonders gut – unter iOS (ab Version 16.4) sind Push-Benachrichtigungen nur in installierten PWAs verfügbar.
Im Gegensatz zu aufdringlichen Websites, die sofort nach dem Start Benachrichtigungen anzeigen, wartet Bingo em Casa intelligent, bis Sie eine sinnvolle Interaktion mit der App zeigen, bevor es Sie höflich dazu einlädt, sich für Benachrichtigungen zu entscheiden. Gut gemacht!
Nekodex ist eine Kryptowährungs-Wallet-Anwendung. Wie das vorherige PWA-Beispiel nutzt es Webformate, um App-Store-Einschränkungen zu umgehen und gleichzeitig ein nahtloses Benutzererlebnis zu bieten.
Mit ihren schönen Animationen und der ausgefeilten Benutzeroberfläche ist diese Web-App nach der Installation kaum noch von ihrem nativen Gegenstück zu unterscheiden. Einige Entwickler sind der Meinung, dass PWAs optisch nicht so ansprechend oder funktional sind wie native Apps. Nekodex beweist das Gegenteil und zeigt, dass PWAs sehr stilvoll aussehen und sich auch so anfühlen können.
Die geräteübergreifende Installationsmethode ist ebenfalls clever. Klicken Sie oben rechts auf der Website auf „App starten“, um einen Code anzuzeigen. Scannen Sie den Code mit Ihrem Telefon und Sie werden zur Installation der App weitergeleitet. So schlau!
Run247 ist eine globale Community für Trail- und Ultra-Running-Enthusiasten, die Neuigkeiten, Veranstaltungen und Expertenratschläge bereitstellt. Wie ihre Schwester-App Tri247 hat sie sich auch für die Verbreitung im PWA-Format entschieden.
Im Gegensatz zu den zuvor erwähnten PWAs, die hauptsächlich auf mobile Geräte ausgerichtet sind, funktioniert Run247 bei Desktop- und mobilen Benutzern gleichermaßen gut. Eine besonders nette Geste ist die Schaltfläche „App hinzufügen“ in der oberen linken Ecke der Website. Mit nur einem Klick wird die App sofort auf Ihrem Computer oder Telefon installiert und gewährleistet so einen einfachen Zugriff auf allen Geräten.
Die PWA-Installation ist nicht auf mobile Geräte beschränkt – sie funktioniert auch auf macOS (über Safari, Chrome, Brave oder Edge), Windows (mit Chrome, Brave oder Edge) und sogar ChromeOS!
Dieses PWA-Beispiel behandelt die Installationslogik sehr gründlich. Folgendes passiert beispielsweise, wenn Sie eine Handvoll Browser verwenden, die nicht mit PWA-Installationen kompatibel sind (eigentlich hauptsächlich Firefox für Desktop).
Fou d’la Bouffe ist ein Lebensmittellieferdienst in Quebec und Ontario, wo täglich Französisch und Englisch gesprochen wird. Um diesem zweisprachigen Publikum gerecht zu werden, ist die App sowohl auf Französisch als auch auf Englisch verfügbar. Sobald die Seite geladen ist, erkennt die App die Sprache des Benutzers und fordert den Benutzer auf, die PWA entsprechend zu installieren:
Für Lebensmittellieferdienste ist es von entscheidender Bedeutung, auf den Startbildschirmen Ihrer Kunden präsent zu sein. Mit erweiterten Funktionen wie Geolokalisierung und Push-Benachrichtigungen zeigt dieses PWA-Beispiel perfekt, was das Web leisten kann.
Music League ist ein plattformübergreifendes Musik-Entdeckungsspiel. Wie bei vielen nativen Apps bietet die Landingpage einen kurzen Überblick über die App sowie Installationsoptionen. Im Gegensatz zu den meisten nativen Apps bietet Music League jedoch außergewöhnliche Flexibilität:
Keine erzwungene Installation – Sie können das Spiel direkt in Ihrem Browser spielen oder es auf Ihrem Telefon installieren, wenn Sie möchten. Dies ist ein großartiges Beispiel für die effektive Nutzung des PWA-Formats. Indem die Entwickler von Music League den Aufwand beim Stöbern in traditionellen App-Stores beseitigten, steigerten sie die Akzeptanz ihrer App.
Sky Freebies ist eine tolle Schnäppchenplattform, die Ihnen hilft, kostenlose Artikel und Muster von verschiedenen Einzelhändlern zu entdecken.
Aber wie Sie sich vorstellen können, sind Gratisgeschenke nicht ewig gültig! Aus diesem Grund müssen Benutzer die Website regelmäßig überprüfen, um die neuesten Angebote zu erhalten. Um dies noch einfacher zu machen, haben sie ein praktisches Installations-Widget hinzugefügt, das immer verfügbar ist, während Sie auf der Website surfen:
Sobald die App installiert und gestartet ist, sehen Sie den Inhalt selbst. Sky Freebies erkennt den Anzeigemodus und passt das Benutzererlebnis entsprechend an. Das gesamte Erlebnis ist eine reibungslose, nahtlose Reise – vom Zugriff auf die Startseite bis zum Starten von Apps direkt vom Startbildschirm aus.
Sky Freebies nutzt auch Push-Benachrichtigungen, um Sie zu benachrichtigen, sobald der App neue Angebote hinzugefügt werden. Selbstverständlich sind diese Meldungen völlig freiwillig.
Interessanterweise ist die App zwar vollständig im Internet verfügbar, kann aber auch bei Google Play oder im Windows Store heruntergeladen werden. Während Apple PWAs einschränkt, sind Google und Microsoft Web-Apps gegenüber aufgeschlossener. Daher bedeutet die Wahl des PWA-Formats nicht, dass Benutzer, die an die Verwendung traditioneller App-Stores gewöhnt sind, im Stich gelassen werden.
PWA ist das ideale Format für lokale Reiseführer und The Bedford Guide ist ein perfektes Beispiel. Es hilft Ihnen, die besten Restaurants, Bars, Sehenswürdigkeiten und andere Hotspots in Bedford, Großbritannien, zu erkunden.
Planen Sie einen Besuch in Bedford? Installieren Sie einfach die Website auf Ihrem Gerät und greifen Sie jederzeit darauf zu.
Der Bedford Guide wurde mit WordPress entwickelt und öffnet sich mit einem schönen Begrüßungsbildschirm, genau wie eine native App!
Bestellen Sie regelmäßig Artikel in einigen Online-Shops? Warum fügen Sie sie nicht zum Startbildschirm Ihres Telefons hinzu, um den Zugriff zu erleichtern? HobbyHop ist ein von Shopify betriebener Bastelladen – und es ist auch eine PWA!
Shopify ist eine der einfachsten Plattformen, um Produkte online zu verkaufen, und dank des Shopify App Store ist die Umwandlung Ihres Shops in eine PWA mit Installationen und Push-Benachrichtigungen nur einen Klick entfernt.
HobbyHop verlinkt in der Fußzeile seiner Homepage auf seine eigene Installationsseite. Dies ist eine unkomplizierte Möglichkeit, Installationen zu fördern, ohne die Benutzererfahrung innerhalb der App zu unterbrechen.
Last but not least muss ich Photopea erwähnen, das meiner Meinung nach eine der besten Softwareprogramme ist, die jemals im Web entwickelt wurden. Kurz gesagt handelt es sich um eine kostenlose Photoshop-Alternative, die vollständig unter Verwendung von Webtechnologien wie HTML, CSS und JavaScript entwickelt wurde.
Wie die anderen Beispiele können Sie dies als PWA auf Ihrem Gerät installieren. Ich habe es im Dock meines Mac und verwende es fast täglich. Es funktioniert so gut, dass ich eigentlich nicht sagen kann, dass es sich nicht um eine native App handelt.
Das wirklich Erstaunliche an Photopea ist jedoch, was es tatsächlich leistet. Designern die Möglichkeit zu geben, solch komplexe Aufgaben direkt im Web zu erledigen, ist ein Geniestreich.
Skeptisch gegenüber dem Potenzial von PWAs? Probieren Sie Photopea aus – es könnte Ihre Meinung ändern.
Das obige ist der detaillierte Inhalt vonPWA-Beispiele aus dem wirklichen Leben, aus denen Sie in 5 lernen können. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Wie Clearfix das Clearing von Floats implementiert
Verwendung der Memset-Funktion
Was tun, wenn die CPU-Temperatur zu hoch ist?
So löschen Sie Float in CSS
Was macht Xiaohongshu?
Warum kann ich die letzte leere Seite in Word nicht löschen?
Was ist Ethereum?
Der Unterschied zwischen Ankern und Zielen
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
