Wat is Magento PWA en de behoefte aan een e-commercesite
Een uitstekende gebruikerservaring is een van de vele factoren die nodig zijn voor het runnen van een succesvol online bedrijf. Om dit bij te houden, moet u recente technologische trends volgen, zoals progressieve webapps (PWA). Kan een PWA een alternatief zijn voor een native app? In sommige gevallen kan dit het geval zijn, vooral in de e-commerce. Hiermee kunnen online verkopers zich concentreren op het aantrekken van bezoekers naar de websites en hen aanmoedigen items te kopen in plaats van een native app te downloaden. Dat is de reden waarom veel e-commerceplatforms zoals Magento het maken van PWA's mogelijk maken. Dit artikel zal zich richten op Magento PWA, de voordelen, vereisten, kosten en alternatieven. We analyseren hoe u de oplossing kunt bouwen met Magento PWA-thema's, extensies en oplossingen voor e-commerce. Inhoudsopgave: Waarom Magento e-commerce gebruiken voor online zakendoen
Wat is Magento PWA?
Een progressieve webapp (PWA) betekent grofweg een mix van een website en een native app. Het is een webapp die een native-achtige ervaring biedt met verbeterde UI/UX, snel laden en vindbaarheid door zoekmachines. En het ondersteunt pushmeldingen zoals native apps. Tegelijkertijd is het geheugenverbruik minimaal, omdat PWA's in feite snelkoppelingen naar websites zijn. Je kunt de PWA en de native app vergelijken op het AliExpress-voorbeeld:
Zoals je kunt zien, is het verschil tussen de twee onbeduidend en ligt het in: de menupositie, de ‘Chat’-knop onderaan en het uiterlijk van de zoekfunctie. Daarnaast is de PWA op mobiele telefoons net zo handig als de native app. Dergelijke applicaties worden ook wel een variant van single-page apps (SPA's) genoemd. Ze staan haaks op de traditionele webarchitectuur en zijn gebaseerd op een headless commerce-aanpak. Dit concept gaat over het scheiden van de frontend en de backend, zodat ze via een API communiceren. De website wordt dan flexibeler op de geïntroduceerde veranderingen. Een PWA is dus beter aanpasbaar omdat frontend en backend minder van elkaar afhankelijk zijn.
Ervaar de Cloudways Magento 2 Demo Store – Geen technische vaardigheden nodig!
Ervaar een volledig functionele Magento 2-winkel gebouwd bovenop de gerenommeerde Cloudways-hosting om de hoogste snelheden te leveren.
Wat u moet weten over PWA
De term PWA verscheen in 2015 op Google. Google maakte dit type webapp populair toen het mobielvriendelijkheid tot een rankingfactor maakte. Dat is de reden waarom veel website-eigenaren PWA's gingen zien als een oplossing om onder meer zoekmachineoptimalisatie (SEO) te stimuleren. Gerenommeerde merken die PWA’s hebben ontwikkeld zijn onder meer AliExpress, Debenhams, Jumia en meer. De lijst wordt voortdurend bijgewerkt naarmate het aandeel van mobiele handel jaarlijks groeit. Volgens Insider Intelligence zal het mCommerce-volume in 2024 42,9% van de e-commerce vertegenwoordigen en in totaal $620,97 miljard bedragen.
Ontdek een slimmere oplossing!
Ontgrendel de kracht van PWA voor Magento met de vooruitstrevende hosting- en ontwikkelomgeving van Cloudways. Laten we Lancôme eens bekijken. Het beautymerk wilde klanten een onberispelijke gebruikerservaring bieden. Het team begreep dat de native app geschikter is voor frequente bezoekers, terwijl het van essentieel belang was om potentiële klanten op alle apparaten tevreden te stellen. Dus herbouwden ze de website als een PWA en zagen de volgende verbeteringen: het conversiepercentage steeg met 17%; het bouncepercentage daalde met 15%; mobiele sessies groeiden met 51%. Hieronder ziet u een illustratie van de Lancôme PWA:
Waarom heeft uw e-commerce winkel Magento PWA nodig?
Kenmerken van Magento PWA
PWA-technologieën werken samen om een Magento-winkel te verbeteren. Hier zijn enkele van de voordelen die u kunt verwachten:
Snelheid. Rendering aan de clientzijde maakt dit mogelijk. Wanneer een gebruiker een Magento 2 PWA bezoekt, stuurt de browser via API’s een verzoek naar een server, die HTML retourneert met een link naar JS-bestanden. De browser bouwt paginasjablonen zonder dynamische inhoud. Deze sjablonen worden in de cache opgeslagen en hoeven niet te worden geladen wanneer de gebruiker andere pagina's opent. De backend verzendt alleen de benodigde gegevens, wat zorgt voor minder serverbelasting en een hogere snelheid.
Lichtgewicht app. Het is je misschien opgevallen hoeveel apps ongebruikt blijven op je telefoon. Tegelijkertijd nemen ze veel opslagruimte in beslag, waardoor u andere bestanden moet verwijderen. Wat als klanten de winkel één keer per maand of zelfs minder vaak bezoeken? Ze zullen de app zeker verwijderen na het plaatsen van een bestelling. Alle inspanningen om een native app te bouwen zijn dus tevergeefs. PWA's zijn minder veeleisend als het gaat om geheugengebruik. Hun gewicht wordt gemeten in KB's vergeleken met MB's voor native apps.
De functie Toevoegen aan startscherm. Hoe installeer je native apps? Juist, je gaat naar de App Store of andere marktplaatsen om de benodigde oplossing te vinden en een bestelling te plaatsen. Een PWA Magento 2 elimineert deze onnodige stap, waardoor u via de browser kunt kopen en de link op het startscherm kunt opslaan. Kijk hoe deze functie werkt op de website van Eleganza.
Het is alsof je in een app zit. PWA’s zijn niet alleen uitzonderlijk snel, maar beschikken ook over geweldige UX-functies. Daarom voelen PWA's aan als native apps. De oplossing is meer dan een mobielvriendelijke website. Het gaat erom de beste functies van native apps te gebruiken en deze op internet te implementeren. De beste PWA-voorbeelden plaatsen bijvoorbeeld knoppen in de duimvriendelijke zone (onderaan het scherm). Navigatie, lettertypen en andere elementen volgen de principes van eenvoud en gemak.
Pushmeldingen. Pushmeldingen zijn een cruciale functie voor e-commercewebsites om bezoekers opnieuw te betrekken. U kunt ze sturen om klanten te herinneren aan een verlaten winkelwagentje, hen op de hoogte te stellen van aantrekkelijke aanbiedingen of nieuwe collecties te introduceren. Abonnees ontvangen waarschuwingen op startschermen.
Lagere ontwikkelingskosten. Omdat je geen aparte Android- en iOS-teams hoeft te betalen om een app te bouwen, kun je geld besparen dankzij een PWA Magento.
Hoe Magento PWA de Magento Store verbetert
Een Magento-winkel kan op de volgende manieren profiteren van de conversie naar een PWA: De razendsnelle snelheid en het installatiegemak kunnen verlaag het bouncepercentage en verhoog het aantal mobiele conversies. De native-achtige ervaring zal hieraan bijdragen gebruikers vriendelijkheid. Het geeft de winkel een broodnodige voorsprong op de overvolle markt en moedigt kopers aan om terug te keren naar de website. Andere websitestatistieken zoals sessieduur, bezochte pagina's per sessie, en verlaten van de winkelwagen tarief zal ook verbeteren. Omdat PWA's websites blijven, kan dat ook promoot de winkel in de zoekresultatenverkrijg backlinks en leid bezoekers weg van andere bronnen.
Met welke uitdagingen kunt u te maken krijgen met Magento PWA?
Natuurlijk hebben PWA's ook hun beperkingen. Zijn moeilijke en tijdrovende ontwikkeling, ook al heb je één oplossing en team nodig voor alle operationele systemen. Het kan evenveel inspanning vergen als een native app of website-optimalisatie. Het is dus aan u om te kiezen waar u uw geld wilt beleggen. Een andere uitdaging om in gedachten te houden is toegang tot hardwarefuncties. Native apps kunnen worden geïntegreerd met een bepaalde softwareomgeving. Een native iOS-app ondersteunt Apple-specifieke functies zoals Face ID, en Android- en Windows-apps hebben andere hardware-eigenschappen. Progressieve webapps moeten omgaan met verschillende beperkingen met betrekking tot de toegang tot GPS, camera, contactenlijst, agenda, mobiele betalingen, vingerafdruksensor en andere. Hoeveel toegang ze hebben, hangt af van het besturingssysteem. Android staat bijvoorbeeld minder vijandig tegenover deze oplossing en werkt zijn omgeving sneller bij dan iOS. Het geldt niet alleen voor hardware, maar ook voor pushmeldingen.
Pushmeldingen werken in Chrome, Opera, Safari en Mozilla en zijn bruikbaar op Android, maar hebben problemen met iOS. Technologische vooruitgang zal dit probleem in de loop van de tijd verzachten, maar u moet er voorlopig rekening mee houden.
Gecachte bestanden gaan niet lang mee. Als gebruikers de PWA langere tijd niet openen, verdwijnen de eerder gedownloade bestanden, terwijl de snelkoppeling blijft bestaan.
Magento PWA-vereisten
PWA's hebben verschillende vereiste componenten nodig, waaronder:
Servicemedewerkers om een naadloze ervaring te garanderen. Het is een JavaScript-bestand aan de clientzijde dat op de achtergrond draait en verantwoordelijk is voor het cachen van statische bestanden en verzoeken, het verzenden van pushmeldingen en het bijwerken van inhoud. De app laadt sneller omdat de eerder opgeslagen bestanden in de cache staan. En u kunt er zeker van zijn dat de inhoud zelfs tijdens een onstabiele internetverbinding op de schermen van gebruikers zal verschijnen.
Web-app-manifest, een JSON-bestand met de beschrijving van hoe de app zich moet gedragen na installatie op een apparaat. Het bevat de naam, auteur, hoe pictogrammen eruit moeten zien, enz.
App-shell-architectuur presenteert een paginaskelet terwijl de rest van de inhoud wordt geladen. Deze structuur is een statische pagina in HTML, CSS en JavaScript. Dit is wat overblijft nadat u alle dynamische inhoud hebt verwijderd, dat wil zeggen alles wat van pagina tot pagina verandert. De onderstaande schermafbeelding van Sophie Conran laat zien hoe het werkt.
Transportlaagbeveiliging (TLS) is een protocol om de communicatie tussen webapplicaties en servers te versleutelen en de veiligheid en authenticatie te garanderen. De PWA moet HTTPS gebruiken. Consumenten vertrouwen een grote hoeveelheid persoonlijke gegevens toe aan online winkels: namen, adressen en, belangrijker nog, creditcardnummers. De manier om deze gegevens te beschermen is door een veilige HTTPS-verbinding te bieden.
Applicatieprogrammeerinterface (API) als communicator tussen de frontend en de backend. Het is een ander protocol, een reeks regels over hoe de twee delen zullen samenwerken. API's gebruiken verschillende talen, zoals GraphQL. Vanuit het UI/UX-punt vertrouwen PWA's op de pop-up werkingsprincipe. Het gaat om het openen van een nieuwe pop-up voor nieuwe actie. De gebruiker blijft op dezelfde pagina met de mogelijkheid om over de overlappende pagina te vegen.
Welke methoden kunt u gebruiken om een Magento PWA-site te ontwikkelen?
U moet bepalen hoeveel vrijheid u wilt hebben bij het bouwen van een Magento PWA. Zou je het liever helemaal opnieuw willen maken door gebruik te maken van moderne frameworks zoals React.js, Vue.js of Angular.js; met vooraf gemaakte thema's; door add-ons en extensies te installeren?
Via Magento 2 PWA-extensie
Een eenvoudige manier om PWA-functies aan de winkel toe te voegen, is door verschillende extensies te installeren. Hiermee kunt u zoeken op de site, navigatie, afrekenen, cadeaubonnen, enz. configureren. De website wordt responsiever en gebruiksvriendelijker en vergt niet veel moeite met aangepaste codering. Voor de meeste add-ons moet u echter een PWA-thema hebben geïnstalleerd. Het is niet voldoende om een PWA te bouwen, dus je kunt gewoon de bestaande functionaliteit uitbreiden. Amasty biedt een aantal extensies voor Magento 2 PWA. U kunt een voorbeeld van de add-ons bekijken en aanpassen, zoals te zien is in de onderstaande schermafbeelding.
Via Magento PWA-frameworks
Deze optie vereist aanzienlijke ervaring met webontwikkeling, maar stelt u in staat de winkel aan te passen zoals u dat wilt. Het is geschikt voor degenen die een unieke website en niet-standaardmogelijkheden willen. Het succes van een website of applicatie begint met het kiezen van de beste oplossing. In dit stadium moeten we dergelijke raamwerken voor een Magento PWA noemen als React.js, Vue.js en Angular.js. De eerste twee varianten zijn het meest wijdverspreid in de e-commerce.
Reageer.js
Reageer is een flexibele en eenvoudig te gebruiken Javascript-bibliotheek voor het bouwen van gebruikersinterfaces (UI's), het helemaal opnieuw maken van SPA's en PWA's, of het aanpassen van thema's. Het wordt ook wel ReactJS of React.js genoemd.
Vue.js
Vue.js is een andere Javascript-bibliotheek voor het maken van gebruikersinterfaces en SPA's. Het is open-source, ontwikkelaarsvriendelijk en lichtgewicht. Codeerders kunnen projecten vanaf de basis ontwikkelen, toegang krijgen tot rijke officiële bibliotheken en het renderen versnellen met de virtuele DOM.
Hoekig.js
Hoekig.js is een open-source Javascript-bibliotheek om het ontwikkelen en testen te vereenvoudigen. Het is geïntroduceerd in 2010 en wordt ondersteund door Google. Het is flexibel en u kunt het aanpassen aan uw behoeften. Enkele van de voordelen zijn tweerichtingsgegevensbinding (autonome gegevenssynchronisatie), verbeterde serverprestaties en snellere applicatieprototyping.
Via een Magento PWA-thema
Een thema is een manier om de website om te zetten in een PWA met vooraf ontworpen webpagina's en coderingstools. Het is een JavaScript-frontend die via API met de backend kan communiceren. Een thema heeft ook één codebasis voor desktop en mobiel. Ondanks het kant-en-klare ontwerp kunt u het aanpassen aan uw behoeften. Magento PWA-thema's missen mogelijk enige functionaliteit, bevatten bugs en vereisen updates en aanpassingen. Niettemin bieden thema's alle benodigde oplossingen voor het maken van een PWA-winkelpui. Ze verminderen de tijd en moeite van het coderen, zodat de website het optimalisatieproces sneller doorloopt.
Magento PWA Oplossingen en hun alternatieven
Laten we enkele van de meest opvallende Magento PWA-thema's en -instrumenten bespreken, zoals Magento 2 PWA Studio, Scandi PWA en andere.
Magento PWA Studio
Magento PWA Studio is een toolkit voor ontwikkelaars om het proces van het maken van progressieve webapplicaties te stroomlijnen. Het is een officiële Magento-oplossing die PWA's voor dit e-commerceplatform mogelijk maakt. Wat houdt het instrument in? Er zijn kant-en-klare componenten en een front-end architectuur. Het verkleint de kans op fouten in de beginfase, wat van invloed is op het verdere werk. Een van de voordelen van PWA Studio Magento 2 is dat het niet monolithisch is. U kunt slechts een deel van de code nemen in plaats van het hele pakket. De PWA Studio wordt geleverd met een geconfigureerde applicatiebouwer en installatieservicemedewerkers. Het heeft ook tal van app-elementen die u kunt gebruiken zoals ze zijn of aanpassen aan uw behoeften. Bovendien doet Magento de routing en caching voor u. De nadelen waarmee rekening moet worden gehouden zijn: de noodzaak om de buitensporige code die ontwikkelaars niet op de winkel toepassen, te schrappen; een grote kans op het gebruik van onnodige abstracties of bugs; de tijd om de bestaande oplossingen te bestuderen om te voorkomen dat er iets gecreëerd wordt dat al bestaat.
Scandi PWA
Scandi PWA is het eerste open-source kant-en-klare PWA Magento 2-thema. Het is geen etalage, maar een thema dat gemakkelijker te installeren en op de winkel toe te passen is. De toolkit biedt verschillende functionaliteiten en componenten die ontwikkelaars kunnen gebruiken en aanpassen. Scandi PWA kan bovenop elk M2.3- of nieuwer project worden geplaatst. U kunt problemen tegenkomen bij de implementatie ervan op andere platforms of oudere Magento-versies. Scandi PWA vereist geen wijzigingen in de infrastructuur. Het maakt het thema ontwikkelaarsvriendelijk, waardoor een snelle PWA-implementatie mogelijk is met alle voordelen van dien. Het thema gebruikt GraphQL als API om gegevens vanuit de backend te leveren en verzoeken vanuit de frontend te verzenden. De frontend werkt op ReactJS, dat gegevens in tijdelijke aanduidingen invoert.
Andere alternatieven
Wilt u meer mogelijkheden voor het ontwikkelen van een PWA storefront? Hier zijn vijf populaire aanbieders. Ze laten je ook een gestandaardiseerde app maken met essentiële PWA-functies.
Uitzicht op de winkelpui, een open-sourceframework voor verschillende e-commerceplatforms. Het maakt gebruik van Vue.js voor het bouwen van gebruikersinterfaces. Het kan echter zijn dat het thema geen documentatie bevat, wat de ontwikkeling en het onderhoud bemoeilijkt. Het geeft ook geen informatie over hoe het zich zal gedragen na de Magento-update.
CedCommerceeen e-commerceplatform met een Cenia PWA-thema. Het is afhankelijk van ReactJS, GraphQL en PWA Studio en wordt voortdurend geüpgraded om een betere gebruikerservaring te bieden.
SimiCart is een andere dienst met een responsief PWA-thema Siminia. Het is gratis en gebaseerd op PWA Studio en belooft zijn klanten het laden drie keer te versnellen, de SEO te verbeteren en een app-achtige ervaring te garanderen.
Tigren PWA kunt u de Magento-winkel transformeren in een PWA. Het thema is gebaseerd op Magento PWA Studio, dus klanten zouden geen compatibiliteitsproblemen moeten hebben als gevolg van Magento-upgrades. Het biedt ook alle benodigde functies voor hoogwaardige e-commercefunctionaliteit.
GoMage is ons vijfde Magento 2 PWA-thema op de lijst. Het heeft een drag-and-drop-builder om de ontwikkeling te stroomlijnen. Met dit thema kun je de winkel naar wens aanpassen, integreren met Google Analytics en functies bieden voor online promoties (zoals kortingsbonnen, upsells of geautomatiseerde nieuwsbrieven).
Magento PWA Ontwikkelingskosten
De prijs voor een Magento 2 PWA is afhankelijk van uw behoeften. Het kan beginnen vanaf $68.000 voor basiswinkelontwikkeling en oplopen tot $127.800+ voor geavanceerde opties zoals aangepast UX/UI-ontwerp, eindeloze ondersteuning en andere individuele services. Het varieert ook afhankelijk van de staat van de oorspronkelijke website. Hoe meer u de winkel aanpast, hoe meer u moet betalen. Elke ontwikkelingsorganisatie brengt zijn eigen kosten in rekening, dus u moet rekening houden met hun vaardigheden en portfolio voordat u voor iemands diensten kiest. Merk op dat de geografische factor hier ook een cruciale rol speelt. Gemiddeld varieert een uurtarief van $ 25 tot $ 70. Het totaal aantal uren is ook afhankelijk van hoeveel werk de conversie kost. Als u een PWA op maat wilt, kan een ontwikkelingsfase in 1000 – 2000 uur worden voltooid. Het proces omvat het transformeren van een bestaande Magento-website en het toevoegen van standaardfunctionaliteit.
Wat zeggen Magento-experts over Magento PWA?
Magento-serviceprovider Onilab werkt al meer dan acht jaar aan Magento-migratie, ontwikkelingsprojecten en het bouwen van progressieve webapps (PWA's). Als Magento-experts beschouwen zij het ontwikkelen van Magento PWA’s als een waardevolle investering. Deze stap zal de website voorbereiden op toekomstige eisen. Hoe? Een PWA is gebaseerd op een headless architectuur. Het betekent dat u de winkel sneller kunt aanpassen aan tal van contactpunten, omdat deze flexibeler zal zijn met een gesplitste frontend en backend. Houd rekening met verschillende uitdagingen bij het ontwikkelen van deze oplossing. Als uw doel een unieke PWA-winkel met op maat gemaakte elementen is, heeft u een ervaren team en meer tijd nodig. Wil jij zo snel mogelijk in de Magento PWA duiken en zijn standaard features voldoende? Kies dan voor kant-en-klare thema’s. In ieder geval zullen zelfs de perfect gebouwde thema’s enige aanpassing vereisen.
Onilab
Eigenaren van online winkels kunnen meer native app-achtige ervaringen bieden met voor PWA geschikte Magento-frontends, zoals “inhoud inschakelen terwijl je offline bent” en “gebruik van native apparaatfuncties zoals telefoonmeldingssysteem” – zoals het waarschuwen van de gebruiker als de batterij bijna leeg is en de transactie wordt mogelijk niet voltooid met de resterende levensduur van de batterij, dus kan de gebruiker worden gevraagd op te slaan wat hij tot nu toe heeft gedaan. Deze native app-achtige ervaringen zullen naar verwachting bijdragen aan het verhogen van de conversiepercentages.
David Alpern
Progressive Web Applications (PWA) geven een nieuwe vorm aan het mobiele landschap in alle sectoren, waarbij e-commerce op de eerste plaats komt. Hier gaat het om PWA: het biedt een soort unieke gebruikerservaring voor e-commercewebsites en brengt de ontwikkeling van native mobiele apps en webapps onder één dak. Door PWA op te nemen in op Magento gebaseerde websites, krijgen verkopers één websiteversie die snel laadt, wordt gestart vanaf het startscherm van een mobiel apparaat, pushmeldingen verzendt, werkt op netwerken van lage kwaliteit en zelfs offline. Bovendien zijn de ontwikkelingskosten voor PWA 5-6 keer lager in vergelijking met native mobiele apps. Eventuele nadelen? Serieus, we hebben er tot nu toe nog geen gevonden.
Stacy Matyl
Voor een Magento-ontwikkelaar is het moeiteloos om aan de slag te gaan met Magento PWA. Als je een ontwikkelaar bent die met de PWA werkt, hoef je niet veel te weten over het Magento-kernframework, alleen de API's en hoe je gegevens ernaar en ervan kunt verzenden en opvragen. Magento's PWA is echt een zeer vooruitstrevende en ambitieuze stap voor elke winkeleigenaar. Maar noodzakelijk, als je de concurrentie een stap voor wilt zijn. De kers op de taart: als u de PWA-site van de winkel bezoekt op mobiel en desktop, wordt de gebruiker (na een vooraf bepaalde tijd) gevraagd uw site te downloaden als een *lokale applicatie*! Dat betekent dat uw winkelwebsite gemakkelijk toegankelijk is en offline kan werken voor specifieke pagina's.
Tihana Drumev
Conclusie
PWA's zijn webapplicaties die rechtstreeks vanuit de browser op apparaten worden geïnstalleerd. Veel bekende merken zoals Puma, Starbucks, AliExpress en Pinterest hebben deze technologie voor hun websites overgenomen. Als u een native app voor verschillende besturingssystemen maakt, moet u bezoekers in de eerste plaats aanmoedigen om een app te downloaden. En pas daarna om uw goederen te kopen. Is het geen onnodige stap in het aankooptraject? Voor een online verkoper is het belangrijker om de website te upgraden en zich te concentreren op het omzetten van bezoekers in klanten. Een PWA zal een winnende oplossing zijn voor retailers met langetermijndoelen. Het zorgt voor betere websiteranglijsten dankzij een gepolijste gebruikerservaring, hoge laadsnelheid en fijnere bruikbaarheid. Het bespaart u ook tijd en geld bij het promoten van de app in de app store.
Jyotishna Kumari
Jyotishina is de Magento Community Expert bij Cloudways en heeft 4 jaar ervaring in webontwikkeling. Ze werkt sinds de millenniumwisseling aan e-commercesites en werkte met Magento voordat versie 1 uitkwam. Ze houdt van reizen en nieuwe ideeën ontdekken wanneer ze maar tijd vindt. Neem contact met haar op via [email protected].