Shopware headless e-commerce: PWA met Vuestorefront beschikbaar voor Shopware 6

Eerder werd Magento 2 al ondersteund, maar ook Shopware 6 is uitermate geschikt voor PWA headless e-commerce!

De scheidingslijn tussen websites en apps is aan het vervagen. De drang om een aparte app te bouwen en klanten vervolgens te verleiden om deze te downloaden verdwijnt. Toch is het van belang dat winkeliers hun klanten een toegevoegde waarde bieden. Daarvoor kunnen PWA’s bepalende voordelen bieden. Eerder werd Magento 2 al ondersteund, maar ook Shopware 6 is uitermate geschikt voor deze PWA headless e-commerce benadering.

Wegens een API-first benadering, gaat Shopware 6 uit van meer flexibiliteit en minder complexiteit. Het is de volgende generatie van open source e-commerce software, mogelijk gemaakt op basis van Symfony en Vue.js. Innovatieve e-commerce systemen, zoals Shopware 6, vertrouwen steeds meer op API-oplossingen.

Wat is PWA?

PWA wordt de nieuwe standaard voor mobile-first commerce genoemd en staat voor Progressive Web Apps. Een PWA kan gezien worden als een normale website met de functionaliteiten van een app. Dit brengt diverse voordelen met zich mee. PWA’s werken met een application shell (het jasje van een app), de functionaliteit krijgen ze dankzij de service workers.

PWA’s zijn gebaseerd op dezelfde technologieën als volgens de ‘ouderwetse’ webontwikkeling: HTML5, CSS3 en JavaScript. De functionaliteit komt nogmaals vanuit de service workers: een script dat je browser op de achtergrond uitvoert, los van webpagina’s. Zij bieden de mogelijkheid om elementen te integreren die geen webpagina of gebruikersinteracties nodig hebben. Zo kan een PWA bijvoorbeeld voor een groot deel offline gebruikt worden (via inhoudcaching) en kost het vrijwel geen ruimte om te installeren.

Kortom, dit zal een website creëren die zich visueel aanpast aan diverse eindapparaten en de look & feel van een mobiele app biedt. Je krijgt dus de beleving van een app, maar dan via de site of shop zelf.

Wat is headless e-commerce?

PWA’s worden headless in de vorm van een webshop gebouwd. Headless e-commerce wil zeggen dat de front-end (head) van de webshop is losgekoppeld van de backend. Waarbij normaal gesproken de front- en backend vanuit één platform zijn te beheren, wordt de front-end nu gevuld aan de hand van API’s. Dit geeft de front-end developer ten eerste meer vrijheid in het neerzetten van een uniek uitziende shop en ten tweede om koppelingen met andere kanalen te maken.

Hoe werkt PWA?

Shops en websites die als PWA ontwikkeld zijn, laten zich vanuit een browser opslaan op een telefoon. Daardoor wordt alleen ‘het jasje’, de minimale hoeveelheid HTML, CSS en JavaScript om het interface weer te geven en aan te sturen, bewaard. Deze moet ten eerste, natuurlijk, snel laden. Om deze constant snel te kunnen laden, moet deze gecached worden. Vervolgens moet de content dynamisch worden weergegeven, zodat de service workers de content kunnen inladen. Anders dan bij een mobiele (native) app vraagt een PWA om slechts een fractie aan schrijfruimte.

De service worker kun je zien als de motor van de PWA. Het is als een soort proxy tussen de browser en de website. De service worker laadt en cached de content. Ook zonder internetverbinding kan de content dus alsnog getoond worden. Mocht er wel een internetverbinding aanwezig zijn, kan de service worker alvast de nieuwe data synchroniseren op de achtergrond.

Tot slot is het mogelijk om met behulp van de nieuwste technieken en browserinnovaties in een PWA diverse native functionaliteiten aan te bieden. Welke bovendien ook nog eens snel en in sommige gevallen offline bruikbaar zijn.

De voordelen

Waarom zou je kiezen voor een PWA? Het doel van een PWA is om het beste van het web en apps samen te brengen. Deze voordelen zetten wij voor je op een rij.

