PWA VS Mobile - Picqer meet and grill 2018

PWA en de mobile
ecommerce revolutie

Niek Verkoelen
Vendic
Magento / PWA

De wereld draait om mobile
Adverteerders geven vanaf volgend jaar meer geld uit aan reclame op mobiele
kanalen dan op desktop (Emerce, 19-06-2018)
Google zoekindex voortaan ‘mobile first’ (Emerce, 27-03-2018)
Maar liefst 93% van de Nederlanders is in het bezit van een smartphone. Daarmee
heeft Nederland de hoogste smartphone-penetratie van alle onderzochte landen
wereldwijd (Deloitte , 2018)

Dit is niks nieuws
Maar toch halen we er nog alles uit wat er in zit

Mobile ecommerce blijft een
vak apart
Het is een hele opgave om een erg goede mobile ervaring te bieden. Snelheid en user
experience (UX) zijn daarbij belangrijke factoren.

Gebruik van nieuwe technieken kunnen Mobile-
UX naar hoger niveau tillen

Een intro van PWA
En hoe het (mobile) ecommerce een stap verder kan helpen

Wie is er al bekend met de term Progressive
Web Apps (PWA)?

As a result of this, Gartner projects, by 2020,
“progressive web apps will have replaced 50% of
general-purpose, consumer-facing mobile apps.”
(Gartner, 2017)

Progressive Wep Apps (PWAs) zijn web applicaties die laden zoals
reguliere webpagina’s
maar bieden de gebruiker functionaliteiten zoals offline werken,
push notifications en hardware acces die traditioneel alleen
beschikbaar zijn voor Native Apps (wikipedia)

PWA is een relatief jonge techniek, die onze online
gebruikerservaring gaat verbeteren
PWA vergelijken met Native Apps biedt context

Draait direct in jouw
browser zonder dat je
het hoeft te
downloaden in een App-
of Play store
Draait als applicatie
op jouw smartphone.
Wordt gedownload
via een App- of Play
store
Beperkte
functionaliteit in
samenwerking met de
smartphone
Uitgebreide
functionaliteit in
samenwerking met de
smartphone
Web Apps en Native Apps, wat is het verschil?
Web App Native App

Wie shopt er wel eens bij Coolblue?
Wie shopt er wel eens bij Coolblue via de
Coolblue iPhone of Android App?

Waarom gebruiken we native apps in
ecommerce?
- Native apps zijn snel
- Bieden een zeer goede gebruikerservaring
- Ondersteunen push notifications
- Native apps hebben toegang tot de hardware van de telefoon
- Native apps bieden (standaard) een erg goede gebruikerservaring (User
Experience, UX)

Native Apps zijn er een tijdje,
wat leert de tijd?

Native Apps sluiten niet makkelijk aan op
ecommerce
Ondanks alle voordelen die ze bieden, zijn er ook een hoop nadelen

Native apps en ecommerce
- Programmeer taal wijkt af van het web (meer expertises nodig en meer
platformen om te bouwen / onderhouden)
- Native Apps moeten eerst gedownload worden via de AppStore of PlayStore
(1e kennismaking is geen snappy ervaring)
- Over het algemeen tijdsintensief om te bouwen en daarmee zeer kostbaar
- Geen naadloze integratie met de webervaring (indexing!)

Langere ontwikkeltijd en verschillende
platformen

Terug naar PWA
Kan PWA de voordelen van Native Apps behouden, maar de nadelen uitsluiten?

Progressive Wep Apps (PWA) zijn web applicaties die laden zoals
reguliere webpagina’s
maar bieden de gebruiker functionaliteiten zoals offline werken,
push notifications en hardware acces die traditioneel alleen
beschikbaar zijn voor Native Apps (wikipedia)

PWA’s brengen de Native App ervaring naar
jouw browser
Doordat de app in jouw browser draait lost het een aantal behoorlijke problemen op
voor webshops

PWA ziet er uit als een webpagina
Je opent het als een webpagina
Het is een webpagina
Het voelt als een Native App

