Reddit PWA: Wie die führenden sozialen Medien Web-Apps nutzen

Veröffentlicht: 2022-06-16

Die Einführung neuer Technologien ist ein unvermeidlicher Bestandteil von Innovation und Wachstum für Online-Unternehmen. Im Allgemeinen können große Unternehmen die neuesten Gadgets leicht erleben, die Kundenzufriedenheit steigern und sich von der Konkurrenz abheben. PWA wird das nächste große Ding sein, das von zahlreichen großen Marken wie Reddit PWA, Facebook PWA und Alibaba PWA übernommen wird.

Vor diesem Hintergrund gilt PWA als neuer Standard für moderne Websites und als vielversprechender Player, um native Apps zu ersetzen. Dennoch ist es für kleine und aufstrebende Unternehmen unglaublich erschwinglich. In der heutigen Fallstudie tauchen wir kopfüber in Reddit PWA ein und sehen, wie diese beliebte Social-Media-Site PWA nutzt.

Inhalt

Ein Überblick über Reddit

Reddit-Logo

Reddit wurde 2005 von Steve Huffman und Alexis Ohanian von der University of Virginia gegründet. Sein Name war eine Anpassung an die Antwort „Ich habe es gelesen“, wenn andere eine Geschichte teilen möchten.

Es ist eine riesige Plattform, auf der Benutzer Beiträge unter verschiedenen Inhaltstypen einreichen können, nämlich soziale Nachrichten, Forumsdiskussionen, Webinhalte oder ein gesammeltes Netzwerk. Es ist Teil dessen, was Reddit beliebt macht, da es die angesammelte Quelle für Wissensdiskussionen in fast allen Lernbereichen ist.

Außerdem erlaubt Reddit den Leuten, anonym zu bleiben, wenn sie Fragen stellen, und schafft Raum für eine offene und aufregende Erfahrung, um durch alle Informationen zu blättern, nach denen sich ihr Gehirn sehnt.

Reddit-Posts werden von der Community bestimmt. Ein Beitrag oder Subreddit kann nur nach oben verschoben werden, wenn Benutzer ihn basierend darauf, wie sie ihn für nützlich halten, positiv bewerten. Auf diese Weise können Spam oder schädliche, irreführende Informationen reduziert werden.

Ihre Hauptzielgruppe sind College-Studenten, internetaffine Fellows und Social-Media-Befürworter zwischen 18 und 29 Jahren. Sie belegten mit fast 48 Millionen monatlich aktiven Benutzern und über 430 Millionen monatlich aktiven Benutzern weltweit den 10. Platz unter den beliebtesten sozialen Netzwerken in den USA.

Wie die Integration von PWA Marken dabei hilft, Erfolge zu steigern

Beschleunigung der Benutzererfahrung

Viele Marken kommen zu PWA, um die Ladegeschwindigkeit ihrer App zu erhöhen. Nehmen wir als Beispiel den Fall von Uber PWA. Da sie wissen, dass ihre Kunden Uber (meistens) in Eile nutzen, haben sie eine winzige, aber leistungsstarke Uber-PWA entwickelt, die innerhalb von 3 Sekunden geladen werden kann, selbst bei langsamen Verbindungen wie 2G.

Durch die Beschleunigung der User Journey wird die Absprungrate reduziert und somit die potenzielle Conversion-Rate erhöht. Menschen betrachten heutzutage langsam ladende Seiten oft als einen nervigen Film, den sie jeden Moment abbrechen würden.

Walmart stellte auch fest, dass mit einer Verbesserung der Ladezeit um nur 1 Sekunde die Conversion-Rate bereits um 2 % gestiegen ist.

Kundenwert steigern

PWA kann Ihnen nicht nur helfen, das Laden der ersten Seite zu verbessern, sondern schafft auch glatte, nahtlose Übergänge zwischen Seiten und Elementen. Mit anderen Worten, die Benutzererfahrung vor Ort wird auch angenehm sein.

Für E-Commerce-Shops und Marktplätze gilt: Je länger Kunden auf Seiten bleiben, desto besser bedeutet dies, dass sie an den angebotenen Artikeln interessiert sind. Gleichzeitig finden diejenigen, die dazu neigen, in großen Mengen einzukaufen, die Einkaufsreise einfach und schnell.

PWA kann Push-Benachrichtigungen in entscheidenden Zeiten aktivieren und so wieder mit häufigen Benutzern in Verbindung treten, um sich zu engagieren und den Wert für Online-Unternehmen zu steigern.

Verwischen Sie die Online-Offline-Distanz

