Der ultimative Leitfaden für progressive Web-Apps im Jahr 2022 – mit 50 PWA-Beispielen

Sind Sie daran interessiert, eine progressive Web-App zu erstellen? In diesem Leitfaden erfahren Sie alles , was Sie wissen müssen – zusammen mit 50 Beispielen der besten PWAs auf dem Markt!

Seit Jahren predigen wir ununterbrochen: Sie brauchen eine native App. Dafür gab es gute Gründe, und wir stehen auch heute noch dazu.

Unsere Plattformen News, Canvas und Canvas for eCommerce haben unseren Kunden geholfen, die mobile UX erheblich zu verbessern, den Traffic zu steigern, mehr Loyalität aufzubauen und den Umsatz zu steigern. Native Apps eignen sich hervorragend zum Aufbau einer tieferen Beziehung zu Ihrer Kernnutzerbasis und sind ein Muss für jede Marke, die Wert auf Loyalität, Engagement und Bindung legt.

Allerdings ist nichts perfekt. Native Apps sind kein Ersatz für großartige Weberlebnisse.

Native Apps sind nur für diejenigen relevant, die die App installiert haben. Sie tun nichts für neue Besucher, die Sie zum ersten Mal im Web besuchen, gelegentliche Benutzer, die ab und zu vorbeischauen und noch nicht engagiert genug sind, um die App zu installieren, oder Kunden, die auf dem Desktop sind.

Auch diese potenziellen Kunden sind absolut erfolgsentscheidend. Der erste Eindruck ist sehr wichtig, und native Apps helfen immer in den frühen Stadien des Trichters. Sie müssen während der gesamten Reise ein schnelles, reibungsloses Erlebnis bieten. Wie?

Geben Sie progressive Web-Apps (PWAs) ein. Wenn Sie eine Website haben und diese für Sie oder Ihr Unternehmen auch nur entfernt wichtig ist, benötigen Sie eine PWA.

In diesem Artikel werden wir progressive Web-Apps definieren, ihre wichtigsten Vorteile diskutieren und 50 Beispiele der besten PWAs im Internet vorstellen.

Wir schließen mit einigen Hinweisen zum Erstellen einer PWA und wie sie mit nativen mobilen Apps zusammenarbeiten, um eine erfolgreiche mobile UX-Kombination zu erstellen. Lassen Sie uns eintauchen. Am Ende dieses Artikels wissen Sie alles, was Sie wissen müssen, um mit Ihrem Progressive-Web-App-Projekt zu beginnen.

Wir beginnen mit der grundlegenden Frage – was ist eine PWA?

Was genau ist eine Progressive Web App? Lassen Sie uns eine PWA definieren

Progressive Web Apps kombinieren das Beste aus dem Web mit Funktionen, die bisher nur bei nativen Apps möglich waren.

PWAs leben im Browser wie eine herkömmliche Website und sind vollständig mit der Infrastruktur aus Links und Suchmaschinenindizes des Webs verbunden. Wie native Apps, obwohl sie über ein Startbildschirmsymbol gestartet werden können, Push-Benachrichtigungen an das Gerät des Benutzers senden, in Sekundenbruchteilen geladen und für den Offline-Betrieb entwickelt werden können.

Progressive Web-Apps sind nicht von Ihrer Website getrennt . Sie sind eine Verbesserung Ihrer Website, die sie auf den neuesten Stand der aktuellen Best Practices bringt und modernste Webtechnologie wie Servicemitarbeiter nutzt, um eine App-ähnliche Erfahrung in einem mobilen Browser bereitzustellen.

Vielleicht sind Sie sich aber immer noch nicht sicher , was sie sind.

Dies ist verständlich, da der Begriff häufig verwendet wird, aber solide Definitionen sind schwer fassbar. Schauen wir uns die Geschichte des Begriffs an, um die Dinge zu klären.

Die ursprüngliche Definition einer Progressive Web App

Der Begriff „Progressive Web App“ wurde 2015 von Francis Berriman und dem Google-Ingenieur Alex Russell geprägt. Sie hatten das Aufkommen einer neuen Klasse von Webanwendungen beobachtet und beschlossen beim Abendessen, sie zu definieren und zu benennen.

Dabei kamen sie auf folgende Kriterien:

• Responsive: passend für jeden Formfaktor
• Konnektivitätsunabhängig : Progressiv mit Service Workern erweitert, damit sie offline arbeiten können
• App-ähnliche Interaktionen: Nehmen Sie ein Shell + Content-Anwendungsmodell an, um Appy-Navigationen und -Interaktionen zu erstellen
• Frisch : Transparent immer aktuell dank Service Worker Update-Prozess
• Sicher : Wird über TLS bereitgestellt (eine Service Worker-Anforderung), um Schnüffeln zu verhindern
• Auffindbar : Sind dank W3C-Manifesten und Service Worker-Registrierungsbereich als „Anwendungen“ identifizierbar, sodass Suchmaschinen sie finden können
• Re-engageable : Kann auf die Re-engagement-UIs des Betriebssystems zugreifen; zB Push-Benachrichtigungen
• Installierbar : Auf dem Startbildschirm durch vom Browser bereitgestellte Eingabeaufforderungen, sodass Benutzer Apps, die sie am nützlichsten finden, ohne den Aufwand eines App-Stores „behalten“ können
• Verknüpfbar : bedeutet, dass sie ohne Reibung, ohne Installation und einfach zu teilen sind. Die soziale Kraft von URLs ist wichtig.

Sie können sehen, wie diese Kriterien den „Web-App“-Teil der Definition erfüllen.

Viele Jahre lang haben Unternehmen wie wir und andere Plattformen entwickelt, die es Unternehmen ermöglichten, App-Erlebnisse mit Webtechnologien zu erstellen. Dies funktioniert bis heute hervorragend, aber es gibt Kompromisse. Um ein großartiges natives App-Erlebnis zu schaffen, verlieren Sie die Auffindbarkeit und Verknüpfbarkeit des Webs.

Neue Webtechnologien wie Service Worker (auf die wir später noch eingehen) sind entstanden und haben die Dinge verändert – sie haben es Entwicklern ermöglicht, Erfahrungen zu erstellen, die das Beste aus der nativen App-UX nutzen und in den Browser stellen, wodurch alle Vorteile des Webs erhalten bleiben.

Sie mussten nicht länger eine mittelmäßige mobile Web-UX akzeptieren, während Sie die Leute dazu drängten, Ihre nativen Apps herunterzuladen, um das echte Geschäft zu machen. Sie könnten jedem, der online mit Ihrer Marke interagiert, ein großartiges mobiles Erlebnis in den App Stores und im Internet bieten.

Das haben Berriman und Russell beobachtet. Sie haben nichts erfunden, sie haben eine Verschiebung im Netz bemerkt und ihr einen Namen gegeben.

Was ist mit dem „progressiven“ Teil?

In diesem Zusammenhang bedeutet dies, dass die Apps mit progressiver Erweiterung erstellt werden . Dies ist eine Designtechnik, die sich darauf konzentriert, eine „Basis“-Erfahrung zu schaffen, die für alle funktioniert, aber auf fortgeschritteneren Geräten aktualisiert und verbessert wird. Die Erfahrung einer progressiven Web-App ist nicht unbedingt für alle Benutzer gleich, sie passt sich basierend auf der Leistung ihres Geräts sowie den von ihnen gewährten Berechtigungen an.

Reicht die Definition von Berriman und Russell also aus? Das Problem ist, dass nur wenige PWAs tatsächlich alle diese Kriterien erfüllen. Sie ähneln eher einer Wunschliste, einem anzustrebenden Ziel oder einem Musterfall.

Googles Definition einer progressiven Web-App

Microsoft ist seit einiger Zeit von PWAs begeistert. Apple brauchte einige Überzeugungsarbeit und ist jetzt (größtenteils) dabei. Unter den Big Techs war es jedoch Google, das sich von Anfang an wirklich für PWAs eingesetzt hat.

Google selbst scheint sich der Definition jedoch nicht zu 100 % sicher zu sein. Im Jahr 2015 haben sie eine Liste mit 10 Merkmalen herausgegeben, diese dann auf sechs reduziert und dann drei neue hinzugefügt.

Derzeit umfasst die Google-Definition einer progressiven Web-App drei Säulen. Auf ihrer Einführungsseite geben sie an, dass PWAs:

„Webanwendungen, die so konzipiert wurden, dass sie leistungsfähig, zuverlässig und installierbar sind . Diese drei Säulen verwandeln sie in ein Erlebnis, das sich wie eine plattformspezifische Anwendung anfühlt.“

Dies ist hilfreicher, aber nicht so hilfreich, da es so breit gefächert ist. Es deutet jedoch auf den entscheidenden Punkt hin, dass PWAs Erfahrungen ins Web bringen, die traditionell ausschließlich mit nativen Plattformen verbunden waren.

Die technische Definition einer Progressive Web App

Eine dritte Möglichkeit, eine PWA zu definieren, besteht darin, eher die rein technischen als die UX-Kriterien zu spezifizieren.

Das versuchte der Webentwickler und Autor Jeremy Keith 2017 in seinem Blogbeitrag What is a Progressive Web App? .

Keith ist der Meinung, dass die Verwirrung um PWA-Definitionen unbegründet ist und dass im Wesentlichen drei Kriterien erfüllt sein müssen:

1. HTTPS – PWAs müssen auf sicheren Servern mit HTTPS ausgeführt werden. Servicemitarbeiter sind für ihr Potenzial unerlässlich und können nur verwendet werden, wenn HTTPS vorhanden ist.
2. Ein Service Worker – im Wesentlichen eine JavaScript-Datei, die separat vom „Thread“ des Hauptbrowsers ausgeführt wird und dem Entwickler die Kontrolle darüber ermöglicht, wie die App Netzwerkanfragen und Caching verarbeitet. Dies trägt dazu bei, die beeindruckende Geschwindigkeit und die Offline-Fähigkeiten von PWAs zu steigern.
3. Ein Web-App-Manifest – eine JSON-Datei, die dem Browser eine Beschreibung der Anwendung bereitstellt, einschließlich Details wie Name, Autor, Symbol, Beschreibung und Ressourcen zum Ausführen. Dadurch wird sichergestellt, dass die Anwendung auffindbar ist.

Keith merkt weiter an, dass dies eine minimale, nackte Knochendefinition ist. PWAs können noch viel mehr, aber sie müssen diese drei technischen Kriterien erfüllen, um sich durchzusetzen.

Wir haben also die ursprüngliche beobachtende/erstrebende Definition, die UX-gesteuerte Definition von Google und eine minimalistische technische Definition gesehen. Was können wir vermuten? Obwohl es immer noch ein wenig Unklarheit geben mag, haben wir jetzt eine gute Vorstellung davon, was eine progressive Web-App ist.

