Magento 2 PWA App: Lohnt es sich in 2022 und was ist der Preis?

Als Geschäftsinhaber, brauchen Sie die schnellsten, die günstigsten und definitiv kundenfreundliche Software-Lösungen. Wenn es um die Entwicklung von Magento-Apps geht, haben Sie zwei Möglichkeiten: entweder eine nativ bereitgestellte Anwendung oder eine progressive Web-App (PWA).

Was ist eine Magento-PWA, wie unterscheidet sich eine Magento-PWA von einer nativen Magento-App und wie viel kostet die Entwicklung einer Magento-PWA. In unserem Artikel finden Sie die Antworte zu diesen Fragen.

Als Geschäftsinhaber, brauchen Sie die schnellsten, die günstigsten und definitiv kundenfreundliche Software-Lösungen. Wenn es um die Entwicklung von Magento-Apps geht, haben Sie zwei Möglichkeiten: entweder eine nativ bereitgestellte Anwendung oder eine progressive Web-App (PWA).

Was ist eine Magento-PWA, wie unterscheidet sich eine Magento-PWA von einer nativen Magento-App und wie viel kostet die Entwicklung einer Magento-PWA. In unserem Artikel finden Sie die Antworte zu diesen Fragen.

In diesem Blog-Artikel finden Sie sämtliche Informationen über die Bereitstellung von Magento PWA, einschließlich der Entwicklung- und Wartungsanforderungen sowie die Vorteile für Ihr Geschäft.

Was ist PWA?

Zuerst kommen die Grundlagen. Eine progressive Webanwendung (PWA) ist eine Anwendung, die die wie eine klassische Webseite geladen wird, aber hat die Funktionen, die sonst nur für mobile Apps verfügbar sind. Es handelt sich um eine Website, die sich in Bezug auf Design und Reaktionsfähigkeit wie eine mobile Anwendung verhält, aber Webtechnologien wie Servicemitarbeiter und Web-App-Manifeste verwendet.

Da Google die Mobilfreundlichkeit als einen entscheidenden Suchmaschinen-Rankingfaktor ansieht, haben sich

Geschäftsinhaber entschieden, noch einen Schritt weiter zu gehen und ein natives mobiles Erlebnis in Form einer PWA zu erstellen. Bei Top-E-Commerce-Marken wie AliExpress, Jumia und Walmart wird diese Technologie eingesetzt, um alle Vorteile von mCommerce nutzen zu können.

Mithilfe PWA braucht man nicht, den offiziellen mobilen App Store zu besuchen, eine Anwendung herunterzuladen und zu installieren, um den Service nutzen zu können. Kunden haben über einen Webbrowser schnellen Zugriff auf alle Services.

Das bedeutet, dass Sie das intuitive Interface und Funktionalität einer mobilen App in Kombination mit der Auffindbarkeit durch Suchmaschinen und der plattformübergreifenden Zugänglichkeit von Websites erhalten. Was noch? PWA können auch als Single-Page-Apps bereitgestellt werden, was die gegenseitige Abhängigkeit vom Front-End und Back-End reduziert und schnell und zuverlässig bleibt.

Magento PWA: Einführung

Magento PWA ist kein kompliziertes Ding. Das sind progressive Web-Apps, die über die dedizierten PWA-Implementierungen von Magento entwickelt werden. Es handelt sich um webbasierte Magento-Storefronts, die über Magento 2.3-Bibliotheken, -Tools, -Frameworks und andere Magento-Lösungen erstellt und verwaltet werden. Magento ist eine Open-Source-E-Commerce-Plattform. Das bedeutet, dass die PWA-Entwicklung mit den Plattform-Tools Ihnen den Zugriff auf eine große Bibliothek von Lösungen für die Entwicklung und Wartung verleiht.

Im Gegensatz zu anderen Magento-Produkten, die auf PHP-Code basieren, werden Magento-PWA mit dem React JS-Framework erstellt. Sie bieten die absolute Flexibilität, plattformübergreifende Kompatibilität, Anpassungsfähigkeit, UI-Designs und Leistungssteigerung.