Mit der Möglichkeit, offline zu arbeiten, ermöglicht PWA Benutzern, ihre unvollendete Online-Reise unterwegs fortzusetzen, indem sie durch ihre geladenen Seiten blättern.

Sie können auch Änderungen am Inhalt vornehmen, und alles wird im Hintergrund gespeichert, um eine möglichst genaue Synchronisierung zu gewährleisten, wenn die Verbindung wieder hergestellt wird.

Alle Geräte verhalten sich gleich

Kleine Unternehmen können Budgets für andere wichtige Investitionen bereitstellen und gleichzeitig Kosten für die PWA-Integration sparen.

Wenn Sie nur eine schnelle App für jedes Gerät erstellen müssen, können Sie die konsistente Leistung auf allen Online-Präsenzen aufrechterhalten und die Zeit und Ressourcen maximieren, um Kunden zu gewinnen und zu gewinnen.

So können wachsende Unternehmen ihren Umsatz effizient steigern.

Reddits Herausforderungen vor der PWA-Integration

Reddit wollte schon immer eine Lösung, um seine Benutzer zu ermutigen, die App zu verwenden, insbesondere über den Desktop. Sie hatten nach einer Möglichkeit gesucht, ihren Benutzern den Wechsel zu Apps nahezu mühelos zu machen.

Die Daten zeigen, dass einer der größten Nachteile der Verwendung von Apps darin besteht, zu viel Speicherplatz zu verbrauchen. Im Gegensatz dazu benötigt eine PWA-Installation weniger als 1 MB.

Auch der Download-Vorgang für Reddit gilt aufgrund seines Umfangs als Zeitkiller. Einige Reddit-Threads sagten, es sei überraschend, dass Reddit nicht früher an PWA arbeitet und Funktionalitäten optimiert.

Die Ergebnisse von Reddit PWA

Ergebnisse von reddit pwa

Über das Design

Obwohl PWA plattformübergreifend das gleiche Erscheinungsbild beibehält, wird es von jedem Browser unterschiedlich unterstützt. Das Drei-Punkte-Menü vereinfacht die Installation oder Deinstallation von PWA aus dem Web mit Chrome statt mit Microsoft Edge.

Die Pop-up-Schilder wie „App auf dem Startbildschirm installieren“ gelten als benutzerfreundlich und ein Muss, damit Besucher zur Nutzung von Apps angeregt werden.

Über die Funktion

  • Die Ladegeschwindigkeit: effizient schnell und reibungslos
  • Der Übergang zwischen Seiten und Elementen: nahtlose und ansprechende, sofort erscheinende Elemente
  • Die einfache Navigation: typisches Dropdown-Inhaltslayout mit Hover-Effekten nach der Erweiterung, vertraut, intuitiv und mühelos
  • Das Engagement-Niveau bei jeder Interaktion: ist insgesamt zufriedenstellend. Die Art und Weise, wie das Reddit-Logo für den später geladenen Inhalt angezeigt wird, lässt die Website so aussehen, als würde sie schneller laufen

Wie erstellt man eine PWA wie Reddit?

Tipps mit Reddit PWA

Stellen Sie sicher, dass Sie die PWA-Kernanforderungen abdecken. Es sollte schnell starten, aber auch während der gesamten Benutzerreise schnell bleiben. Reddit PWA zeigt vom ersten Laden an eine halsbrecherische Geschwindigkeit, und der gesamte Inhalt erscheint sofort, wenn Sie scrollen, was eine reaktionsschnelle Benutzererfahrung gewährleistet.

Ausschließlich unter iOS werden die Re-Engagement-Funktionen wie Popup-Meldungen und Benachrichtigungen für die PWA-Installation nicht von Apple unterstützt.

Wenn Sie fortschrittliche Entwicklung für optimale Funktionalität betreiben möchten, sollten Sie wissen, dass PWAs auf der Grundlage von Best Practices und modernen Web-APIs erstellt werden. Diese können abhängig von Ihren geschäftlichen Prioritäten und spezifischen Anforderungen unabhängig voneinander oder in Kombination eingesetzt werden.

Reddit PWA konzentrierte sich zuerst auf die Verbesserung der Geschwindigkeit, alles andere folgt. Es ist wie zu sagen: „Hey, schau, wie gut unsere mobile App funktioniert, stell dir vor, was du bekommst, wenn du die App herunterlädst.“ Beachten Sie, dass Reddit nach dem Scrollen der Besucher Push-ups aktiviert, um Benutzer zu ermutigen, zur App zu wechseln.