Eine PWA ist eine moderne, sichere und schnell ladende Website, die modernste Webtechnologien verwendet, um diese Eigenschaften zu erreichen. Im Gegensatz zu herkömmlichen Websites funktioniert und fühlt es sich für den Benutzer wie eine native App an – und „entgeht“ dabei dem Browser-Tab.

Wie Alex Russell es ausdrückt:

„Diese Apps werden nicht über Geschäfte verpackt und bereitgestellt, sie sind nur Websites, die all die richtigen Vitamine genommen haben.“

Dies ist eine großartige Möglichkeit, es auszudrücken. PWAs sind die neueste Generation des Webs. Es handelt sich um Web-Apps, die in der Lage sind, das Potenzial moderner Browser-Technologie auszuschöpfen. Indem Sie Ihre eigene Website in eine PWA verwandeln, geben Sie ihr die notwendigen „Vitamine“, damit sie optimal funktioniert.

Wir werden uns jetzt den Vorteilen der Erstellung einer progressiven Webanwendung zuwenden, bevor wir uns 50 PWA-Beispiele ansehen, um Ihr Projekt zu inspirieren.

Progressive Web-App-Vorteile

Wir haben bereits gesagt, dass Sie, wenn Sie eine Website haben und diese in irgendeiner Weise mit dem Erfolg Ihres Unternehmens verbunden ist, eine PWA erstellen müssen.

Das mag wie eine kühne Aussage erscheinen, aber es ist die Wahrheit. Wieso den?

Kurz gesagt, wenn Sie keine PWA erstellen, lassen Sie wahrscheinlich Kunden, Umsatz und Wachstum auf dem Tisch. Wie Pete LePage und Sam Richard vom Google-Webteam es ausdrückten:

„Die Zahlen lügen nicht! Unternehmen, die Progressive Web Apps eingeführt haben, haben beeindruckende Ergebnisse erzielt. Beispielsweise verzeichnete Twitter eine 65-prozentige Zunahme der Seiten pro Sitzung, 75 % mehr Tweets und eine 20-prozentige Abnahme der Absprungrate, während die Größe ihrer App um über 97 % reduziert wurde. Nach dem Wechsel zu einer PWA verzeichnete Nikkei 2,3-mal mehr organischen Traffic, 58 % mehr Abonnements und 49 % mehr täglich aktive Benutzer. Hulu ersetzte sein plattformspezifisches Desktop-Erlebnis durch eine Progressive Web App und verzeichnete einen Anstieg der wiederkehrenden Besuche um 27 %.“

Das kratzt nur an der Oberfläche.

Werfen wir einen Blick auf die Ergebnisse, die andere bekannte Marken als direkte Folge der Einführung von PWAs erzielt haben.

• Alibaba steigerte die Conversions im mobilen Web um 76 %, verzeichnete 14 % mehr aktive Benutzer auf iOS und 30 % mehr auf Android
• Debenhams verzeichnete eine 40-prozentige Steigerung der mobilen Einnahmen, eine 20-prozentige Steigerung der Konversionen und ein über dem Markt liegendes Online-Wachstum
• Pinterest verzeichnete eine 40-prozentige Steigerung der Gesamtzeit, ein 44-prozentiges Wachstum der nutzergenerierten Werbeeinnahmen und 60 % mehr Core-Engagement
• Forbes verzeichnete eine Steigerung der Sitzungen pro Nutzer um 43 %, eine Verbesserung der Anzeigensichtbarkeit um 20 % und 100 % mehr Engagement
• BMW verzeichnete eine 30 %ige Steigerung der CTR auf seiner Verkaufsseite, 4-mal schnellere Ladezeiten, 50 % mehr mobile Nutzer und 49 % mehr organischen Traffic
• MakeMyTrip steigerte die Seitengeschwindigkeit um 38 %, verdreifachte die Konversionsraten und verzeichnete einen Anstieg der Käufersitzungen um 160 %
• AliExpress steigerte die Konversionsraten für neue Benutzer um 104 % (+82 % auf iOS) und verzeichnete eine Steigerung der pro Sitzung verbrachten Zeit um 74 % bei doppelt so vielen besuchten Seiten pro Sitzung
• Housing.com verzeichnete 38 % mehr Conversions, eine um 10 % längere durchschnittliche Sitzung, eine um 40 % niedrigere Absprungrate - und eine insgesamt um 30 % schnellere Seitenladezeit
• Wego verdreifachte die Anzeigen-CTR und verzeichnete insgesamt 26 % mehr Besucher und 95 % mehr Conversions. Auf iOS erzielten sie eine beeindruckende 50-prozentige Steigerung der Konversion und eine 35-prozentige Verlängerung der Sitzungsdauer
• Treebo verzeichnete im Jahresvergleich eine 4-fache Steigerung der Conversions. Wiederholungsnutzer konvertierten 3x höher.
• Tinder hat die Ladezeiten von 11,91 Sekunden auf 4,69 Sekunden mehr als halbiert und das Engagement auf ganzer Linie mit einer PWA gesteigert, die 90 % kleiner ist als ihre native App

Wie sind all diese erstaunlichen Ergebnisse möglich? Vieles davon läuft darauf hinaus, dass PWAs eine viel bessere Benutzererfahrung bieten und daraus großartige Geschäftsergebnisse resultieren.

Es steckt aber noch mehr dahinter. Werfen wir einen genaueren Blick auf einige der wichtigsten Vorteile von progressiven Web-Apps, beginnend mit dem wichtigsten – der Geschwindigkeit.

PWAs sind blitzschnell

Moderne Verbraucher erwarten sofortiges Laden. Wenn etwas nicht sofort geladen wird, verlieren viele das Interesse, vielleicht dauerhaft. Dies ist sowohl selbsterklärend als auch durch eine Menge Daten gestützt:

• Fast 50 % der Nutzer geben an, dass ihre größte Frustration auf Mobilgeräten darin besteht, darauf zu warten, dass Seiten langsam geladen werden (Quelle).
• Seiten, die innerhalb von 2 Sekunden geladen werden, haben eine Absprungrate von 9 %, Seiten, die 5 Sekunden dauern, haben eine Absprungrate von 38 % (Quelle)
• Ein „starker Rückgang der Conversion-Rate“ ist mit einer Erhöhung der durchschnittlichen Ladezeiten von 1 auf 4 Sekunden verbunden (Quelle)
• Jede Verbesserung der Ladezeit um 1 Sekunde erhöht die Conversion-Rate um 2 %, während eine Verbesserung um 100 Millisekunden bis zu 1 % mehr Umsatz generiert (Quelle)

Je schneller Ihre Website geladen wird, desto besser. Wenn Sie Ihre Kunden/Leser/Benutzer warten lassen, wird ein anständiger Prozentsatz von ihnen abspringen und Ihnen ihr Geld nicht geben.

Die Verbesserung der Website-Geschwindigkeit führt zu besseren Ergebnissen auf ganzer Linie. Das ist alles dazu.

Wie kann Ihnen eine PWA dabei helfen? Progressive Web-Apps sind schnell. Wirklich schnell.

Pinterest zum Beispiel hat es geschafft, seine „Time to Interactive“-Ladezeit von trägen 23 Sekunden auf nur 5,6 Sekunden zu verkürzen. Dies war im Durchschnitt Android-Hardware über eine langsame 3G-Verbindung. Dies hatte einen willkommenen Dominoeffekt auf wichtige Kennzahlen.

Gar nicht so schlecht. Die Ergebnisse von Pinterest sind jedoch überhaupt nicht ungewöhnlich.

Die Streaming-Plattform ZEE5 verdreifachte die Site-Geschwindigkeit und halbierte die Pufferzeit durch den Aufbau einer PWA. Die PWA von Uber wird in weniger als 3 Sekunden in 2G-Netzwerken geladen. Forbes hat mit seiner PWA die mobilen Ladezeiten von 6,5 Sekunden auf seiner vorherigen mobilen Website auf nur 2,5 Sekunden verkürzt.

Geschwindigkeitsverbesserungen sind garantiert, wenn Sie eine gute, gut gestaltete progressive Web-App erstellen.

Warum sind Progressive Web Apps so schnell?

PWAs sind dank der wichtigen Servicemitarbeiter so schnell. Wie Jason Grigsby es in seinem ausgezeichneten Buch Progressive Web Apps ausdrückt:

„Progressive Web-Apps nutzen Servicemitarbeiter, um ein außergewöhnlich schnelles Erlebnis zu bieten. Mit Service Workern können Entwickler explizit definieren, welche Dateien der Browser in seinem lokalen Cache speichern soll und unter welchen Umständen der Browser nach Updates für die zwischengespeicherten Dateien suchen soll. Auf Dateien, die im lokalen Cache gespeichert sind, kann viel schneller zugegriffen werden als auf Dateien, die aus dem Netzwerk abgerufen werden.“

Grigsby erklärt das weiter:

„Wenn jemand eine neue Seite von einer progressiven Web-App anfordert, sind die meisten Dateien, die zum Rendern dieser Seite benötigt werden, bereits auf dem lokalen Gerät gespeichert. Das bedeutet, dass die Seite nahezu augenblicklich geladen werden kann, da der Browser lediglich die für diese Seite erforderlichen inkrementellen Informationen herunterladen muss.“

Einer der traditionellen Vorteile nativer Apps ist, dass sie blitzschnell sein können. Sie erreichen dies auf ähnliche Weise – alle zum Ausführen der App erforderlichen Dateien werden bei der Installation heruntergeladen und müssen nur neue Daten abrufen. Servicemitarbeiter ermöglichen progressiven Web-Apps, eine ähnlich beeindruckende Leistung ins Web zu bringen!

PWAs bieten eine App-ähnliche UX im Web

Geschwindigkeit, die wir bereits besprochen haben, ist offensichtlich ein großer Teil von UX. Es gibt jedoch noch andere wichtige Faktoren, und auch hier helfen PWAs.

Native mobile Apps waren lange Zeit der Goldstandard für mobile UX. Sie sind es immer noch (zumindest in gewisser Weise), aber PWAs können jetzt einen Großteil ihres Gefühls und ihrer Funktionalität direkt aus dem Browser übernehmen.

PWAs können beispielsweise:

• Arbeiten Sie offline oder unter schlechten Netzwerkbedingungen (mehr dazu als nächstes)
• Auf dem Gerät des Benutzers installiert und wie eine native App über ein Startbildschirmsymbol aufgerufen werden
• Push-Benachrichtigungen auf den Sperrbildschirm des Geräts senden (leider nur auf Android)
• Entwickelt werden, um ein „immersives“ Vollbilderlebnis mit einer Navigationsstruktur zu bieten, die eine native App nachahmt
• Nutzen Sie Animationen wie eine native App
• Entwickelt sein, um auf die Hardware des Geräts wie Kamera und GPS zuzugreifen

Das frühe mobile Web war ziemlich rau. Das alte Paradigma eines Desktop-Browsers wurde auf Smartphones „aufgeschraubt“, wo es nicht wirklich passte. Die Ära des responsiven Designs hat dies erheblich verbessert, aber es fehlte immer etwas.