Weitere Bibliotheken, die für die PWA-Bereitstellung verwendet werden, sind Vue.Js und Angular.Js. Obwohl das Open-Source-Frameworks sind, die die vereinfachten Entwicklungszyklen und verbesserte Leistung auf der Serverseite bieten, ist das React.Js-Framework, die effizientere Wahl für die PWA-Entwicklung.

Magento PWA-Architektur

Magento PWA hat mehrere Komponenten, die die nahtlose Bereitstellung und Wartung gewährleisten. Zu diesen Komponenten gehören

• Servicemitarbeiter
• Manifeste
• Programmierschnittstelle (API)
• Transport Layer Security (TLS)
• App-Shell-Architektur

Service Worker sind Javascript-basierte Cache-Dateien, die eine zuvor geladene Version der Web-App speichern. Sie senden die Push-Benachrichtigungen bieten dank der regelmäßigen Inhaltsaktualisierungen ein nahtloses Erlebnis. Web-App-Manifeste sind JSON-Dateien, die Anweisungen zum Aussehen und Funktionieren der Web-App speichern.

Mit der API können Sie die Kommunikation zwischen Back-End und Front-End verwalten, während TLS die Kommunikation zwischen den Client- und Serverseiten mit der Verschlüsselung sichert. Diese Sicherheit spielt eine große Rolle, wenn es um ein E-Commerce-Geschäft geht, wo persönliche Finanzinformationen wie Kreditkartendaten von Kunden gespeichert werden.

Die App-Shell-Architektur ist eine Struktur, in die man die spezifischen UI-Designelemente einfügt. Bei PWA werden auch Popup-Funktionen implementiert, die es ermöglichen, mit überlagerten Inhalten zu interagieren. Diese Kombination ist sehr vorteilhaft für Ihr Geschäft.

Magento PWA vs. Native Apps

Die App-Shell-Architektur wird während der User-Session in der Web-App erstellt, von Servicemitarbeitern zwischengespeichert und bei Bedarf über die API bereitgestellt, wodurch die App schneller ladet. Diese Struktur ist einer der wenigen Vorteile, die native Anwendungen gegenüber Websites haben, und PWA ergänzen diese Lücke.

Anstatt eine Anwendung hochladen und installieren zu müssen, integrieren Sie die mobile App in Webbrowser. Auf diese Weise verliert man nie den Zugriff auf die App, da sie immer über einen beliebigen Browser zur Verfügung steht. Eine weitere Ergänzung dazu ist, dass man die App im Google Chrome auch auf den Startbildschirm setzen kann und einen schnellen Zugriff darauf hat.

Man kann sowohl gleiche UI/UX-Designs als auch Push-Benachrichtigungen wie bei nativen Anwendungen integrieren. Mit PWA sparen Sie Geld, denn eine plattformübergreifende Bereitstellung kostet deutlich weiger. PWA ermöglichen gleichzeitig, die mobile Konversion zu steigern, die Benutzerfreundlichkeit zu verbessern und in Suchergebnissen eine höhere Stelle zu erhalten. Wenn es sich nun um die Erstellung von Web-Apps mit React.JS handelt, gibt es drei Wege, wie Sie es erfüllen können.

Arten von Magento PWA-Implementierungen

Um eine Magento PWA zu erstellen, schreiben Sie entweder den Code selbst mit React.Js, verwenden das Magento PWA Studio oder implementieren die Magento PWA-Themes von Drittanbietern. Die Entwicklung von Magento-PWA von Grund auf bietet hohe Anpassungsfähigkeit, setzt aber voraus, dass Sie einen React.Js-Entwickler einstellen, der passende Erfahrung und Kompetenz hat. Das Magento PWA Studio ist dedizierte Lösung von Magento für die Entwicklung, Bereitstellung und Wartung webbasierter Anwendungen. Es verfügt über eine Reihe von Open-Source-Front-End-Architekturen, wie z. B. einsatzbereite Servicemitarbeiter und Entwickler von Webanwendungen. Magento PWA Studio ist aktuell noch in der Entwicklung und einige wichtige Tools und Funktionen können fehlen. Möglicherweise findet man auch einige Fehler im Code. Themen von Drittanbietern können dabei helfen.