Um den modernen Edge-Look Ihrer Website auszurichten und das volle Potenzial Ihrer PWA auszuschöpfen, empfiehlt Google, die agile Strategie zu priorisieren, die darin besteht, Feature für Feature zu starten und zu sehen, ob die Kombination für Sie funktioniert.

Diese Sichtweise ermöglicht es Ihnen, sich Schritt für Schritt an die Reaktion des Marktes zu halten. Die Analyse der nachverfolgten Daten kann Aufschluss darüber geben, welche Funktionen Benutzer am liebsten verwenden und welche ihnen keinen Mehrwert bringen.

Diese Eingaben sind für Webdesigner und Entwickler unerlässlich, um entsprechende Anpassungen vorzunehmen. Behalten Sie den Trial-and-Error-Prozess bei, bis Sie die richtigen ausführen, die Ihnen helfen, das durch PWA generierte zusätzliche Geld zu vergrößern.

Eine vereinfachte Einführung in die PWA-Entwicklung

Einrichten

Erstellen Sie das App-Verzeichnis und füllen Sie hier die Unterverzeichnisse js, CSS und images.

Schreiben des Markups für die App-Schnittstelle

In diesem Schritt sollte die PWA in der Lage sein, Inhalte anzuzeigen, unabhängig davon, ob JavaScript deaktiviert ist oder nicht. Auf diese Weise werden Benutzer nicht mit einer störenden leeren Seite konfrontiert, wenn die Verbindung unterbrochen oder verzögert ist.

Stattdessen sollten alle Interaktionen reaktionsschnell sein und auf einer Vielzahl von Bildschirmen korrekt angezeigt werden. Dies erfordert die Berücksichtigung der mobilfreundlichen Ausrichtung.

Testen der App

Sobald im Browser etwas los ist, können Sie es mit Googles Lighthouse testen, um zu sehen, wie gut es den PWA-Standards entspricht.

Drücken Sie F12, um das Entwickler-Panel von Chrome auf Ihrer öffentlichen Website zu öffnen, suchen Sie die Registerkarte Audits und klicken Sie auf Lighthouse.

Ein Servicemitarbeiter

Da es sich um ein relativ unabhängiges Webskript handelt, das abgesehen von der Benutzerinteraktion im Hintergrund ausgeführt wird, ermöglicht diese leistungsstarke Fähigkeit PWA, Netzwerkanfragen abzufangen, lokales Caching zu aktivieren und vieles mehr.

Ein App-Manifest

Ein App-Manifest ist mit einem Servicemitarbeiter erforderlich, um zu bestimmen, wie Ihre PWA auf dem Startbildschirm aussehen und sich verhalten wird. Sie können den Namen, das Symbol, die Designfarbe und die Ausrichtung der App festlegen.

Einpacken

Der Code ist bis zu dieser Phase vollständig, aber Sie müssen die App auf einen Webserver hochladen. Dies würde es Ihrer PWA ermöglichen, unter der Sicherheit von HTTPS zu arbeiten.

Premium-PWA-Entwicklung für E-Commerce von Tigren

Unsere Expertise

Als jahrzehntelanger professioneller Magento-Dienstleister ist Tigren heute eine der führenden Outsourcing-Agenturen weltweit.

Alles begann mit einem kleinen Team aus hochqualifizierten, erfahrenen und engagierten Entwicklern, die danach streben, die Ziele unserer Kunden zu erreichen. Bis heute haben wir mehr als 1000 Projekte für über 800 globale KMUs durchgeführt.

Mit Sitz in Vietnam hoffen wir, so vielen aufstrebenden Geschäftsinhabern bei den erstklassigen Magento-E-Commerce-Projekten helfen zu können, die sie verdienen, und das zu angemessenen und erschwinglichen Preisen.

Unsere Leistungen

Wir sind die auf Magento spezialisierte Agentur mit dem Ziel, nachhaltige Wachstumslösungen für KMUs anzubieten. Mit PWA bieten wir 2 Premium-Services wie folgt an:

  • Benutzerdefinierte Progressive Web App-Entwicklung
  • Premium Tigren PWA-Vorlage
Entwicklung von Online-Business-Websites

Die zentralen Thesen

Die PWA ist genau die richtige Kombination aus nativen Apps und regulären Websites, die den Endbenutzern einen echten Mehrwert bringt.

Experten sagen voraus, dass es das nächste große Ding in der digitalen Welt sein wird, insbesondere im E-Commerce. Hoffentlich bekommen Sie durch das Lernen dieser Fallstudie von Reddit PWA eine Vorstellung davon, wie Sie eine Website erneuern können, die Ihren Kunden hilft, und vielleicht einer der frühen Anwender von PWA werden.