Native Apps wurden eindeutig für Smartphones entwickelt. Sie passten immer besser zur Erfahrung des Geräts. PWAs haben diese Grenze jedoch verwischt, die Unterscheidung in Bezug auf Erfahrung kann schwer zu bestimmen sein.

Haben Sie zum Beispiel schon einmal Instagram Lite, Google Maps Go oder Twitter Lite verwendet?

Sie können sie im Google Play Store herunterladen und ausprobieren – und sehen, wie sie sich wie andere native Apps anfühlen.

Es sei Ihnen verziehen anzunehmen, dass dies leichtere, schlankere Versionen ihrer wichtigsten nativen Apps sind. Wie Sie vielleicht schon erraten haben, handelt es sich um progressive Web-Apps.

Dies zeigt das Potenzial von PWAs für die Wiederherstellung der nativen App-Erlebnisse, die wir alle kennen und lieben. Wenn wir etwas später zu den Beispielen kommen, werden Sie genau sehen, was wir meinen!

Hinweis: Möglicherweise haben Sie bemerkt, dass diese PWAs im Google Play Store live sind. Google hat Anfang 2019 den Play Store für PWAs geöffnet! Dies zeigt, wie zuversichtlich sie in die Zukunft von PWAs als wirklich plattformübergreifende Anwendungen sind. Sie müssen durch ein paar Reifen springen, um Ihre PWA dort anzubringen, aber es ist sicherlich möglich. Ob dies jemals im iOS App Store möglich sein wird, darüber gibt es derzeit keine Informationen von Apple.

PWAs sind zuverlässig

Wir alle haben schon einmal versucht, eine Website oder Web-App über eine wackelige mobile Verbindung zu nutzen. Es macht keinen Spaß.

Nochmals vielen Dank an Servicemitarbeiter, die genau definieren, was der Browser lokal zwischenspeichern soll – PWAs können so erstellt werden, dass sie ein schnelles, vollständiges Erlebnis bieten, selbst wenn der Benutzer eine schlechte Konnektivität hat.

Dies kann auch noch einen Schritt weiter gehen. Durch „Precaching“, also das Herunterladen und Speichern der gesamten Anwendung beim ersten Besuch, können PWAs auch komplett offline funktionieren!

Dies ist wirklich wichtig, wenn man bedenkt, wie viele Menschen immer noch in ländlichen und schlecht versorgten Gebieten leben und die etwa eine Milliarde Menschen, die in den nächsten Jahren zum ersten Mal online gehen – von denen viele keine einwandfreie Konnektivität genießen werden.

PWAs sind sicher, effizient und anpassungsfähig

Damit Servicemitarbeiter ihre Arbeit erledigen können, muss Ihre Website mit HTTPS vollständig sicher sein.

Hoffentlich tut es das bereits, aber wenn Sie keine PWA erstellen, werden Sie gezwungen, alle notwendigen Arbeiten zu erledigen, um Ihre Website zu 100 % sicher zu machen.

PWAs sind auch sehr effizient . Ein Schlüsselfaktor, der Menschen davon abhält, native mobile Apps herunterzuladen, ist der verfügbare Speicherplatz auf ihrem Gerät. Wie die Autoren von The PWA Book es ausdrückten:

„Sie behandeln ihre mobilen Geräte wie Kameras, Computer, Notizblöcke, Assistenten und – am wichtigsten – als Schatzkammer der Erinnerungen. Wenn das Herunterladen einer App bedeutet, dass sie wertvolle Fotos oder Nachrichten opfern müssen, denken sie dreimal nach, bevor sie auf Ja klicken.“

PWAs zwingen Menschen nicht, solch schwierige Entscheidungen zu treffen. Sie sind viel leichter als native Apps und der Installationsprozess ist weniger reibungslos (ein Antippen einer Schaltfläche und eine Verknüpfung wird auf dem Startbildschirm erstellt). Die PWA nimmt zwar etwas Platz auf dem Gerät ein, ist aber im Vergleich vernachlässigbar.

Die Servicemitarbeiter, die diese Effizienz vorantreiben, sind auch dafür verantwortlich, die Serverlast zu reduzieren und das Risiko von Leistungseinbußen und Abstürzen in intensiven Zeiten zu minimieren.

Auch Progressive Web Apps sind sehr anpassungsfähig. Da sie auf dem Internet basieren, können sie einfacher gewartet und aktualisiert werden als native mobile Apps.

Wenn Sie etwas schnell ändern oder aktualisieren möchten, müssen Sie sich nicht mit den Gatekeepern des App Store auseinandersetzen, den Benutzer manuell aktualisieren oder spezialisierte native App-Entwickler beauftragen.

Es ist so einfach wie das Aktualisieren Ihrer Website heute – und die Updates (die auf einem Server bereitgestellt werden) stehen dem Benutzer fast sofort zur Verfügung.

Mit PWAs können Sie Benutzer mit Push-Benachrichtigungen einbeziehen

Wir sprechen seit Jahren über die Macht von Push-Benachrichtigungen. Sie sind der beste Weg, um mit Ihrem Publikum auf Mobilgeräten zu interagieren und zu kommunizieren – ohne Ausnahme. Sie können sie verwenden, um Benutzer auf den neuesten Stand zu bringen, sie zurück in die Apps zu bringen, Angebote und Produkte zu bewerben und im Allgemeinen in ihrem geschäftigen Leben im Gedächtnis zu bleiben.

Hier sind einige Beispiele dafür, wie verschiedene Unternehmen Push-Benachrichtigungen verwenden könnten:

• Nachrichtenverlage

„Breaking News, X und Y sind gerade passiert!“

Push-Benachrichtigungen eignen sich hervorragend für digitale Publisher und ermöglichen es ihnen, den Verkehr zurück in ihre Top-Storys zu lenken und Benutzer mit zeitkritischen Eilmeldungen zu warnen.

• E-Commerce-Shops

„Sonderangebot / Sie haben Ihren Warenkorb aufgegeben / Ihre Artikel wurden versandt“

Push funktioniert wunderbar für E-Commerce. Shopping-Apps senden regelmäßig Benachrichtigungen, um Benutzer auf Angebote und neue Produkte aufmerksam zu machen, sie über den Lieferprozess auf dem Laufenden zu halten und spezielle App-exklusive Gutscheincodes zu liefern.

• Soziale Plattformen und Communities

„Dein Freund hat dir gerade eine Nachricht/Freundschaftsanfrage geschickt/geantwortet“

Wir alle haben wahrscheinlich schon einmal Push-Nachrichten von sozialen Plattformen erlebt. Sie sind die geheime Zutat, die soziale Apps verwenden, um Sie wieder auf ihre Plattform zu bringen, sich zu engagieren und mit anderen Benutzern zu interagieren.

Dies sind einige der Anwendungsfälle. Aber Push-Benachrichtigungen können wirklich ein großer Schub für jedes Unternehmen sein. Sie waren (und sind immer noch) einer der stärksten Gründe, native Apps zu entwickeln.

Nochmals vielen Dank an unsere befreundeten Servicemitarbeiter – Sie brauchen keine nativen Apps mehr, um Push-Benachrichtigungen zu senden. Sie können sie von Ihrer Website aus senden (wenn Sie sie in eine PWA umwandeln).

Push-Benachrichtigungen müssen richtig verwendet und nicht missbraucht werden, aber sie können viele Vorteile bringen und sind ein großer Vorteil beim Aufbau einer PWA.

Nach dem Aufbau einer PWA stellte Lancome beispielsweise fest, dass 8 % der Verbraucher, die auf eine Push-Benachrichtigung tippen, einen Kauf tätigen, und verbesserte die Konversionsraten bei wiederhergestellten Warenkörben um 12 % über Push-Benachrichtigungen.

Ein weiterer ist eXtra Electronics, Saudi-Arabiens führender Elektronikhändler. eXtra erzielte 100 % mehr Verkäufe von Benutzern, die über Web-Push ankamen, und stellte fest, dass diejenigen, die sich für Push-Benachrichtigungen entschieden hatten, 4-mal häufiger zurückkehrten und 2-mal so viel Zeit auf der Website verbrachten. Chief Business Development Officer Mujeed Hazzaa sagte:

„Push-Benachrichtigungen sind ein großer Teil unserer Mobile-Engagement-Strategie. Es ist eine persönlichere Art, mit unseren Kunden zu kommunizieren. Das ist unglaublich wertvoll für unser Endergebnis.“

Wenn Sie Ihre Website in eine progressive Web-App verwandeln, können Sie auch für Ihr Unternehmen starke Ergebnisse erzielen. Es gibt eine große Einschränkung – Sie können sie nur auf Android verwenden. iOS unterstützt sie nicht, und es ist unklar, ob dies jemals der Fall sein wird. Wenn Push-Benachrichtigungen für Sie wichtig sind und Sie sie an alle Benutzer senden möchten, müssen Sie native mobile Apps erstellen.

Progressive Web Apps werden Ihr Geschäft wachsen lassen

Wir haben einige der wichtigsten Vorteile der Umwandlung Ihrer Website in eine progressive Web-App besprochen.

Unter dem Strich machen sie für jedes Unternehmen mit einer Website absolut Sinn. Sie ermöglichen es Ihnen, Ihre gesamte Web-UX zu aktualisieren und bieten ein schnelles, modernes Erlebnis, das Schlüsselkennzahlen so gut wie garantiert verbessert.

Was sind die Nachteile beim Aufbau einer PWA?

Eigentlich keine, außer der Zeit und dem Geld, die Sie investieren müssen, um eine zu bauen. Trotzdem ist eine PWA relativ erschwinglich und wird sich im Laufe der Zeit (mehr als) amortisieren – insbesondere , wenn Ihre Website an Einnahmen jeglicher Art durch Werbung, E-Commerce oder Mitgliedschaften gebunden ist.

Brauchen Sie noch Überzeugungsarbeit?

Verbinden wir alles mit einigen Beispielen. Wir werden 50 der besten Beispiele für progressive Web-Apps im Internet hervorheben und Ihnen aus erster Hand zeigen, was wir bisher besprochen haben.

Beispiele für progressive Web-Apps: Die 50 besten PWAs im Internet im Jahr 2020

Wenn Sie eine beeindruckende PWA entwickeln möchten, ist der erste Schritt, sich von erfolgreichen Beispielen progressiver Web-Apps inspirieren zu lassen.

Als Teil unserer Mission, Sie zu inspirieren, haben wir 50 Modellbeispiele der derzeit besten PWAs gesammelt. Sie können zu dem Abschnitt springen, der für Ihr eigenes Unternehmen am relevantesten ist, die Liste überfliegen, bis Ihnen etwas ins Auge fällt, oder alle Beispiele für progressive Webanwendungen durchlesen, um sich einen guten Überblick zu verschaffen!