PWA-Designs von Drittanbietern sind in der Regel Designthemen, die von Open-Source-Toolkits begleitet und von Drittanbieter-Entwicklern erstellt wurden. Sie sind einigermaßen identisch mit dem Magento PWA Studio, aber anstatt als gesamte Infrastruktur bereitgestellt zu werden, wendet man diese Themen auf bestehende Shops an, die mit der Magento 2.3-Technologie entwickelt sind. Gute Beispiele dafür sind Scandi PWA, Tigren PWA und SimiCart.

Welche Implementierung passt Ihnen am besten?

Diese drei Magento-Implementierungen von React.Js haben Vor- und Nachteile. Wie bereits erwähnt, ist die Entwicklung des React-PWA-Codes von Grund auf läuft am besten, wenn Sie einen Shop mit anpassbaren Front-End-Elementen aufbauen wollen und vollständige Kontrolle über Ihre PWA-Lösung übernehmen. Dafür benötigt man hervorragende React.Js-Fähigkeiten, Erfahrung mit Magento-Architekturen und gute Kenntnis von Bibliotheks- und Gerätekompatibilität.

Sowohl die Magento PWA Studio als auch die Theme-Implementierungen von Drittanbietern haben ähnliche Vor- und Nachteile. Obschon es viel einfacher ist, die PWAs mit vorgefertigten Komponenten bereitzustellen, ist die Anpassbarkeit stark eingeschränkt, und man bekommt am Ende unvollständige Tools und Funktionen, Fehler und Bugs sowie langsamen oder ineffizienten Code, der nicht zu Ihrer spezifischen PWA-Bereitstellung passt.

Die Wahl der Implementierung hängt davon ab, ob Sie einen Magento React-Entwickler im Team haben, wie anpassbar sollte die App sein und natürlich welche Drittanbieter Ihnen zur Verfügung stehen.

Wie viel kostet eine Magento PWA?

Eine Magento-PWA kostet zwischen 35.000 und über 120.000 US-Dollar, je nachdem, welche Funktionen Sie in Ihre Storefront integrieren möchten. Diese Kosten liegen an vielen anderen Faktoren, zum Beispiel wen Sie einstellen, wie lange der Entwicklungsprozess dauert, wie fortgeschritten und anpassbar Ihre Webanwendung sein soll und wie viel Geld Sie bereit sind, für die Wartung auszugeben.

Sie sollten jedoch immer damit rechnen, dass die eine PWA weniger als die Verwaltung nativer Apps kostet. Sie entwickeln nur eine Webanwendung mit Desktop- und Mobilreaktionsfähigkeit, anstatt eine Website, eine Android-Anwendung und eine iOS-Anwendung zu erstellen.

Jetzt spalten wir den PWA-Entwicklungsprozess in Phasen auf, um die Ausgaben genauer zu betrachten. Wir schauen uns die Anzahl der Stunden an, die Ihre Entwickler dafür brauchen und einen ungefähren Stundensatz.

Zu diesen Phasen zählen die Planungs- und Einrichtungsphase, die UI/UX-Designphase, die PWA-Kernentwicklungsphase und die Bereitstellungs-/Wartungsphase. Diese haben jeweils unterschiedliche Intensität und Bedeutung und dementsprechend auch einen unterschiedlichen Preis.

Planungs- und Einrichtungskosten (40 bis 60 Stunden)

In der Anfangsphase bestimmen Sie, wie Ihre Webanwendung dazu beiträgt, Ihre Geschäftsstrategien und andere grundlegende Geschäftsanforderungen zu erfüllen. Unabhängig davon, welches Projektmanagement-Framework Sie verwenden, die Planungsphase ist immer wichtig.

Sie legen Ihre Vision, Forderungen und Präferenzen fest, kommunizieren mit Ihrem technischen Team über alle entscheidenden Aufgaben, die Ihre Webanwendung erfüllen soll, und stellen einen Plan oder ein Layout zusammen.

Obwohl der Dauer dieser Phase von den spezifischen Geschäftsanforderungen bestimmt wird, schätzen wir, dass sie insgesamt ca. von 40 bis 60 Stunden dauert. Dieser Phase folgt eine UI/UX-Designphase.

UI/UX-Designkosten (400 bis 650 Stunden)

