Terug naar het overzicht

Chabobags was toe aan een professionaliseringsslag van hun e-commerce. Eind mei 2020 is daarom de nieuwe Chabobags webshop live gegaan op basis van Magento 2. Volledig met een PWA integratie.

“Voor de ontwikkeling van de PWA van Chabobags maakten we gebruik van Vue Storefront”, vertelt Robin.

Professionaliseringsslag e-commerce

Chabobags ontwerpt en verkoopt stoere leren tassen en accessoires. ‘Chabo’​ betekent vriend, een tas die je persoonlijkheid onderstreept en die je overal met je mee wilt nemen. En met dit in ons achterhoofd hebben we de nieuwe Progressive Web App (PWA) voor Chabo ontwikkeld: de webshop als een professionele en betrouwbare ‘partner’, met de look-en-feel die de persoonlijkheid van Chabobags uitstraalt en die overal en via elk device toegankelijk is.

Op zoek naar een webshop die meegroeit met ambities

Chabobags was toe aan een professionaliseringsslag van hun e-commerce. De webshop draaide op WooCommerce van WordPress en was ook erg traag tijdens het navigeren. Chabobags zocht naar een passende oplossing voor een nieuwe webshop met snellere laadtijden en de capaciteit om met hun ambities mee te groeien.

Magento 2 is een uitstekende keuze, want met dit e-commerceplatform kan Chabobags eenvoudig haar online kanaal opschalen. Bovendien was één van de wensen van Chabobags om meer inzichten te krijgen in de webshopprestaties en die data is automatisch beschikbaar in Magento. Daarnaast maakte Chabobags de keuze om de frontend te bouwen met een innovatieve PWA.

 

Eigen developmentteam voor Chabobags

Nadat Chabobags koos voor Itonomy nam al snel onze leaddeveloper Robin Rijkeboer aan tafel plaats. Samen met zijn developmentteam vertaalt hij technische vereisten naar usercases en is hij verantwoordelijk voor de technische kwaliteit van de nieuwe Magento-webshop. Robin vertelt ons meer over de totstandkoming en werking van de nieuwe PWA-webshop.

Ontwikkelen met Vue Storefront

“Voor de ontwikkeling van de PWA van Chabobags maakten we gebruik van Vue Storefront”, vertelt Robin. “Vue is een open source framework voor PWA op basis van JavaScript. Dit biedt ons het fundament van de PWA. We hebben zelf de B2B-functionaliteit voor de PWA van Chabobags ontwikkeld en ingebouwd. En deze kennis delen we weer met andere developers via het open source platform van Vue.”

De uitdaging bij het ontwikkelen van een PWA

“PWA staat nog in de kinderschoenen”, geeft Robin aan. “Daarom moeten we nog veel mogelijkheden zelf ontwikkelen. Magento is een compleet e-commerceplatform waar alle functionaliteiten voor een professionele webshop aanwezig zijn. Voor een PWA moeten we dat vooral zelf ontdekken. Bijvoorbeeld de nieuwe B2B-functionaliteit: Chabobags levert aan retailers die hun tassen verkopen. Dit gloednieuwe B2B-framework kunnen we nu voor al onze PWA’s gebruiken.”

Testen met Google Lighthouse

“Met Lighthouse hebben we getest hoe de nieuwe webshop van Chabobags presteert”, vertelt Robin.“ Google Lighthouse meet verschillende aspecten van een online webshop, bijvoorbeeld de snelheid en de optimalisatie voor de zoekmachines. Met deze software zie je direct het verschil in laadtijden tussen een PWA en een ‘normale’ webshop. Op een schaal van 1-100 scoort een ‘gewone’ webshop zonder optimalisaties over het algemeen 15-20 punten, waar een PWA al snel 70-80 punten behaalt.”

PWA-updates en beheer

“Wanneer er een update plaatsvindt op de PWA-omgeving, bijvoorbeeld een nieuwe feature, dan wordt dit automatisch verwerkt op de achtergrond”, geeft Robin aan. “PWA-beheer werkt hetzelfde als bij een webshop. Bij Chabobags werkt Magento aan de achterkant en aan de voorkant werkt de PWA als storefront. Je beheert en past zelf de contentpagina’s eenvoudig aan met zogenaamde storyblocks. Je ziet direct hoe je webpagina eruit komt te zien, terwijl je die aan het bouwen bent.”

PWA is beschikbaar voor elk besturingssysteem

“Waar je native apps specifiek voor Android, Apple of Microsoft moet bouwen, kun je een PWA via elk besturingssysteem benaderen”, zegt Robin. “PWA is nog niet beschikbaar in de Apple of Playstore, maar dat verandert binnenkort. Je kunt een PWA wel in de stores zetten door middleware te installeren: een soort mini-browser app die de PWA inlaadt.”

Het resultaat van de nieuwe PWA-shop

Chabobags geniet van alle voordelen die een PWA-webshop biedt. “Allereerst is de laadtijd van hun webshop significant afgenomen”, zegt Robin enthousiast. “Was dat eerst gemiddeld 4 seconden per webpagina (met uitschieters van wel 8 tot 9 seconden!), nu is dat 1,5 tot 2 seconden voor het eerste webshopbezoek en voor elke vervolgpagina 0,7 seconden. Eenmaal geladen in de browser blijft de PWA een tijdlang beschikbaar. Hoe lang verschilt per browser. Voor Safari is dat ongeveer twee weken en voor Chrome nog langer.”

“Verder is de ervaring voor de webshopbezoeker enorm verbeterd”, gaat Robin verder. “De check-out is eenvoudiger, je kunt bijvoorbeeld betalen met je vingerafdruk. En wanneer er even geen internetverbinding is, blijft de PWA-shop stabiel en kun je gewoon verder winkelen.”

Chabobags is nu in staat om op basis van hun webshopdata gefundeerde beslissingen te nemen om hun webshop verder te optimaliseren. Bovendien richt Chabobags zich met hun nieuwe PWA-webshop niet meer alleen op de B2B-, maar ook op de B2C-markt. Het volgende punt op de roadmap is het internationaal beschikbaar stellen van de PWA.

Het resultaat

“We zijn blij met weer een tevreden klant met een PWA-webshop die op Magento draait”, aldus Robin. “Voor ons is PWA echt de toekomst “We zien dat Google zwaar inzet op dit concept, begrijpelijk, want Google is de drijvende kracht achter PWA. De webshops op PWA zien er fantastisch uit en het is een hele vooruitgang qua technieken die worden gebruikt. Bij Itonomy focussen we ons volledig op de ontwikkeling van PWA’s, het is niet iets wat we ‘erbij’ doen. Ons PWA-team groeit en we zijn alweer bezig met de volgende PWA-projecten!”

Wil jij ook met itonomy overstappen naar een nieuw platform?