Kommen wir zu unseren 50 besten PWA-Beispielen.

E-Commerce und Einzelhandel

Starbucks

Für eine der weltweit beliebtesten Kaffeeketten hat Starbucks seine PWA entwickelt, um die Kundenbindung durch Treueprogramme und einen einfacheren Bestellprozess zu steigern.

Die App wurde entwickelt, um ihre alte mobile App zu ersetzen, um das Engagement unabhängig vom Gerät besser aufrechtzuerhalten.

Benutzer können zunächst den Bereich Prämien anzeigen, in dem Kunden ihre kostenlosen Speisen und Getränke, Geburtstagsleckereien, Nachfüllungen und Zahlungsoptionen einlösen können, wenn sie über ihr Smartphone bestellen.

Der Rest der App-Seite enthält benutzerdefinierte Bestellungen, die Verfügbarkeit von Geschäften, Lieferdetails und das App-Menü.

Und genau wie bei der Bestellung bei einem Barista können Sie bei der Bestellung Ihres Lieblingsgetränks Größe, Add-Ins und Shot-Optionen anpassen. Starbucks fügt außerdem Abschnitte zu Nährwertangaben, Zutaten und Allergenen für diejenigen hinzu, die ihre Ernährung überwachen.

Was uns an dieser E-Commerce-PWA gefällt:

• Funktioniert auch bei schwachen Netzwerkverbindungen gut
• Vollständig integriert mit anderen Plattformen und Diensten anderer Marken wie Spotify, Lyft und Ford
• Nahtlose mobile Zahlungs- und Checkout-Prozesse
• Extrem benutzerfreundliches Design

Jumia

Was Alibaba für China ist, ist Jumia für Afrika. Dieser erfolgreiche Online-Marktplatz wurde erstmals 2012 in Nigeria eingeführt und hat seitdem schnell die afrikanische E-Commerce-Branche erobert.

2016 startete es seine PWA als Antwort auf die instabilen Internetverbindungen in der Subsahara-Region. Mit PWA war es in der Lage, einen bedeutenden Teil des Marktes zu erobern, der sich auf 2G-Netze mit Datenobergrenzen stützte.

Die Einführung einer PWA war die perfekte Lösung, um eine App-ähnliche Benutzererfahrung bereitzustellen, ohne große Datenbandbreite zu verbrauchen.

Das Ergebnis? Laut Google hat das Unternehmen seine Konversionsrate um 33 % gesteigert und seine Nutzerzahl um das Zwölffache gesteigert (im Vergleich zu nativen Apps). Darüber hinaus hat es die Absprungrate und die Speicheranforderungen der Benutzergeräte enorm reduziert.

Was uns an dieser E-Commerce-PWA gefällt:

• Zuverlässiger Offline-Zugriff
• Schnelle Suchfunktion
• Schneller Ladevorgang
• Einfache Installation

OLX.in

Wenn es um PWA für Online-Marktplätze geht, vertrauen Sie dem indischen Kleinanzeigenunternehmen OLX.in. Mit seinen robusten Kategorien, die von Immobilien bis hin zu Mode reichen, sind Verkäufer und Käufer besser auf die PWA des Unternehmens abgestimmt.

Benutzer können die Benutzerfreundlichkeit der App leicht bemerken, wenn sie nach bestimmten Produkten suchen oder tolle Angebote von Verkäufern erhalten.

OLX gab bekannt, dass es seit der Umstellung auf PWA eine höhere CTR für seine Anzeigen und einen enormen Rückgang der Absprungraten um 80 % verzeichnet hat, wie von Google berichtet.

Was uns an dieser E-Commerce-PWA gefällt:

• Push-Benachrichtigungen auch im Offline-Modus
• Einfache Kameraintegrationsfunktion für Verkäufer
• Suchverlaufsfunktion

Flipkart

Ein weiterer Konkurrent in der indischen E-Commerce-Szene ist Flipkart, der das Online-Einkaufserlebnis mit seiner PWA immer wieder neu definiert.

Wenn Benutzer durch die App nach unten scrollen, werden Produktkategorien, begrenzte Angebote, Bestseller und Rabatte präsentiert, mit dem Ziel, den Kunden dazu zu bringen, in der App zu stöbern und mehr Zeit damit zu verbringen.

Flipkarts PWA begann 2015 durch Flipkart Lite. Das Unternehmen wollte das Einkaufen für Inder zugänglicher machen, auch wenn die Internetverbindungen in den meisten Gebieten zeitweise unterbrochen waren.

Was uns an dieser E-Commerce-PWA gefällt:

• Push-Benachrichtigungen für die neuesten Nachrichten und Updates sind konsistent
• Der Online-Kaufprozess wird optimiert
• Die Suchfunktion ist genau

Reine Formeln

In der Erkenntnis, dass der Markt für Nahrungsergänzungsmittel wettbewerbsintensiver denn je geworden ist, gilt das in den USA ansässige Unternehmen Pure Formulas als Pionier in dieser Branche, wenn es um die Einführung einer eigenen PWA geht.

Nachdem das Unternehmen festgestellt hatte, dass seine Website und mobile App aufgrund eines schleppenden Checkout-Prozesses unter sehr hohen Absprungraten litten, entwickelte es eine PWA, die ihnen eine vollständige Wende ermöglichte.

Es wurden höhere Conversions und ein Anstieg des durchschnittlichen Bestellwerts (AOV) gemeldet.

Was uns an dieser E-Commerce-PWA gefällt:

• Sehr bequemer Bestellvorgang
• Minimalistisches Design
• Sehr geringe Gerätespeicheranforderungen
• Hochsichere Transaktionen

AliExpress

Mit einer reaktionsschnellen PWA gilt Ali Express heute als eine der gefragtesten Apps für B2C-Transaktionen.

Dank der breiten Abdeckung der Produktkategorien des Unternehmens können Benutzer mit der PWA Tausende von Optionen durchsuchen, ohne das Laden der Seite zu verlangsamen.

Seit seiner Einführung hat AliExpress angekündigt, dass es dank seiner PWA bessere Re-Engagements und Conversion-Statistiken erlebt hat.

Was uns an dieser E-Commerce-PWA gefällt:

• Einfache Produktnavigation
• Schnellere Ladezeit
• Benutzerfreundliches Layout

Alibaba

Die Alibaba Group von Jack Ma muss nicht weiter vorgestellt werden, wenn es um den Erfolg ihrer Alibaba PWA geht. Die B2B-E-Commerce-App ist ein ideales Modell für jede PWA: schnell, reaktionsschnell, leicht und sehr ansprechend.

Alibaba war in Bezug auf die Einführung seiner mobilen Web- und mobilen App erfolgreich. Es musste jedoch durch verbessertes Engagement einen großen Teil des Marktes erobern. Und die PWA des Unternehmens war die perfekte Lösung dafür.

Laut Google wurde eine Steigerung der Gesamtkonversionen um 76 % gemeldet.

Was uns an dieser E-Commerce-PWA gefällt:

• Einfache Produktnavigation
• Integration mit den Tools der Website wie Feeds, Messenger und Mein Alibaba-Konto
• Schnellere Ladezeit

Ziel

Um nicht von ihren Konkurrenten übertroffen zu werden, hat Amerikas achtgrößte Einzelhandelskette Target schnell auf ihre Kundenanalysestudie reagiert. Im Jahr 2015 entdeckte es, dass seine Kunden ihre Reise auf ihrem Mobilgerät beginnen und dann den Kauf über ihren Computer tätigen.

Das Management dachte an die Einführung einer PWA und seitdem sind die App-Benutzer enorm gestiegen und die Online-Transaktionen haben sich erheblich verbessert, ohne die Benutzer auf verschiedenen Geräten zu entfremden.

Was uns an dieser E-Commerce-PWA gefällt:

• Einfache Add-to-Cart-Option
• Schnelles Laden von Bildern unabhängig von der Größe

Walmart

Für ein nahtloses App-Erlebnis trifft die PWA von Walmart gerade die lange Checkliste eines App-Entwicklers. Mit Tausenden von Produktangeboten ist der Einzelhandelsriese in der Lage, Online-Käufe und Abhol-/Lieferoptionen für jede Transaktion zu integrieren.

Seine Geo-Tracking-Funktion überwacht die meistverkauften Artikel in der Umgebung des Benutzers, wodurch die App Empfehlungen basierend auf einer solchen Liste anbieten kann.

Schließlich ermöglicht der effektive Einsatz von Push-Benachrichtigungen dem Unternehmen, seine treue Fangemeinde mit hervorragenden Angeboten und neuen Funden bekannt zu machen.

Was uns an dieser E-Commerce-PWA gefällt:

• Feedback-Bereich
• Geo-Tracking-Funktion
• Sehr reaktionsschnelle Oberfläche
• Nahtlose Leistung in instabilem Netzwerk

Macys

Die High-End-Einzelhandelsmarke Macy's hatte bei der Einführung ihrer PWA ein Ziel vor Augen: ihren Millionen von monatlichen Besuchern das beste Erlebnis zu bieten.

In Anbetracht des Wachstums seiner App-Benutzer war die PWA des Unternehmens eine willkommene Ergänzung zu seinen Verbraucher-Tools, um seine Käufer über die Neuigkeiten in den Ladenregalen auf dem Laufenden zu halten.

Was uns an dieser E-Commerce-PWA gefällt:

• Zuverlässiges Store-Finder-Tool
• Organisiertes Produktlayout

Lancôme

Die französische Luxuskosmetikmarke Lancome stieß bei ihren Online-Verkäufen auf ein Hindernis: Die Zahl der mobilen Nutzer stieg, aber die Conversions gingen zurück.

Um das Problem zu verstehen, untersuchte das Unternehmen das Kundenverhalten und fand heraus, dass sie eine schreckliche Benutzererfahrung mit der mobilen App hatten.

Die Marke wechselte zu PWA, um die Ladezeit zu verkürzen und die App leicht zugänglich zu machen. Laut Google trugen Push-Benachrichtigungen 12 % zu Conversions bei und mobile Sitzungen stiegen auf 51 %.

What we like about this eCommerce PWA:

• Fast search results
• Easy navigation

News

Financial Times

The Financial Times PWA is considered as one of the best PWAs in the news industry. Covering business and global markets, the app takes a similar look and feel of the paper with its traditional salmon-colored background.

The publication is one of the first news sites to abandon its native app and transition to a PWA. It works well even on slow networks, making news easily accessible for business people on the go.

What we like about this News Publisher PWA:

• Reliable offline
• Very fast loading time
• Real-time updates on content
• Seamless video content experience

Infobae

This Buenos Aires-based news website has proven to be successful in the PWA scene thanks to its Spanish readers. According to Google, the Latin American audience contributed to three times more page views compared to its old mobile site, and spent more sessions on the app as well.

