Progressive web apps & Magento: alles wat je erover wilt weten

De definitie van Progressive Web Apps

Een Progressive Web App kun je omschrijven als de hybride variant op  een webpagina en een app: ze heeft namelijk zowel eigenschappen van apps als van webwinkels. Progressive staat voor de manier waarop de pagina zichzelf laadt. Ben je een pagina aan het bekijken, dan wordt de achterliggende pagina alvast geladen -met een snel ladende webwinkel als gevolg. Web refereert naar de (web)taal waarin de pagina geschreven is, zoals HTML of Javascript. Ook het predicaat app is van toepassing aangezien de pagina zichzelf installeert en z’n code draait vanaf de computer of het apparaat van de bezoekers.

Afbeelding 1: Mobile.twitter.com is een voorbeeld van een PWA

Waar komen PWA's vandaan? 
PWA’s zijn een uitvinding van Google. Om in aanmerking te komen voor deze ‘weergave’ dient je webwinkel aan een set van Google’s performanceregels te voldoen. Over deze regels vertel ik straks inhoudelijk meer, maar het is goed om te beseffen dat dit geen eenvoudige uitgangspunten zijn. Magento komt daarom met een nieuwe integratie (‘Magento PWA studio’) die het platform zal laten voldoen aan de performanceregels die Google stelt.

Wat zijn de voordelen van een PWA als webwinkel?

Kijken we naar gebruiksvriendelijkheid, dan zien we dat zowel websites en apps voordelen hebben ten opzichte van elkaar. In Progressive Web Apps worden deze voordelen met elkaar gecombineerd. Ten opzichte van een ‘normale’ Magento-webwinkel heeft een Magento-PWA de volgende pluspunten:  

• De laadtijden gaan omlaag. Bij webwinkels wordt er voor elke nieuwe pagina een volledige pagina op de server geladen. Bij een PWA wordt er veel in de browser van de eindgebruiker gedaan, waardoor er minder druk op de server komt te staan. En dat resulteert in een kortere laadtijd van de pagina!
• Een PWA is ook offline beschikbaar. PWA’s zijn offline compatible. Dit betekent dat bezoekers ook zonder internetverbinding in je webwinkel kunnen browsen en de winkelwagen kunnen gebruiken. Valt de verbinding weg terwijl er een betaalactie wordt verricht? Dan zet de app deze actie in de wacht tot het moment dat er weer verbinding is.
• Het is mogelijk om webwinkels te bookmarken. In dat geval verschijnt er een icoon op het beeldscherm met het uiterlijk van een app-icoon.

Afbeelding 2: een app-icoontje voor PWA’s

• Eén PWA werkt op elk apparaat. Dankzij PWA hoef je geen aparte apps te ontwikkelen voor verschillende besturingssystemen.
• Conversievriendelijkheid. Het praktische gebruik en de laagdrempeligheid van PWA’s zorgt ervoor dat er sneller geconverteerd wordt. Er zijn zelfs bronnen die melden dat deze oplossing tot 80 procent meer conversie leidt.

Zijn er ook nadelen?

Het belangrijkste nadeel van PWA’s is het extensieve proces wat komt kijken bij het voldoen aan Google’s richtlijnen. PWA’s zijn een nog grotendeels onontgonnen terrein, wat betekent dat ook doorgewinterde developers de tijd moeten nemen om zich nieuwe vaardigheden meester te maken. Gelukkig besteedt Magento veel aandacht aan het zo laagdrempelig mogelijk maken van de overgang. Magento vermeldt op hun website het belang van zelf-educatie, gebruikerservaringen en het verwerken van feedback hierop.

Wat zijn de PWA-richtlijnen voor een webwinkel?

Google hanteert een set van vier richtlijnen waaraan je moet voldoen om te spreken van een PWA. Deze richtlijnen vat Google samen in het RAIL-model:

1# Response

De response-richtlijn omschrijft dat er ‘iets’ binnen 100 milliseconden dient te gebeuren zodra de gebruiker een actie verricht. Bezoekers mogen dus niet te lang wachten op een reactie.

2# Animation

Bewegingseffecten dienen vloeiend te zijn. Bezoekers moeten vloeiend kunnen scrollen en er zijn ondergrenzen voor het aantal frames per seconde bij animaties (> 60 frames per seconde).

3# Idle (‘wachttijd’)

‘Idle time’ is de tijd waarin je een applicatie in gebruik hebt en er geen zaken hoeven te gebeuren. De data die je (waarschijnlijk) straks wilt gaan gebruiken wordt alvast ingeladen, zodat de webwinkel extra snel reageert wanneer de bezoeker  een actie verricht op de pagina (deze was immers al klaargezet). Volgens Google’s richtlijn dient deze tijd zo maximaal mogelijk te zijn en mag het gebeuren van zaken maximaal 50 milliseconden duren om te voorkomen dat de web app langzaam wordt.

Tip: lees in deze blog hoe je de performance van je webshop verbetert

4# Load

Deze richtlijn stelt dat content en interactiviteit in minder dan 5 seconden tot stand moeten komen. Hoe snel een webwinkel is, hangt overigens grotendeels af van het type mobiele apparaat en het type internetverbinding dat de eindgebruiker gebruikt (3G, 4G of 5G). De laadtijd is van cruciaal belang voor de gebruikersbeleving. Een snelle laadtijd vertaalt zich in langere sessies, lagere bouncepercentages én heeft een positieve impact op je SEO en je conversiepercentage.

Afbeelding 3: het interactief worden van content mag maximaal 5 seconden in beslag nemen

Snelheid is dus een duidelijk terugkerend thema. Onderstaand vind je een stuk van een artikel van Google waarin je ziet wat de impact is van trage laadtijden op het oordeel van bezoekers:

Afbeelding 4: de impact van trage laadtijden op gebruikerservaringen [Bron: Google]

Kortom, één seconde is al genoeg om je bezoeker van z’n à propos te brengen! Het RAIL-model is duidelijk geënt op het zo snel mogelijk laden van content. Dit maakt een krachtig contentplatform een echte must have.

Wat doet Magento om PWA-proof te worden?

Zoals eerder aan bod kwam, speelt Magento hier straks op in met Magento PWA Studio. PWA Studio gaat uit van een ‘headless CMS’. Het woord ‘headless’ heeft betrekking op de front end (het ‘gezicht’) van de webwinkel. In het geval van een Magento-webwinkel betekent een headless-oplossing dat je geen Magento storefront nodig hebt om taken uit te voeren. Je bent vrij om de storefront naar eigen inzicht in te vullen. Deze wordt dan wel 'gevoed' met data uit Magento zelf. 

Vanaf wanneer zijn er Magento-PWA’s ?

Voor de release van Magento 2.3 is nog geen specifieke datum bekendgemaakt –maar de verwachting is dat Magento midden 2018 met een update komt. 

Dit is PWA in een notendop. Wil je op de hoogte blijven van nieuwe Magento-blogs? Schrijf je dan in voor onze nieuwsbrief en mis geen enkele post!  Degenen die graag meer te weten willen komen over sitespeed raad ik aan om de gratis webinar-video over sitespeed van mijn collega Patty Bastiaansen eens te bekijken.