Skip to content
shopware-6-big-2
Team ZeoJan 13, 2022 2:04:13 PM

PWA plugin versus vue storefront

PWA voor Shopware 6: twee oplossingen vergeleken

Progressive Web Aps, kortweg PWA’s, zijn aan een opmars bezig. Hetzelfde geldt voor Shopware 6, de nieuwste versie van de flexibele e-commerce software uit Duitsland. Hoe combineer je beide en voeg je PWA-functionaliteit toe aan Shopware 6? Twee oplossingen zijn veel gebruikt: de PWA Plugin die we bij Zeo ontwikkelden en Vue Storefront. Welke is de beste voor jou?

De meerwaarde van PWA’s zijn inmiddels breed bekend. Ze combineren de voordelen van een app en een mobiele site en ze bieden de technische basis voor mobile first strategieën.

PWA Plugin

Zeo’s Storefront to Progressive Web App is gebouwd om drempels weg te nemen. De PWA Plugin, zoals we hem verder noemen, maakt het eenvoudig en kostenefficiënt om PWA-functionaliteit toe te voegen aan elke webshop in Shopware 6. Dit kan door gebruik te maken van moderne browser technieken, die op basis van een configuratiebestand en wat JavaScript een app genereren. Deze app wordt vervolgens geïnstalleerd op een smartphone en gebruikt om direct en snel de webshop te bezoeken.

Daarnaast implementeert de PWA Plugin zogenaamde service workers, waarmee gebruikers de shop out of the box kunnen bezoeken als ze offline zijn. De lokale opslag van bestanden in de browser zorgt bovendien voor snellere laadtijden. In de admin-omgeving kunnen beheerders deze browser caching zelf configureren en de beschikbare opslagruimte zodoende optimaal benutten.

De PWA Plugin biedt onder meer: 

  • browser caching, waardoor pagina’s snel laden;
  • 80% offline support: de meeste mogelijkheden van de PWA zijn beschikbaar zonder internet. Er wordt alleen (nog) geen gebruik gemaakt van queueing, waarmee gebruikers hun winkelmandje kunnen vullen en afrekenen; 
  • de optie om de webshop via het startscherm te bezoeken (‘Add to home screen’);
  • storefront én plugin compatibility: alle native functionaliteiten van Shopware en alle functionaliteiten van plugins kunnen in de PWA worden aangeboden.

Vue Storefront

Vue Storefront is een PWA-oplossing die niet alleen werkt voor Shopware, maar ook voor verschillende andere e-commerce platformen. Ze is gebaseerd op het populaire web framework Vue.js. Gebruikers van Shopware 6 kunnen hun bestaande storefront laten vervangen door de Shopware PWA van Vue Storefront via een API.

De PWA-oplossing van Vue Storefront biedt onder meer: 

  • hoge laadsnelheden dankzij lokale caching;
  • 100% offline support: ook zonder internet is het mogelijk om winkelmandjes te vullen en bestellingen te plaatsen;
  • verschillende native app features, zoals installatie op het startscherm en push-notificaties (via customization).

De verschillen

Vue Storefront biedt een volledige one page app op basis van Vue.js. Dit betekent dat de standaard Shopware-storefront niet gebruikt wordt en dat plugins die daarop leunen niet compatible zijn. Deze PWA-oplossing vereist hierdoor meer maatwerk dan Zeo’s PWA Plugin, die 100% compatible is met Shopware’s storefront en plugins.

Vue Storefront biedt wel 100% offline support, waar de PWA Plugin op het moment van schrijven 80% offline support aanbiedt. Het verschil zit ‘m als gezegd in de queuing van acties die de bezoeker uitvoert. Dit kan door extra development echter aan de PWA Plugin worden toegevoegd, de beperking zit dus niet in de vorm besloten.

Shopware werkt ondertussen samen met Vue Storefront om een Shopware-waardige storefront te creëren met extra functionaliteiten zoals een barcodescanner en productconfigurator. Dit zal op termijn waarde toevoegen aan deze PWA-oplossing, waar wel een prijskaartje aan hangt.

Conclusie

Bedenk goed welke oplossing voor jou relevant is en weeg het bovenstaande daarin mee. Het is ook goed mogelijk om te beginnen met de PWA Plugin. Je kunt, mocht het kostenefficiënter blijken, eventueel later besluiten je Shopware-storefront te vervangen door Vue Storefront. Kijk ook dan goed naar de nadelen op het gebied van compatibility en naar de offline ondersteuning die het alternatief op dat moment biedt.

OPMERKINGEN

GERELATEERDE BLOGS