Infobae switched from its mobile site to PWA in 2017 to improve the speed of access among its mobile users. This was influenced by the huge drop in session duration (3 minutes on mobile compared to 27 minutes on desktop).

What we like about this news publisher PWA:

• Very fast loading time
• High-quality visuals loading seamlessly
• Easy navigation

Nau.ch

One of Switzerland's leading news websites became extremely popular when it began flashing content in public areas such as terminals and petrol stations.

Nau (an abbreviation for “new”) was founded in 2007 with the goal of prominently displaying news in public transport to reach millions of commuters on their daily route.

To improve its reach, the company launched its PWA and has achieved 400 times more installations than its old mobile site in the first two days.

What we like about this news publisher PWA:

• Impressive user interface
• Easy navigation
• Content loads much faster relative to other news-related PWAs

Nikkei

Regarded as the world's largest financial newspaper (more than 3 million in daily circulation), Nikkei launched its PWA in 2017 with the goal of reducing load time, improve reader interaction and boost engagement.

Realizing that their website was not mobile-friendly (even taking more than 20 seconds to be fully interactive), the company assembled a team of five front-end engineers who worked on launching a PWA.

The result was truly impressive: improved loading speed, higher interactivity as well as better user experience with offline support according to Google.

What we like about this news publisher PWA:

• Prefetch feature (instant page navigation)
• Preloaded key requests
• Optimized JavaScript bundles
• Optimized images
• Enabled HTTP caching

The Washington Post

As a global authoritative news organization, The Washington Post has released one of the most responsive PWAs to reach out to a wider audience on mobile.

Launched in March 2016, the paper's goal is to provide “frictionless, uninterrupted reading.” This comes after its readers expressed their concerns over slow load times on its old mobile app.

With more than 1,000 articles published daily, they have announced that an 88% improvement in load times was initially observed. This has contributed to an increase in retention rate and longer readership according to Google.

What we like about this news publisher PWA:

• Fast loading time
• Real-time live updates
• Same look and feel as the website

Mittel

With social journalism becoming a necessity for readers and publishers alike, Medium has made a mark in the online publishing industry with its 120 million readers.

Medium's initial goal in 2012 was to reinvent the blogging platform through small stories that matter to any type of audience.

Now that it has grown into subscription-based service, its loyal users can follow exclusive content and audio narrations through its PWA even when working offline.

What we like about this news publisher PWA:

• Reaktionsschnell
• Seamless functionality even on an unstable connection

Wired

When tech publisher Wired launched its PWA in 2017, its main objective was to increase its app's page speed and reach out to its 11 million users.

And true enough, it did. Not only did it result in higher readership but also more impressions per session, leading other Conde Nast publications to follow suit through what its chief of technology refers to as Alien Web Apps (AWA).

What we like about this news publisher PWA:

• Fast loading time
• Highly responsive
• Reliable background caching

Forbes

With almost a 50% lift in sessions, triple the rise in scroll depth and 100% boost in engagements according to Google, Forbes has definitely reaped the benefits of launching its fully functional PWA in 2017.

Its Chief Product Officer, Lewis Dvorkin, wanted a no-friction experience for its users to have content served to their devices the way they want.

In addition, Dvorkin states that the more people stay longer on their app, the more they view ads, thanks to increased personalization that yields better engagement.

What we like about this news publisher PWA:

• Stunning visual content
• Fast loading times
• Unique number of readers infographic

The Guardian

To make its online content more accessible, UK's leading news and media outlet, The Guardian, launched its PWA in 2017.

The app features high-quality images, interactive multimedia, and thousands of new content without compromising loading time and user experience.

The company also created a US-based innovation team called The Guardian Mobile Innovation Lab, which operated from 2015 to 2018, which explored mobile tools and chat apps to improve user experience.

What we like about this news publisher PWA:

• Customizable sections
• News alert feature
• Offline access

Sports Mole

Sports fans – football, F1, tennis, rugby, cricket, golf and even snooker – are able to enjoy Sports Mole's website features right in their own devices through the site's PWA.

Video clips, real-time scores and game schedules are just some of the exciting features in the PWA.

The result of this move led to higher readership rate and increased session time on the app.

What we like about this news publisher PWA:

• Search functionality
• Seamless video playback
• Real-time updates
• No lag on page transitions

The Weather Channel

Since the 1980s, The Weather Channel has been a trusted companion by travelers and households when it comes to providing an average of 40 billion daily weather forecasts.

While its previous native app was used by half of its total users through mobile web, the company found out that there are still users who don't enjoy reliable connections or are not equipped with advanced smartphones.

Through its PWA, The Weather Channel is able to cater to millions of its global users in 62 languages. Google reports that it has improved its page load time by 80% through the app.

What we like about this news publisher PWA:

• Search functionality
• Multiple language availability
• Push notifications

MyNet

Offering a wide range of content from news to sports, travel to education, and weather to finance, MyNet is one of Turkey's largest web portals.

Its old mobile site was plagued with complaints, most especially very slow loading speed. This led the company to develop a PWA to deliver fast and a highly engaging website.

Google reports that introducing PWA to MyNet's readers influenced a 15% rise in average views per session and a 23% drop in bounce rate.

What we like about this news publisher PWA:

• Echtzeit-Updates
• Suchfunktion

Verzeichnis

Kopa

Früher bekannt als PadPiper, ist Kopa ein Marktplatz für möblierte Wohnungen und Mieter. Es bietet eine Überprüfung sowohl für Mieter als auch für Vermieter, sodass der Abgleich sicherer ist.

PadPiper startete seine PWA ursprünglich, um Schülern zu helfen, während des Schuljahres oder nach Beginn ihres Praktikums eine geeignete Unterkunft zu finden. Es wurde auch daran gedacht, die Gelegenheit zu nutzen, Studenten zu verbinden und herauszufinden, wer in ihrer Nähe arbeitet, um einfachere Mitbewohner-Matches zu ermöglichen.

Was uns an dieser Verzeichnis-PWA gefällt:

• Schnelle Suchergebnisse
• Miethosting-Funktionen
• Minimalistisches Design

Miete

Dieser Mietmarkt für Kameras und Haushaltsgeräte ist eine Lösung für diejenigen, die solche Artikel vorübergehend benötigen.

Benutzer geben online eine Bestellung auf und warten auf den Versand des Artikels am selben Tag. Nach Ablauf der Mietzeit muss der Nutzer den Artikel entweder zurückgeben oder sich für den Kauf entscheiden.

Die PWA von Rentio (auf Japanisch oder Englisch) bietet eine einfach zu navigierende Benutzeroberfläche, schnelle Suchergebnisse, viele Kategorien und eine schnelle Reaktionszeit.

Was uns an dieser Verzeichnis-PWA gefällt:

• Suchfunktionen
• Schneller Transaktionsprozess
• Bequeme Navigation

Joppy

Als Rekrutierungsplattform für Entwickler richtet sich Joppy an Unternehmen auf der Jagd nach Talenten und an einige der besten Bewerber für Stellenangebote im technischen Bereich.

Diese Plattform konzentriert sich darauf, die Präferenzen der Bewerber mit den Anforderungen der Personalvermittler abzugleichen. Doch anders als in anderen Online-Jobbörsen können Jobsuchende ihr Profil anonymisieren, damit sie niemand mit unaufgeforderten Angeboten belästigen kann.

Die PWA von Joppy ist eindeutig sowohl für Personalvermittler als auch für Bewerber (die sich hauptsächlich in Barcelona befinden) konzipiert, um den Bewerbungsprozess effizienter zu gestalten.

Was uns an dieser Verzeichnis-PWA gefällt:

• Schnelle Reaktionszeit
• Schneller Matching-Prozess

OpenRent

Die Suche nach einem britischen Mietimmobilienmarkt kann ohne das richtige Online-Tool Kopfschmerzen bereiten. Mit der PWA von OpenRent können Mieter und Vermieter bequem nach dem Passenden suchen, wenn es um verfügbare Immobilien geht.

Die PWA bietet schnelle Reaktionszeiten und Aktualisierungen in Echtzeit. Dies ist für die Website von entscheidender Bedeutung, da OpenRent Angebote entfernt, sobald sie vermietet sind, um Geisteranzeigen zu vermeiden, die potenzielle Mieter frustrieren.

Was uns an dieser Verzeichnis-PWA gefällt:

• Ergebnisfilterfunktion
• Einfaches Hinzufügen von Eigentum
• Schnelle Reaktionszeit

Autoverkäufe

Für einen Online-Automarkt auf PWA bietet Carsales, eines der beliebtesten Ziele von Autokäufern in Australien, seinen Benutzern viel Komfort.

Käufer können Autos basierend auf Karosserietyp, Marke, Preis und Sonderangeboten suchen. Verkäufer hingegen können eine Bewertung ihres Autos anfordern, und Carsales kümmert sich um den Rest.

Die PWA bietet auch Expertentipps durch Bewertungen, Empfehlungen und Ratschläge zur Pflege Ihres Autos.

Was uns an diesem Verzeichnis PWA gefällt :

• Tolle Mobile-First-Erfahrung
• Reagiert auf jede Bildschirmgröße
• Einfache Offline-Erfahrung

Carigami

Carigami ist ein französischer Automakler, der Anbieter und Mieter zusammenbringt. Die PWA bietet zuverlässige Preisvergleiche von Autos gemäß den Suchpräferenzen des Benutzers nach Stadt, Alter des Fahrers, Datum und Uhrzeit.

Die App liefert innerhalb von Sekunden Suchergebnisse mit allen Details zu jeder Autovermietung.

Was uns an dieser Verzeichnis-PWA gefällt:

• Schnelle Ladezeit
• Genaue Suchergebnisse
• Suchfilter

Scheinen

Shine ist Indiens zweites Top-Jobportal, das 2008 gegründet wurde. Es bringt Kandidaten mit mehr als 15.000 Unternehmen in einer Vielzahl von Branchen zusammen.

Seine PWA ist eine der besten für eine Job-Matching-Site. Beispielsweise kann die Suche nach bestimmten Jobs einfach nach Fähigkeiten, Bezeichnung, Abteilung, Branche, Standort und Ausbildung gefiltert werden.

Jobbenachrichtigungen werden auch nahtlos an das Gerät eines Benutzers geliefert.

Was uns an dieser Verzeichnis-PWA gefällt:

• Mitteilungen
• Voll zugänglich
• Benutzerdefinierte Offline-Seite

Sozial oder Gemeinschaft

Tinder

Als Tinder den Dating-Szene-Markt störte, haben viele Benutzer die App wegen ihres innovativen Ansatzes für das Matchmaking geliebt.

2017 investierte das Unternehmen nach drei Monaten Entwicklungszeit in eine eigene PWA. Die Vorteile wurden sofort beobachtet. Erstens konnte es seine Dateninvestition von 30 MB auf seiner nativen App auf nur 2,8 MB auf der PWA reduzieren.