• Responsive ongeacht scherm
  Ongeacht de grootte van het scherm, een PWA werkt op iedere browser en ieder device. Het is niet langer meer nodig om verschillende display-formaten te ontwikkelen.
• Offline functionaliteiten
  Doordat een PWA headless is gebouwd, staat de front-end los van de backend. Dit zorgt er voor dat een PWA ook offline of met matige internetverbinding toch in staat is om de inhoud weer te geven. De korte laadtijden zorgen voor een aanzienlijke stijging in conversie en zal het bouncepercentage verlagen.
• Kracht van het web, look & feel van een app
  Een PWA hoef je ten eerste niet te downloaden in de app store en de gebruiker hoeft daarom ook geen software updates uit te voeren. Een PWA is hierdoor altijd up-to-date en is toegankelijk voor iedereen. Dit biedt de kracht van het web. Om het gevoel van een app te geven, kan een snelkoppeling gemaakt worden op het startscherm van je apparaat. Dit maakt de drempel tot gebruik dusdanig lager. Er speelt geen app-store als ‘gate keeper’ en tot slot kan een PWA ook gewoon via een link (URL) worden gedeeld. Een PWA is hierdoor te indexeren door Google en beveiligd via HTTPS.
• Push-notificaties
  Niet alle, maar vele functies van native (‘normale’) apps zijn inzetbaar voor een PWA. Zo is het bijvoorbeeld mogelijk om push-notificaties te sturen.
• Minder kosten
  Je hebt niet langer meer een losse app en website, het bouwen van een PWA vereist slechts één systeem. Voor een responsive website en native app zou je anders drie verschillende systemen nodig hebben, namelijk Android, iOs en de website. Dit betekent daarentegen ook dat je maar in één systeem aanpassingen hoeft te doen.Door het gebruik van een PWA heb je dus geen dubbele ontwikkeling, geen dubbel beheer, geen dubbele marketing, etc. Kortom, minder kosten.
• SEO vriendelijk
  Doordat een PWA, in tegenstelling tot een native app, gevonden kan worden door Google, draagt de PWA gewoon bij aan je SEO.

Vue Storefront voor Shopware 6

Vue Storefront is een headless PWA front-end voor Shopware 6. Het is geschreven in Vue.js als een front-end bibliotheek en gebruikt Node.js als een server-API. Elastic Search dient als database, waardoor ook de snelheid van de webshop en PWA toenemen. Daarnaast garandeert het volledige PWA en offline ondersteuning.

Het werkt op alle apparaten, staat pushmeldingen toe, ondersteunt de offline catalogus, is zoekmachinevriendelijk, heeft lage gegevensvereisten en kan tot slot worden opgeslagen op het startscherm.

Het Vue.js framework zorgt onder andere voor een flexibel en plezierig kader om shops sneller in minder tijd te maken. De ‘headless architecture’ verbindt via API en zorgt voor een schaalbaar en flexibel project. Het is ontworpen voor een betere ontwikkelervaring.

Innovatie

Geheel nieuw is de technologie achter PWA’s niet. Daarentegen is het wel een groeiende markt, waar men zich richt op een soepele gebruikerservaring voor verschillende apparaten. Nu dat Google met Chrome en ook Apple met Safari overstag zijn, biedt het belangrijke kansen voor e-commerce. Zoals eerder genoemd, kunnen webshops met een PWA bijvoorbeeld gemakkelijk informatie toesturen via pushnotificaties. Denk aan onder andere de laatste communicatie over de bezorging van een pakket, een ontvangen retournering of aangemaakte credit.

Daarnaast biedt het ook ruimte voor innovaties zoals augmented reality. Vanuit een PWA is het namelijk mogelijk om hardware als de camera aan te spreken. Denk bijvoorbeeld aan de augmented reality functionaliteiten van de IKEA om producten met je smartphone in de fysieke wereld te kunnen zien. Maar het richt zich ook op de toekomst door zich klaar te maken voor trends zoals voice commerce of (PWA) chatbots.