In der UI/UX-Designphase werden auch die wichtigen Entwicklungsprozesse definiert, da Sie bestimmen, wie Ihre Kunden durch die Webanwendung navigieren, welche Elemente dargestellt werden sollen und wie man mit ihnen interagiert.

Zu den wichtigsten Seiten gehören die Homepage, die Produktkategorie-Seite, die Produktzielseite, der Warenkorb und natürlich die Checkout-Seite. Außerdem sind noch folgende Seiten zu beachten: Konto der Kunde, die Info-Seite „Über uns“ sowie die Kundendienstseite.

Im Durchschnitt wird ca. 100 Stunden für jede Schlüsselseite aufgewendet, während für andere Seiten viel weniger Zeit und Mühe erforderlich sind. Man kann sie alle in 120 Stunden erledigen.

PWA-Entwicklungsphase (600 bis 1500 Stunden)

Es ist nun an der Zeit, die erstellte UI- und UX-Designs zu aktivieren. Die Phase der Softwareentwicklung nimmt am meisten Zeit und Aufwand in Anspruch, insbesondere wenn Sie einen vollständig benutzerdefinierten Magento PWA-Shop erstellen möchten.

Die vorgefertigten PWA Studio-Komponenten von Magento helfen, den pauschalen Entwicklungszeit zu reduzieren. Die einzige Option,die Entwicklungszeit zu senken, wenn es um eine benutzerdefinierte PWA geht, ist einen Entwickler einzustellen, der ähnliche Codes aus früheren Projekten hat.

In dieser Phase werden alle Haupt- und Nebenseiten geplant und erstellt. Die Homepage, die Produktkategorieseite, die Produktzielseite und die Checkout-Seiten nehmen die meiste Zeit in Anspruch. Insgesamt schließt man diese Phase nach 600 bis 1500 Arbeitsstunden ab.

Bereitstellungs- und Wartungskosten (150 bis 300 Stunden)

Dies ist der Zeitpunkt, an dem Sie die App endlich aktivieren und überwachen, wo die Verbesserungen und betriebliche Änderungen erforderlich sind. Diese Phase benötigt in der Regel viel Zeit, um die Entwicklungs- und Bereitstellungsprozesse ordnungsgemäß abzuschließen und Fehler zu beheben.

Die Bereitstellungsphase dauert allein zwischen 40 und 80 Stunden je nachdem, wie komplex Ihre PWA gebaut ist. Die Wartungsphase hingegen läuft immer. Es werden stets die Softwareaktualisierungen vorgenommen, Fehler werden behoben, Sicherheit wird verbessert und die Anwendung wird skaliert.

Um sicherzustellen, dass PWA-Wartung nicht viel Zeit in Anspruch nimmt, schließen Sie die Bereitstellungsphase so schnell wie möglich ab. Also, was bedeutet das alles für Sie?

Fazit

Für einfache PWA mit Standardfunktionen geben sie ca. 1200 Stunden aus (dazu zählt man Entwicklungs-, Bereitstellungs- und Wartungsphase). Für erweiterte PWA mit vollständiger, erstklassiger benutzerdefinierter Programmierung brauch man über 2500 Stunden Zeit.

Da Profis voraussichtlich zwischen 25 und 60 US-Dollar pro Stunde verlangen, beträgt der Pauschalpreis 30.000 US-Dollar für eine einfache PWA, von 60.000 bis 75.000 US-Dollar für PWA mit moderatem Funktionsumfang und zwischen 120.000 und 150.000 US-Dollar für eine erweiterte PWA.

Zusammenfassung

PWA sind die Zukunft des E-Commerce und sind sehr empfehlenswert, wenn Sie auf dem Markt konkurrenzfähig bleiben möchten. Sie kombinieren das Beste von mobilen Anwendungen und die Vorteile von Websites wie plattformübergreifende Kompatibilität, einfachen Zugriff und SMO-Funktionen.

Je nachdem, ob Sie mit React.Js eines von Grund auf neu erstellen, das Magento PWA Studio verwenden oder Themen von Drittanbietern anwenden möchten, kostet eine PWA zwischen 30.000 und 150.000 US-Dollar.

Wenn Sie hochqualifizierte Magento-Entwickler zu gutem Preis für Ihr Projekt brauchen, kontaktieren Sie uns jetzt!