Es berichtete auch über schnelleres Laden von Seiten und besseres Engagement der Benutzer (in Bezug auf Wischen, Messaging, Kauf und Ausgabensitzungen).

Was uns an dieser sozialen PWA gefällt:

• Mitteilungen
• Benutzerfreundlichkeit
• Optimierte Performance (routenbasiertes Code-Splitting)

Pinterest

Drei Monate lang baute Pinterest, die beliebte Bild-Sharing- und Social-Media-Plattform, eine PWA auf, um ihre internationale Nutzerbasis zu erweitern. Laut Google reichte die Größe der PWA von 150 KB im Vergleich zu ihrer alten mobilen Website mit 650 KB aus, um ihre Benutzer zu beeindrucken.

Pinterest-Abonnenten können jetzt auch nur 5,6 Sekunden warten, bis die Benutzeroberfläche verwendet werden kann, verglichen mit den vorherigen 23 Sekunden bei der vorherigen mobilen App.

Die ersten Ergebnisse des Übergangs zu PWA waren vielversprechend: Mehr als 40 % mehr Zeit, die mit der App verbracht wurde, nutzergenerierte Anzeigen stiegen um 44 %, Anzeigenklicks stiegen um 50 % und Kerninteraktionen verbesserten sich um 60 %.

Was uns an dieser sozialen PWA gefällt:

• Mitteilungen
• Geringe Bandbreitennutzung
• Beeindruckende Offline-Unterstützung

Telegramm

Telegram störte den Instant Messaging-Dienst im Jahr 2013, indem es ein Cloud-basiertes Tool bereitstellte, das mit verschiedenen Geräten kompatibel ist.

Zum jetzigen Zeitpunkt verlassen sich mehr als 400 Millionen monatlich aktive Benutzer auf diesen plattformübergreifenden sicheren Dienst, um Textnachrichten, Fotos, Videos und Audiodateien auszutauschen.

Als seine PWA eingeführt wurde, um dieselbe Funktionalität wie seine native mobile App bereitzustellen (jedoch in einer kleineren Größe), meldete das Unternehmen einen Anstieg der Sitzungen pro Benutzer sowie der Verweildauer um 50 %.

Was uns an dieser sozialen PWA gefällt:

• Installierbar auf iOS und Android
• Offline-Unterstützung
• Manifest

Twitter

Eine der frühesten PWAs, die eingeführt wurden, stammt von Twitter mit der Twitter Lite PWA bereits im Jahr 2017. App-Entwickler nutzten sie später als Modell für die Integration von Web- und nativen App-Funktionen in eine idealere App für Mobilgeräte.

Laut Google bestand das Ziel der PWA darin, das Re-Engagement der täglich 250.000 Nutzer zu verbessern, die ihre Konten durchschnittlich viermal täglich überprüfen.

Durch die Verringerung des Datenverbrauchs, die Verbesserung des sofortigen Ladens (5 Sekunden über ein 3G-Netzwerk) und die Verbesserung der Benutzerinteraktion meldete das Unternehmen eine 65-prozentige Steigerung der Seitenaufrufe pro Sitzung, eine 75-prozentige Zunahme der gesendeten Tweets und einen 20-prozentigen Rückgang der Absprungrate .

Was uns an dieser sozialen PWA gefällt:

• Browseroptimiert (routenbasiertes Code-Splitting)
• Weniger Bandbreitenverbrauch
• Schnelle Updates

Instagram

Instagram folgte der Strategie von Twitter, eine PWA anzubieten, sobald dessen App veröffentlicht wurde. Anfang 2020 aktualisierte Instagram auch seine Windows 10-App, um eine PWA mit Direktnachrichten zu sein.

Während die native App noch vermarktet wird, bietet die Website im mobilen Browser eines Geräts die gleiche Funktionalität und Benutzererfahrung. Benutzer erhalten die gleichen Funktionen, die sie seit langem von der Desktop- und mobilen App genießen.

Was uns an dieser sozialen PWA gefällt:

• Mitteilungen
• Sofortige Ladezeit
• Schnelle Antwort

Reisen und Buchen

Airbnb

Airbnb ist eine Online-Plattform, die bequeme Vorkehrungen für die Anmietung und touristische Erlebnisse auf der ganzen Welt bietet. Im Jahr 2008 begann das Unternehmen, Hausbesitzer, die ihre zusätzlichen Zimmer vermieten wollten, mit Reisenden zusammenzubringen, die nach erschwinglichen Unterkünften suchten.

Zehn Jahre später wurde die PWA aktualisiert, damit sie gut mit Edge auf Windows 10 Mobile funktioniert. Das Ergebnis sind nahtlosere, sofortige Seitenübergänge für Kunden. Bis heute gibt es monatlich mehr als 80 Millionen Besucher auf Airbnb, von denen die meisten die App nutzen.

Was uns an dieser PWA gefällt:

• Mitteilungen
• Schnelle Antwort
• Hochwertige Bilder, die innerhalb von Sekunden geladen werden

Baumbo

Ein weiterer Marktführer in der Online-Buchungsbranche ist Treebo, eine Hotelreservierungsplattform. Mit einer Auswahl an Unterkünften in mehr als 165 Städten in Indien können Benutzer die Auswahl vergleichen, um die besten Angebote zu erhalten.

Laut Google lädt seine PWA in nur vier Sekunden über das 3G-Netzwerk. Die Website berichtet auch, dass sie fünfmal mehr Klicks erzielt und ihre Konversionsrate um das Dreifache gesteigert hat.

Was uns an dieser PWA gefällt:

• Serverseitiges Rendern
• Schnelle Interaktivität
• Progressives Rendering (HTML-Streaming)

Wir gehen

Als größte reisebezogene Website im asiatisch-pazifischen Raum und im Nahen Osten bezeichnet, hat Wego bei der Entwicklung seiner PWA das Verhalten seiner Verbraucher berücksichtigt.

Da sich die meisten Reisenden zum Speichern von Fotos auf ihre Telefone verlassen, kann der Speicherplatz schnell knapp werden. Darüber hinaus kann das Reisen an verschiedene Orte mit langsamen und instabilen Internetverbindungen frustrierend sein.

Um seinen Benutzern die bequeme Buchung von Hotelzimmern und Flügen zu ermöglichen, wurde eine PWA entwickelt. Wego gab bekannt, dass es laut Google seine Seitenladezeit von 12 Sekunden auf knapp drei Sekunden reduziert hat.

Was uns an dieser PWA gefällt:

• Extrem schnelle Reaktion
• Minimalistisches Design
• Genaue Suchergebnisse
• Leicht

MakeMyTrip

MakeMyTrip, eines der führenden Online-Reisebüros Indiens, schloss sich dem PWA-Zug an, um seine 8 Millionen monatlichen Besucher besser zu bedienen.

Nach dem Erfolg seiner nativen App stellte das Unternehmen fest, dass eine begrenzte Konnektivität im Land mit Datenbeschränkungen auf minderwertigen Smartphones den Benutzerzugriff sehr frustrierend machen kann.

Darüber hinaus stellte es fest, dass Besucher mehr Zeit auf ihrer Website verbrachten als in ihrer nativen App. Die Replikation der gleichen Erfahrung ist daher für Mobiltelefonbenutzer von entscheidender Bedeutung.

Das Ergebnis ist laut Google eine satte Steigerung der Kundensitzungen um 160 % und ein Rückgang der Absprungrate um 20 %. Darüber hinaus war es wahrscheinlich, dass Erstkäufer dreimal mehr Conversions erzielten als diejenigen, die zuvor die native App verwendet hatten.

Was uns an dieser PWA gefällt:

• Einfache Navigation
• Installierbar auf jedem Betriebssystem
• Schnelle Ladezeit

Reisestart

Jumia nutzte den Erfolg seines Online-Marktplatzes und wagte sich mit Jumia Travel in die Reisebranche. Seine PWA war laut Google maßgeblich daran beteiligt, den Traffic um das Zwölffache und die Konversionsraten um 33 % zu steigern.

Jumia Travel wurde dann 2019 von Travelstart übernommen, um eine der größten Plattformen in der Reisebranche zu schaffen. Die mobilen Benutzer von Jumia Travel werden sogar auf der PWA zu Travelstart weitergeleitet, wo sie Flüge, Hotelunterkünfte und Mietwagen buchen können.

Was uns an dieser PWA gefällt:

• Schnelle Ladezeit
• Einfache Schnittstelle

Trivago

Um seinen 120 Millionen Besuchern im Monat gerecht zu werden, hat das deutsche Technologieunternehmen Trivago seine PWA gestartet, um mehr Benutzern zu helfen, Hotelpreise zu suchen und zu vergleichen, bevor sie eine Reise antreten.

Die App deckt fast 200 Buchungsseiten ab und arbeitet schnell bei der Generierung von Preisvergleichen. Benutzer können auch bequem die Trivago-Karte und echte Hotelbewertungen verwenden und auf frühere Suchen verweisen, um Zeit und Bandbreite zu sparen.

Die PWA wurde von mehr als einer halben Million Nutzern aus 55 Ländern zu ihren Startbildschirmen hinzugefügt, was laut Google-Bericht zu einer Steigerung der Interaktionen um 150 % und der Klicks auf Hotelangebote um 97 % führte.

Was uns an dieser PWA gefällt:

• Installierbar auf Android und iOS
• Hervorragende Offline-Unterstützung
• Schnelle Antwort
• Suchfilter
• Mehrsprachige Unterstützung

Über

Die PWA von Uber ist heute eine der einzigartigsten Apps. Das Ride-Hailing-Unternehmen platzierte seine Windows 10-App 2018 hinter den Kulissen zugunsten der PWA, die erstmals im Juli 2019 eingeführt wurde.

Im Vergleich zu seiner nativen mobilen App nimmt die PWA von Uber nur 50 KB Speicherplatz ein. Es wird sehr schnell geladen, was es so praktisch macht, wenn Sie in einem Gebiet mit schwachem Netzwerk festsitzen.

Je nach Standort bietet Uber Ride-Hailing-Dienste, Essenslieferung, Fahrrad- und Motorrollerverleih und Mitfahrgelegenheiten in der Luft per Fingertipp auf dem Mobilgerät an.

Was uns an dieser PWA gefällt:

• Schnelle Ladezeit
• Offline-Unterstützung
• Leicht
• Extrem schneller Buchungsprozess

Lyft

Ubers Konkurrent Lyft, der 2012 gegründet wurde, hat seine Fahrer- und Fahrerbasis in den Vereinigten Staaten und Kanada erweitert.

Mit günstigeren Tarifen (in Bezug auf einen Abonnementplan für Vielfahrer) hat das Unternehmen einen riesigen Marktanteil erobert, der einst von Uber dominiert wurde. Es führte seine PWA im Jahr 2016 ein

Für neue Benutzer bietet die PWA einen einfachen Registrierungsprozess sowie Buchungsdienste, für die ihre native App bekannt ist.

Was uns an dieser PWA gefällt:

