Web-Frontend
js-Tutorial
PWA-Beispiele aus dem wirklichen Leben, aus denen Sie in 5 lernen k?nnen
PWA-Beispiele aus dem wirklichen Leben, aus denen Sie in 5 lernen k?nnen
Jan 16, 2025 pm 01:21 PM
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: Personalisierte Lernpfad-Planungsplattform
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: Low-FODMAP-Di?tassistent
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: Brasilianische Sportwetten- und Casino-App
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: Kryptow?hrungs-Wallet-App
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: Eine Community für Trailrunning- und Ultra-Distanzlauf-Enthusiasten
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: Essenslieferdienst in Quebec und Ontario
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: ein plattformübergreifendes Musik-Entdeckungsspiel
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: Kostenlose Merchandise- und Muster-Entdeckungsplattform
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.
- The Bedford Guide: Bedford Local Guide
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!
- HobbyHop: Online-Shop für Kunsthandwerk
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.
- Photopea: Kostenlose Photoshop-Alternative
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!
Hei?e KI -Werkzeuge
Undress AI Tool
Ausziehbilder kostenlos
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!
Hei?er Artikel
Hei?e Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Wie stelle ich eine HTTP -Anforderung in node.js?
Jul 13, 2025 am 02:18 AM
Es gibt drei g?ngige M?glichkeiten, HTTP-Anforderungen in Node.js zu initiieren: Verwenden Sie integrierte Module, Axios und Knotenfetch. 1. Verwenden Sie das integrierte HTTP/HTTPS-Modul ohne Abh?ngigkeiten, das für grundlegende Szenarien geeignet ist, jedoch eine manuelle Verarbeitung von Datengen?hten und Fehlerüberwachung erfordert, z. 2.Axios ist eine auf Versprechen basierende Bibliothek von Drittanbietern. Es verfügt über eine kurze Syntax und leistungsstarke Funktionen, unterstützt Async/Auseait, automatische JSON -Konvertierung, Interceptor usw. Es wird empfohlen, asynchrone Anforderungsvorg?nge zu vereinfachen. 3.Node-Fetch bietet einen Stil ?hnlich dem Browser-Abruf, basierend auf Versprechen und einfacher Syntax
JavaScript -Datentypen: Primitive VS -Referenz
Jul 13, 2025 am 02:43 AM
JavaScript -Datentypen sind in primitive Typen und Referenztypen unterteilt. Zu den primitiven Typen geh?ren String, Anzahl, Boolesche, Null, undefiniertes und Symbol. Die Werte sind unver?nderlich und Kopien werden bei der Zuweisung von Werten kopiert, sodass sie sich nicht gegenseitig beeinflussen. Referenztypen wie Objekte, Arrays und Funktionen speichern Speicheradressen, und Variablen, die auf dasselbe Objekt zeigen, wirkt sich gegenseitig aus. Typeof und Instanz k?nnen verwendet werden, um die Typen zu bestimmen, aber auf die historischen Probleme der TypeOfnull zu achten. Das Verst?ndnis dieser beiden Arten von Unterschieden kann dazu beitragen, einen stabileren und zuverl?ssigeren Code zu schreiben.
JavaScript Time Object, jemand erstellt eine EACTEXE, schnellere Website auf Google Chrome usw.
Jul 08, 2025 pm 02:27 PM
Hallo, JavaScript -Entwickler! Willkommen in den JavaScript -Nachrichten dieser Woche! Diese Woche konzentrieren wir uns auf: Oracas Markenstreit mit Deno, neue JavaScript -Zeitobjekte werden von Browsern, Google Chrome -Updates und einigen leistungsstarken Entwickler -Tools unterstützt. Fangen wir an! Der Markenstreit von Oracle mit dem Versuch von Deno Oracle, ein "JavaScript" -Marke zu registrieren, hat Kontroversen verursacht. Ryan Dahl, der Sch?pfer von Node.js und Deno, hat eine Petition zur Absage der Marke eingereicht, und er glaubt, dass JavaScript ein offener Standard ist und nicht von Oracle verwendet werden sollte
Was ist die Cache -API und wie wird sie bei Dienstangestellten verwendet?
Jul 08, 2025 am 02:43 AM
Cacheapi ist ein Tool, das der Browser zur Cache -Netzwerkanfragen bereitstellt, das h?ufig in Verbindung mit dem Servicearbeiter verwendet wird, um die Leistung der Website und die Offline -Erfahrung zu verbessern. 1. Es erm?glicht Entwicklern, Ressourcen wie Skripte, Stilbl?tter, Bilder usw. Zu speichern; 2. Es kann die Cache -Antworten entsprechend den Anfragen übereinstimmen. 3. Es unterstützt das L?schen bestimmter Caches oder das L?schen des gesamten Cache. 4.. Es kann Cache -Priorit?ts- oder Netzwerkpriorit?tsstrategien durch Servicearbeiter implementieren, die sich auf Fetch -Ereignisse anh?ren. 5. Es wird h?ufig für die Offline -Unterstützung verwendet, die wiederholte Zugriffsgeschwindigkeit, die Vorspannungs -Schlüsselressourcen und den Inhalt des Hintergrundaktualisierungss beschleunigen. 6. Wenn Sie es verwenden, müssen Sie auf die Cache -Versionskontrolle, Speicherbeschr?nkungen und den Unterschied zum HTTP -Caching -Mechanismus achten.
Handlingversprechen: Verkettung, Fehlerbehandlung und Versprechenkombinatoren in JavaScript
Jul 08, 2025 am 02:40 AM
Versprechen ist der Kernmechanismus für den Umgang mit asynchronen Operationen in JavaScript. Das Verst?ndnis von Kettenanrufen, Fehlerbehebung und Kombination ist der Schlüssel zum Beherrschen ihrer Anwendungen. 1. Der Kettenaufruf gibt ein neues Versprechen durch .then () zurück, um asynchrone Prozessverkampferung zu realisieren. Jeder. Dann () erh?lt das vorherige Ergebnis und kann einen Wert oder ein Versprechen zurückgeben; 2. Die Fehlerbehandlung sollte .Catch () verwenden, um Ausnahmen zu fangen, um stille Ausf?lle zu vermeiden, und den Standardwert im Fang zurückgeben, um den Prozess fortzusetzen. 3. Combinatoren wie Promise.All () (erfolgreich erfolgreich erfolgreich nach allen Erfolg), Versprechen.Race () (Die erste Fertigstellung wird zurückgegeben) und Versprechen.Allsettled () (Warten auf alle Fertigstellungen)
Nutzung von Array.Prototyp -Methoden zur Datenmanipulation in JavaScript
Jul 06, 2025 am 02:36 AM
JavaScript-Array-integrierte Methoden wie .Map (), .filter () und .Reduce () k?nnen die Datenverarbeitung vereinfachen. 1) .Map () wird verwendet, um Elemente eins in eins um Neuarrays zu konvertieren; 2) .Filter () wird verwendet, um Elemente durch Bedingung zu filtern; 3) .Reduce () wird verwendet, um Daten als einzelner Wert zu aggregieren; Missbrauch sollte bei der Verwendung vermieden werden, was zu Nebenwirkungen oder Leistungsproblemen führt.
JS Roundup: Ein tiefes Eintauchen in die JavaScript -Ereignisschleife
Jul 08, 2025 am 02:24 AM
Die Ereignisschleife von JavaScript verwaltet asynchrone Vorg?nge, indem sie Call -Stapel, Webapis und Task -Warteschlangen koordinieren. 1. Der Anrufstack führt synchronen Code aus, und wenn er auf asynchrone Aufgaben begegnet, wird er zur Verarbeitung an Webapi übergeben. 2. Nachdem das Webapi die Aufgabe im Hintergrund abgeschlossen hat, wird der Rückruf in die entsprechende Warteschlange (Makroaufgabe oder Micro -Aufgabe) eingebaut. 3. Die Ereignisschleife prüft, ob der Anrufstapel leer ist. Wenn es leer ist, wird der Rückruf aus der Warteschlange herausgenommen und zur Ausführung in den Anrufstapel geschoben. V. 5. Das Verst?ndnis der Ereignisschleife hilft zu vermeiden, den Haupt -Thread zu blockieren und die Codeausführungsreihenfolge zu optimieren.
Ereignis verstehen und in JavaScript DOM -Ereignissen sprudeln und erfassen
Jul 08, 2025 am 02:36 AM
Ereignisblasen verbreiten sich vom Zielelement nach au?en zum Vorfahrknoten aus, w?hrend Ereignisfassungen sich von der ?u?eren Schicht nach innen zum Zielelement ausbreiten. 1. Ereignisblasen: Nach dem Klicken auf das untergeordnete Element l?st das Ereignis den H?rer des übergeordneten Elements nach oben aus. Nach dem Klicken auf die Schaltfl?che gibt es beispielsweise zuerst die untergeordnete und dann entzündete Eltern aus. 2. Ereigniserfassung: Stellen Sie den dritten Parameter auf True ein, so dass der H?rer in der Erfassungsstufe ausgeführt wird, z. B. das Ausl?sen des Capture -Listeners des übergeordneten Elements, bevor Sie auf die Schaltfl?che klicken. 3. Praktische Verwendungszwecke umfassen ein einheitliches Management von Ereignissen für Kinderelemente, Vorverarbeitung und Leistungsoptimierung von Abfangen. V.
