Magento Progressive Web App

Als frontender voor Magento webshops klinkt dit als muziek in de oren. De nieuwste Frontend technieken, super snelle websites door slimme caching en native mobiele functies. Ik zal uitleggen waarom dit, ook voor U als klant, de toekomst is.

Wat is PWA

PWA staat voor Progressive Web App. Deze term is geïntroduceerd door Google in 2015. Een Progressive Web App is een web applicatie welke gebruik maakt van de laatste web technieken om een website te laten gedragen en voelen als een App welke je installeert op je telefoon.

Een aantal aandachtspunten voor een PWA.

  • Aan de basis van een PWA staat snelheid. Een website moet op een traag 3G netwerk binnen 5 seconden bruikbaar zijn.

  • De website moet voldoen aan veilige encryptie. De website wordt geladen via HTTPS. Dit is te herkennen aan een groen slotje in de adres balk.

  • De website moet op elk scherm werken. Door responsive technologie dient elke website te gebruiken zijn op desktop, tablet en mobiel.

  • De website moet ook offline beschikbaar zijn. Zelfs zonder verbinding moet je een website kunnen bezoeken. Dit maakt het gebruik van slimme caching doormiddel van Service Workers mogelijk.

Waarom is dit belangrijk?

Browsen en shoppen gebeurt steeds vaker op tablet of smartphone, maar vaak niet via een native app welke downloadbaar is via de app-store.

Gemiddeld worden per gebruiker per maand 0 apps gedownload en geïnstalleerd

Om precies te zijn 0.68 per device per maand. Dit verklaart waarom er nieuwe technieken zijn welke jou website laat werken als een app. Gebruikers van een website welke op een snelle 4G verbinding niet binnen 3 seconden geladen is haken af. Zeker met een webshop is dit niet wat u wilt.

Service Worker

Een featurevolle offline ervaring, regelmatige syncing op de achtergrond en push notificaties. Dit zijn functies welke je mag verwachten van een native app. Maar deze functies worden mogelijk gemaakt door Service Workers. Een Service Worker is een script welke in de achtergrond wordt uitgevoerd. Los van de web pagina. Dit script opent functies voor de webpagina, zoals slimme caching, offline ervaring, splashscreen (op smartphone), database caching en zelfs push notificaties.

Dit klinkt best technisch, is het stiekem ook. Om een voorbeeld te geven: De pokédex. Browse eens door deze website, zoek eens je favoriete Pokémon of bekijk een Pokémon. Zet nu je wifi-verbinding of internet uit en ga weer naar pokédex. Je ziet dat de volledige site en alle Pokémon nog steeds te bekijken zijn. Dit is onder andere wat een Service Worker mogelijk maakt.

Magento & PWA

Daan en ik zijn namens Get.Noticed naar Reacticon geweest om over de nieuwe technieken en de toekomst van Magento te leren. Het was best gezellig!

Magento is het meest gebruikte e-commerce platform in Nederland. Met 23% van de webshops ontwikkeld op Magento. Echter is Magento (nog) niet ingericht om out-of-the-box gebruik te kunnen maken van PWA features.

Magento is hard aan het werk om in de volgende update van Magento (versie 2.3) welke PWA Studio introduceert. Deze update verwachten wij in Q3 te kunnen gaan gebruiken en inzetten. Maar tot die tijd zijn er andere optimalisaties en technieken welke PWA wel mogelijk maken op de huidige Magento versie.

Slim javascript laden

Magento's javascript is nodig om specifieke functies op de website mogelijk te maken. Echter wordt op elke pagina alle javascript geladen, voor het geval de functie nodig is. Het is mogelijk om de javascript slim in te laden. Alleen het brood nodige voor die specifieke pagina.

De huidige Magento checkout pagina laadt 230 scripts in. Maar niet al deze scripts werken mee aan de functies van de checkout. Om alleen de functie van de checkout te laden is het mogelijk om de scripts terug te brengen naar +/- 10. Dit zorgt voor een significant snelheids verschil in laad tijd.

Hierdoor wordt de integratie in de Service Worker vereenvoudigd. Zoals eerder besproken zorgt de Service Worker voor het slim cachen van deze javascript bestanden.

Middleware

Een belangrijk onderdeel van dit geheel is de 'middleware' wat er voor zorgt dat de data verzameld wordt en zet dit door naar de frontend.

Dit is ook de plek waar verschillende databronnen bij elkaar komen, stel je eens voor dat je een Magento webshop hebt voor je catalogus en bestellingen te ontvangen met daarnaast een blog om content te maken. Met een middleware oplossing is het mogelijk om deze heel eenvoudig samen te voegen.

Een blog artikel van bijvoorbeeld WordPress met productinformatie vanuit Magento maakt natuurlijk de beste landingspages en biedt veel mogelijkheden om call to actions zo simpel mogelijk te maken.

Uiteraard hoeft het hiermee nog niet te stoppen, dit maakt het ook mogelijk om een PIM direct aan te sluiten op je voorraad weergave op de website. Het is niet langer noodzakelijk om eerst Magento voorraad te synchroniseren, maar toon direct de actuele voorraad vanuit het PIM systeem.

VueStorefront

Naast de ontwikkelingen van Magento zelf met Magento PWA Studio en enkele initiatieven van derden zoals Deity en FrontCommerce is op dit moment Vue Storefront de meest complete standalone PWA storefront.

Het grote verschil met de andere oplossingen is dat het in Vue JS is geschreven. De ontwikkelaars van Vue Storefront hebben deze keuze gemaakt om een developer vriendelijk framework aan te bieden waarbij productiviteit voorop staat. Hier is de demo van Vue Storefront te bekijken: demo

Ons mikpunt voor Magento PWA

Wij kunnen niet wachten tot Magento 2.3 uitkomt en wij prachtige oplossingen kunnen maken op de nieuwe software. Verschillende genoemde oplossingen moeten nog open source worden gemaakt. Wij volgen dit natuurlijk op de voet.

Maar tot die tijd zullen wij de javascript van Magento verbeteren om ook de huidige versie van Magento klaar te maken voor PWA compatibiliteit. Wij zullen ook door ontwikkelen op het VueStorefront. Wij willen als Fronteers ;) voor Magento binnenkort een eigen versie van de VueStorefront presenteren.

Vraag vooral naar de mogelijkheden.

Wil je meer informatie?

Neem contact met ons op, de koffie staat klaar!

Contact opnemen