• Schnelle Reaktionszeit
• Zuverlässige Echtzeit-Updates

Tajahal

Tajawal ist eine sehr beliebte Flug- und Hotelbuchungs-App in den Vereinigten Arabischen Emiraten und bietet Komplettlösungen für den Zugang zu mehr als 450 Fluggesellschaften und Tausenden von Hotels für Reisende.

Die PWA arbeitet sehr schnell und bietet einfache Buchungslösungen durch einen vereinfachten Prozess. Die Schnittstelle ist unkompliziert und konzentriert sich hauptsächlich auf Reservierungen.

Was uns an dieser PWA gefällt:

• Sehr schnelles Laden der Seite
• Gesicherte Transaktionen

FlyWeekend

Dieses einzigartige Reisebuchungsunternehmen wurde 2017 in Amsterdam gegründet. Das Ziel ist es, den Benutzern nur Wochenendreiserouten anzubieten, damit sie in ein Flugzeug steigen und einen zweitägigen Rückzug auf der Grundlage der Empfehlung des Systems erleben können.

FlyWeeked-Benutzer geben einfach ihren aktuellen Standort ein und wählen ein Wochenende aus, an dem sie eine Pause machen möchten. Dann stellt das System eine Liste anklickbarer Städte bereit, die der Benutzer „wegwischen“ kann, wenn er nicht interessiert ist, oder stattdessen die Reise buchen kann.

Die PWA ist einfach zu bedienen, was aufgrund des einzigartigen Konzepts ein höheres Engagement garantiert.

Was uns an dieser PWA gefällt:

• Schnelle Reaktionszeit
• Schnelles Laden der Seite

Cooler Cousin

Der Besuch eines fremden Landes kann spannender werden, wenn ein Einheimischer, der Ihre Interessen teilt, Sie während Ihrer Reise führen kann. Mit Cool Cousin können Besucher auf ihrer benutzerfreundlichen Plattform vertrauenswürdige lokale Stadtführer auswählen.

Die sogenannten „Cousins“ reichen von Chirurgen bis zu Musikern, aber alle teilen die gleiche Leidenschaft, Touristen in ihrer Heimatstadt zu beherbergen.

Seine PWA wurde 2018 eingeführt, um seinen Benutzern ein schnelleres und reibungsloseres Zugriffserlebnis zu bieten. In ihrem offiziellen Update gab das Unternehmen bekannt, dass die App die Ladezeit um 25 % verkürzt und den Zugriff der Benutzer auf andere Online-Quellen verringert hat.

Was uns an dieser PWA gefällt:

• Schnelle Reaktionszeit
• Einfache Navigation

Unterhaltung

Schallschnitt

Das Erlernen des Gitarren-, Klavier-, Saxophon- oder Banjospiels wird jetzt mit Soundslice erleichtert, einer App, die Musiknotation mit echtem Audio synchronisiert.

Die PWA von Soundslice ist perfekt für Selbstlernsitzungen mit einem mobilen Gerät. Es ermöglicht einem Benutzer, die Tonhöhe zu ändern, Abschnitte zu loopen und die Musik zu notieren. Andererseits können Musiklehrer mit dem Tool interaktive Sitzungen entwickeln.

Sample-„Slices“ ermöglichen es Benutzern, das Audio abzuspielen, begleitet von einer sich bewegenden vertikalen Linienführung auf dem Notenblatt.

Was uns an dieser PWA gefällt:

• Interaktives Design
• Schnelle Ladezeit

Spotify

Für den digitalen Musik-Streaming-Dienst Spotify ist die Nutzung einer Light-App über PWA ein Muss, um mehr Abonnenten zu gewinnen.

Die Desktop- und mobile App von Spotify werden in der PWA repliziert, sodass die Zuhörer den gleichen Komfort auch beim Offline-Hören erhalten. Die PWA wird viel schneller geladen und die Hintergrundfarben passen sich für eine persönlichere Note an die Albumgenres an.

Was uns an dieser PWA gefällt:

• Adaptive Benutzeroberfläche
• Offline-Unterstützung
• Interaktives Design

1Tuner

Entgegen der landläufigen Meinung ist das Radio nicht tot. Mit 1Tuner kann jeder Benutzer Radiosender (überall auf der Welt) und Podcasts hören.

Sie können sogar Wiedergabelisten erstellen, damit sie es nicht verpassen, Sendungen aus Brasilien oder Top-Tracks zu hören, die auf lokalen Londoner Sendern gespielt werden.

Die PWA funktioniert auch einwandfrei. Wenn Sie einen bestimmten Radiosender auswählen, können Sie die Sendung in Echtzeit hören. Podcasts hingegen werden in hervorragender Audioqualität geliefert.

Was uns an dieser PWA gefällt:

• Anpassbares Thema
• Riesige Anzahl von Inhaltsempfehlungen

9GAG

Seit dem Start von 9GAG war Online-Humor nie mehr derselbe. Mit Internet-Memes, Videos und Bildern, die von Benutzern auf der ganzen Welt geteilt werden, ist die Website zu einer Quelle der Unterhaltung geworden.

Es stellte sich jedoch schnell heraus, dass das Laden der alten nativen App länger dauerte, insbesondere wenn die Trendinhalte viele Videos enthielten.

9GAG wechselte zu PWA, um die Seitenladegeschwindigkeit zu reduzieren und eine bessere Benutzerinteraktion zu fördern. Die Website enthüllte, dass ihre Benutzer im Vergleich zu ihrer nativen App 25 Prozent länger in der App blieben.

Was uns an dieser PWA gefällt:

• Installierbar auf Android und iOS
• Offline-Unterstützung
• Schnelle Ladezeit

Lotto.de

Die gesammelten Echtzeit-Informationen zu den neuesten Euro-Lotto-Ergebnissen auf dieser PWA sind eine praktische Ressource für Spieler.

Die PWA wird extrem schnell geladen und funktioniert gut mit Low-End-Geräten und bei schlechten Internetverbindungen. Für jeden Lottospieler, der es kaum erwarten kann, die neuesten Ergebnisse zu erfahren, ist diese PWA ein praktischer Begleiter.

Was uns an dieser PWA gefällt:

• Reibungslose Benutzererfahrung
• Verfügbarkeit in Deutsch und Englisch

Zusammenfassung der 50 besten PWA-Beispiele

Hoffentlich haben diese progressiven Web-App-Beispiele einige der wichtigsten Punkte hervorgehoben, die wir in diesem Leitfaden angesprochen haben.

Diese Marken haben in ihre mobile UX investiert und die Vorteile geerntet. Sie können und sollten in ihre Fußstapfen treten und mit einer beeindruckenden progressiven Web-App für Ihr eigenes Unternehmen „mobile first“ gehen. Wir werden Ihnen sagen, wie, aber zuerst werden wir eine Schlüsselfrage beantworten – „Was ist mit nativen Apps?“

Vielleicht haben Sie mit dem Gedanken gespielt, selbst iOS- und Android-Apps zu entwickeln, und sind stattdessen dazu übergegangen, sich PWAs anzusehen. Vielleicht sind Sie nicht so besorgt über die Einführung in den App Stores und möchten einfach eine viel bessere Website.

So oder so – wir werden kurz die Debatte „nativ vs. PWA“ behandeln und erklären, warum wir denken, dass eine PWA das Minimum und eine PWA + native App optimal ist.

Welche Art von App sollten Sie erstellen? Progressive Web-Apps vs. native Apps

Es geht die Vorstellung um, dass progressive Web-Apps und native Apps Rivalen sind. Dass PWAs native Apps irrelevant und unnötig machen. Dass Unternehmen zwischen dem Aufbau einer PWA und einer nativen App wählen und sich immer für letzteres entscheiden.

Diese Erzählung ist fehlgeleitet und stellt native Apps vs. PWAs als Entweder-Oder-Wahl dar, was eine falsche Dichotomie darstellt. Die Wahrheit ist, dass PWAs und native Apps eine brillante Kombination sind und synergetisch zusammenarbeiten. Sie decken sich gegenseitig ab und stellen sicher, dass Sie allen unabhängig vom Kanal ein optimales Benutzererlebnis bieten.

PWAs profitieren von der Reichweite, Auffindbarkeit und Allgegenwärtigkeit des Webs. Sie ziehen organischen Traffic an und beeindrucken Erstbesucher mit einem schnellen und eleganten Erlebnis, das sie davon überzeugt, mehr Zeit (und Geld) auf Ihrer Website zu verbringen. Sie bieten eine einfache Installationsoption, die Reibung und Torwächter reduziert, und können sogar diejenigen ansprechen, die sich Sorgen um begrenzten Gerätespeicherplatz machen.

Sie bieten das perfekte Mittel, um eine Verbindung zu neuen Besuchern aufzubauen, und zu denen, die engagiert genug sind, um zurückzukehren, aber aus irgendeinem Grund nicht genug, um Ihre nativen Apps herunterzuladen. PWAs sind das perfekte Mittel, um Menschen durch Ihren Trichter zu fördern.

Native Apps hingegen haben im Vergleich zu PWAs eine geringe Reichweite und Sichtbarkeit. Sie befinden sich hinter den „Walled Gardens“ der App Stores und erfordern vom Benutzer ein höheres Maß an Engagement, um sie zu installieren und herunterzuladen. Auf der anderen Seite entsprechen sie eher den bestehenden Benutzergewohnheiten, ermöglichen es Ihnen, Push-Benachrichtigungen an iOS-Benutzer zu senden, und können Ihnen die Sichtbarkeit/Präsenz Ihrer Marke in den App Stores steigern.

Native Apps sind großartig für Ihre Stammleser/Kunden/Benutzer. Ihre treueste Basis sollte ermutigt werden, Ihre nativen Apps herunterzuladen und darauf zuzugreifen – sogar hinter einem Anmeldebildschirm oder einer Paywall – damit Sie sie an einem Ort sammeln und sich wirklich darauf konzentrieren können, sie zu verstehen und zu engagieren, LTV und Bindung so weit wie möglich zu maximieren.

Native Apps sind ein großartiges „Zuhause“ für Ihre größten Fans.

Google formuliert es so:

„PWAs müssen native Apps nicht ersetzen; sie können mit ihnen zusammenarbeiten. Einzelhändler können beispielsweise eine native App verwenden, um treue Benutzer zu gewinnen, die eher eine App installieren, aber eine PWA verwenden, um neue Benutzer einfach zu erreichen. Benutzer, die mit der PWA interagieren, können dann aufgefordert werden, die mobile App in Zukunft herunterzuladen.“

Unsere Empfehlung – bauen Sie beides!

Wenn Ihr Budget begrenzt ist, entscheiden Sie sich für eine PWA. Wenn Sie eine native App, aber keine PWA haben, sollten Sie auf jeden Fall so schnell wie möglich eine erstellen. Wenn Sie sich voll und ganz dem Aufbau einer optimalen Mobile-First-UX verschrieben haben und in der Lage sind, in die Erreichung dieses Ziels zu investieren, dann bauen Sie beide und lassen Sie sie die Stärken und Schwächen des anderen ergänzen.