Tijd voor een testrit
https://therake.com

Resultaten therake.com
- 80% stijging in organic traffic
- 20% stijging in conversie percentage
- 50% stijging in customer engagement

Welke voordelen biedt een PWA webshop t.o.v.
reguliere platformen?

Reguliere
responsive
website
Gebruikservaring aangepast op alle
schermen
✅
Snel 𐄂
App like ervaring 𐄂
Offline bruikbaar (of bij matige
verbindingen)
𐄂
Werkt zonder te downloaden ✅
Standaard indexeerbaar voor
zoekmachines
✅
Gebouwd met webstandaarden ✅
Native
App
✅
✅
✅
✅
𐄂
𐄂
𐄂
PWA
✅
✅
✅
✅
✅
✅
✅
Vergelijking

PWA is super snel
✅ Hogere conversie
percentages
✅ Blije bezoekers
✅ Jaloerse concurrenten
✅ Google zal je SEO
technisch rijkelijk belonen
✅ Geen App installatie fricties

PWA wordt gebouwd met webstandaarden
- Lagere ontwikkelings- en onderhoudskosten
- Sneller te updaten
- Makkelijker te managen ecosysteem
- Snellere Time to Market
- Naadloze ervaring met de rest van het web

PWA creëert een App like ervaring
- PWA webshops worden in 1x geladen
- Er worden geen pagina’s herladen bij het openen van een nieuwe pagina
- Service Workers maken functies als push notifications en meer mogelijk

Nadelen van PWA
- Nog niet alle platformen (iOS, Safari) ondersteunen volledige
PWA functionaliteiten
- PWA ecommerce platformen zijn nog niet zo volwassen als
de traditionele setups

Hoe werkt PWA?
Laag van HTML,
CSS en Javascript
Laadt de PWA
interface en wordt
lokaal gecached
Verzorgen de
“Native App”
functionaliteiten op
de achtergrond
Content wordt in de
App Shell geladen
App Shell ContentService Workers

Praktische (headless) implementatie van PWA
PWA frontend
Push
notifications
vanuit Picqer

Het is bereikbaar
- Magento komt in release 2.3 met PWA Studio
- Er ontstaan community platformen zoals Vue Storefront

Demo Vue Storefront
https://demo.vuestorefront.io

Waarom wij gek zijn op dit soort initiatieven?
- Het is Open Source. Iedereen mag en kan er aan werken en bijdragen
- Dit resulteert in een groot draagvlak en hoge ontwikkelingssnelheid
- Het heeft een duidelijke basis en visie
- Het maakt PWA beschikbaar voor de massa

Wanneer stap je in?
Het ideale instapmoment is
afhankelijk van:
- De mate waarin je bereid bent
om te investeren
- Hoe graag je een
technologisch leider wilt zijn
- De complexiteit van jouw
ecommerce setup

Voor de liefhebber van stats
www.pwastats.com biedt een overzicht van bekende PWA projecten en case studies.

Mocht je
www.pwastats.com biedt een overzicht van bekende PWA projecten en case studies.

Hebben we helemaal geen
Native Apps meer nodig?

Native Apps zijn geweldig en zijn zeker niet
overbodig geworden
Er zijn alleen aanzienlijke voordelen om voor PWA te kiezen wanneer ecommerce
in het spel is

Reden genoeg om
enthousiast te zijn

Concluderend
- PWA biedt een super snelle App like gebruikerservaring
- PWA biedt enorme kansen voor innovatieve webshops
- Het is geen kwestie of deze techniek voordeel voor jou biedt,
de vraag is wanneer je het beste in kunt stappen
- Het ideale instapmoment is waarschijnlijk eerder dan je
verwacht

Wil je meer weten over PWA?
Ik of mijn collega Tjitse vertellen je er graag meer over

PWA VS Mobile - Picqer meet and grill 2018

PWA VS Mobile - Picqer meet and grill 2018

Related slideshows

More Related Content

PWA VS Mobile - Picqer meet and grill 2018

Editor's Notes