Sie können großartige native Apps mit MobiLoud erhalten, alles, was Sie brauchen, ist eine Website oder Web-App. Kontaktieren Sie unser Team, um mehr zu erfahren!

So erstellen Sie eine progressive Web-App

Der Zweck dieses Leitfadens besteht darin, Ihnen einen vollständigen Überblick über PWAs auf hoher Ebene zu geben. Wir werden uns nicht mit den Feinheiten ihrer Entwicklung befassen, aber wir werden Ihre Optionen aufzeigen, damit Sie selbst die Wahl treffen können.

Im Internet kursieren viele Inhalte darüber, wie Sie in „10 Minuten“ eine PWA erstellen können. Mit dem Versprechen, das native App-Feeling in weniger als einer Stunde von Grund auf in eine traditionelle Web-App zu bringen, ist es leicht, sich von diesen Tutorials verführen zu lassen.

Ist es trotzdem legitim?

Ja und nein. Diese PWA-„Hacks“ dienen auch dazu, die absoluten Mindestkriterien zu erfüllen – HTTPS, Web-Manifest und Service-Worker. Wenn Sie daran interessiert sind, eine sehr einfache, funktionale Progressive-Web-App zu erstellen, können Sie Microsofts PWABuilder ausprobieren. Mit ein bisschen Bastelei und technischem Know-How könnte man da was anständiges zum Laufen bringen.

Um eine einzigartige, optimierte und funktionsreiche progressive Web-App zu bauen, die ihr Potenzial wirklich ausschöpft, müssen Sie mehr investieren. Um zu sehen, warum, lassen Sie uns die grundlegenden Schritte aufschlüsseln.

1. Kaufen Sie ein SSL-Zertifikat, das über Ihren Hosting-Service konfiguriert werden soll
2. Entwickeln Sie eine App-Shell
3. Überprüfen Sie, ob der Browser Servicemitarbeiter unterstützt
4. Registrieren Sie die Dienstarbeitsdatei
5. Fügen Sie Push-Benachrichtigungen und Web-App-Manifest hinzu
6. Richten Sie die Installationsaufforderung ein
7. Testen Sie die Funktionalitäten der App
8. Überprüfen Sie die Checkliste des App-basierten Leuchtturms
9. Fehler beheben
10. Starten Sie die App

Klingt einfach, oder?

Um dies gut zu machen und eine gute benutzerdefinierte progressive Web-App zu erstellen, sind Front-End-Entwickler mit Erfahrung in der Erstellung komplexer Web-Apps erforderlich.

Die lebenswichtige Arbeit des Einrichtens des Service Workers und des Cachings für eine optimale Leistung ist komplex und erfordert echtes Können. Abhängig von Ihren Anforderungen benötigen Sie möglicherweise auch Designer, die die Benutzererfahrung nativer Apps verstehen und wissen, wie Sie diese effektiv im Web anwenden können.

Wenn Sie kein ziemlich großes Unternehmen sind, haben Sie wahrscheinlich nicht viele talentierte Front-End-Entwickler, die herumsitzen und darauf warten, dass Sie ihnen sagen, was sie tun sollen. Sie müssten sie finden, einstellen und ein Team zusammenstellen und sie verwalten – eine schwierige Aufgabe, wenn Sie mit solchen Dingen nicht vertraut sind. Gute Frontend-Entwickler sind ebenfalls immer gefragt, und ihre Vertragsraten spiegeln dies wider.

Kosten und Zeitrahmen für die Erstellung einer progressiven Web-App

Wie viel würde das kosten? Nun, es ist ein bisschen wie der Klassiker „Wie lang ist ein Stück Schnur?“.

Es hängt ganz von der Komplexität der App ab, die Sie erstellen möchten. Laut den Autoren von The PWA Book:

Das Erstellen einer PWA von Grund auf dauert zwischen 3400 Wh (für eine kleine App) und 9000 Wh (ein spezielles Projekt, das wir durchgeführt haben). Dies bedeutet Kosten zwischen 400.000 und 1 Million US-Dollar. Die Nutzung einer Cloud-Plattform wird mindestens 75 % günstiger und die Time-to-Market wird ebenfalls um 75 % kürzer (2-3 Monate statt 8-12 Monate).

– Kapitel 10, Das PWA-Buch

Das scheint teuer zu sein, aber es gibt Ihnen eine Vorstellung davon, wie große Marken wie die, die wir oben betrachtet haben, in ihre Erfahrungen investieren.

Wenn Sie eine Website in eine PWA umwandeln , anstatt sie von Grund auf neu zu erstellen, ist dies natürlich in den meisten Fällen billiger und einfacher. Als grobe Schätzung sollten Sie mindestens 3 Monate und 20.000 bis 50.000 US-Dollar investieren, um ein großartiges Ergebnis zu erzielen.

Entwickler durchlaufen verschiedene Projektphasen, aber in den meisten Fällen umfasst es sieben Phasen: Entdeckung, Design, Überarbeitung, Vorentwicklung, Tests, Fehlerbehebung und endgültige Einführung.

Wenn Ihre PWA komplexer ist, können Sie davon ausgehen, dass ihre Fertigstellung länger dauert, wenn Sie die erweiterten Funktionen berücksichtigen, die integriert werden müssen, wie GPS, Unterstützung für soziale Medien und Kamerazugriff.

Davon abgesehen können einfache PWAs weniger als drei Monate dauern (oder sogar nur ein paar Wochen, wenn es sich um nackte Knochen handelt). Wenn Sie erweiterte Funktionen wie das Backend-Admin-Panel, Visualisierungsmuster und andere Integrationen wünschen, können Sie Ihre PWA immer noch in weniger als sechs Monaten haben.

Dies mag wie eine beträchtliche Menge erscheinen, aber wenn Sie es in einen Kontext stellen, ist es das mehr als wert. Sie sind nicht nur erschwinglicher und schneller zu erstellen als native Apps, sondern die Geschwindigkeit und die verbesserte Benutzererfahrung werden sich auf lange Sicht wahrscheinlich mehr als bezahlt machen.

Wenn Sie WordPress verwenden, gibt es einige einfachere Möglichkeiten, Ihre WordPress-Site in eine PWA umzuwandeln, sowie einige WordPress-PWA-Plugins, die Sie ausprobieren können.

Wir können Ihnen helfen, Sie zu Ihren Optionen zu beraten, und wenn Ihre Website die richtige Wahl ist – nutzen Sie unsere benutzerdefinierte Plattform, um sie in nur 2 Wochen zu einem Bruchteil der Standardkosten in eine PWA umzuwandeln. Wir können auch native iOS- und Android-Apps von Ihrer Website in einem ähnlichen Zeitrahmen erstellen, sodass Sie alle Ihre mobilen Grundlagen für 2021 und darüber hinaus abgedeckt haben!

Wenden Sie sich für eine Beratung an einen unserer mobilen Experten, um mehr zu erfahren.

Es liegt in Ihren Händen – beginnen Sie noch heute mit der Erstellung einer Progressive Web App!

Sie sollten jetzt einen guten Überblick über die Eigenschaften und Leistungsfähigkeit von progressiven Web-Apps haben.

Weitere Informationen finden Sie in diesen Ressourcen:

• Das PWA-Buch
• Google-Ressourcen auf web.dev und Google Developers
• PWA-Statistiken (interessante Kennzahlen und Fallstudien)
• Googles PWA Roadshow (großartige Videoserie)
• Mozillas hervorragende PWA-Richtlinien
• Progressive Web Apps von Jason Grigsby
• Was kann das Web heute? (zeigt, wie sich die Web-Technologie entwickelt hat)
• Ja, dieses Webprojekt sollte eine PWA sein (ausgezeichneter Leitfaden/Artikel)
• Unser Leitfaden zum Unterschied zwischen nativen, Web- und Hybrid-Apps

Jetzt sind Sie dran. Es mag wie eine entmutigende Aufgabe erscheinen – aber Sie müssen Ihre Website in eine progressive Web-App verwandeln, um wirklich eine beeindruckende, moderne und optimale Webpräsenz zu haben.

Wenn es startbereit ist, werden Sie glücklich sein, das garantieren wir. Und Ihre Kunden werden Sie belohnen, indem sie mehr Zeit, Aufmerksamkeit und Geld für die Beschäftigung mit Ihrem Unternehmen aufwenden.

Wie wir jedoch bereits erwähnt haben – eine PWA ist kein Ersatz für native Apps. PWAs sind in erster Linie eine viel bessere Website. Es kann schwierig sein, Benutzer dazu zu bringen, sie auf ihren Geräten zu installieren, da sie noch nicht daran gewöhnt sind, und Sie verpassen das Senden von Push-Benachrichtigungen an iOS-Benutzer und eine Markenpräsenz in den App Stores.

Sollten Sie auch native Apps erstellen ?

Eine PWA ist ein Muss, aber native Apps sind immer noch das ultimative mobile Benutzererlebnis. Der einzige Grund, warum einige die Aussicht auf native Apps misstrauisch oder negativ sehen, sind die hohen Kosten (50.000 $ und mehr) und der lange und mühsame Entwicklungsprozess, der traditionell mit ihnen einhergeht.

Wenn Sie diese Bedenken teilen, aber daran interessiert sind, iOS- und Android-Apps für Ihre Marke zu entwickeln, sollten Sie sich unsere Plattformen News, Canvas for eCommerce oder Canvas ansehen. Was auch immer für Sie das Richtige ist – Sie können Ihre Website oder Web-App in nur wenigen Wochen für nur 100 $/m in hochwertige native Apps umwandeln.

Unsere Plattformen können verwendet werden, um jede Website in eine mobile App umzuwandeln. Es spielt keine Rolle, womit Ihre Website erstellt wurde. MobiLoud eignet sich hervorragend zum Erstellen von:

• WordPress-Apps
• Bubble-Apps
• Squarespace-Apps
• Wix-Apps
• WooCommerce-Apps
• Webflow-Apps

Und alles dazwischen! Sie erhalten unbegrenzte Push-Benachrichtigungen auf Android und iOS und verfügen über alle Funktionen, die Sie benötigen, um eine erfolgreiche plattformübergreifende Präsenz im Web und in den App Stores aufzubauen.

Wir können Ihnen auch mit einer PWA helfen, damit Sie die ideale mobile Kombination für die Zukunft haben. Wenn das gut klingt – dann kontaktieren Sie uns und buchen Sie noch heute eine Demo. Wenn Sie sich für eine andere Route entscheiden, dann viel Glück auf Ihrer Reise. Wir hoffen, Ihnen haben die PWA-Beispiele gefallen und Sie haben sich inspirieren lassen, um auf Mobilgeräten erfolgreich zu sein!