Progressive Web Apps: wanneer wel / niet?
Leestijd: 7 minuten
Een Progressive Web App (PWA) als nieuwe optie voor het bouwen van je webshop, we horen er steeds meer over als een gunstig alternatief voor een native app of een responsive site. Hoewel de technologie nog volop in ontwikkeling is, zijn de voordelen inmiddels duidelijk. En dat zijn er heel wat! Voor je bezoekers en dus ook voor jou als webshophouder. Met betrekking tot de gebruikerservaring en conversiepercentage bijvoorbeeld.
Benieuwd of Progressive Web App je e-commerce systeem of je native app kan vervangen? En van welke voordelen je dan profiteert? Lees dan snel verder!
Wat zijn Progressive Web Apps?
Progressive Web Apps (PWA) zijn websites die zich gedragen als apps. Een PWA kan gebruikmaken van de native functionaliteiten van een mobiel apparaat, zoals camera, microfoon, en GPS. Een gebruiker ervaart de website daarom als een app, maar dus via de browser. Een groot voordeel van deze apps is: snelheid. Dit komt doordat de functionaliteit van de PWA en de content onafhankelijk van elkaar geladen worden. Alle data wordt progressief bij gebruik van de app ingeladen. Dit zorgt voor een super snelle laadtijd, zelfs met een slechte internetverbinding. Je kunt je dus wel voorstellen welke positieve effecten deze ultieme snelheid heeft op de gebruikerservaring van je bezoekers. Maar naast snelheid brengt het nog veel meer voordelen met zich mee.
Lees meer over Progressive Web Apps.
Je web performance verhogen? Lees ons e-book over web performance door of optimaliseer meteen met behulp van deze handige performance checklist.
De belangrijkste voordelen van PWA’s.
Voordeliger en makkelijker te ontwikkelen
Omdat PWA’s ontwikkeld worden met standaard webtechnieken, zijn ze relatief goedkoop om te implementeren en te onderhouden. Je hebt eigenlijk een webshop en app in één. Dat zou afzonderlijk vele malen duurder zijn geweest, aangezien ze dan allemaal in losse systemen ontwikkeld moeten worden (website + iOS app + Android app). Developers hoeven voor een PWA dus ook maar één standaard programmeertaal te beheersen. En bovendien ben je niet meer afhankelijk van de voorwaarden van de app stores. De ontwikkeling is makkelijker, maar ook bespaar je veel tijd (en dus geld!). Want alle content kan in slechts één systeem beheerd worden.
Meer gemak voor de gebruiker
Er is geen (betaalde) app download nodig. Gebruikers hoeven voor een PWA dus niks te installeren of updates door te voeren. Ze hoeven alleen maar te surfen naar een website. Dit scheelt opslagruimte op het apparaat van de gebruiker, want een PWA wordt op het web gehost. Nieuwe versies en bugfixes worden door developers doorgevoerd, zonder dat een gebruiker er iets van merkt of voor hoeft te doen. Een PWA is dus voor gebruikers altijd up-to-date. Je kan het gemak nog verder vergroten door gebruikers via een pop-up te activeren om de PWA toe te voegen aan het startscherm van hun smartphone. Dan wordt er eenzelfde soort icoontje als bij een app aangemaakt. En lijkt het alsof de gebruiker van een echte app gebruik maakt. De url is in dat geval ook niet meer in beeld.
Ook offline beschikbaar
Nog een groot voordeel: gebruikers kunnen zelfs je PWA bezoeken als er geen internet beschikbaar is! Doordat developers zelf kunnen kiezen welke elementen uit je shop beschikbaar moeten zijn voor offline gebruik. Dit kan door gebruik van de service worker. Dat is een script (javascript) dat op de achtergrond draait zonder dat de gebruiker de PWA gebruikt. Met de service worker ben je in staat bepaalde functionaliteiten van het apparaat te gebruiken, zoals push notificaties en background synchronisatie.
Meer over Progressive Web Apps?
Steeds meer organisaties stappen over naar PWA's. Wil je weten of deze nieuwe vorm van development past binnen je strategie? Neem gerust contact met ons op! We kijken graag mee naar jouw situatie en e-commerce strategie.
Meer marketingmogelijkheden (meer engagement!)
Bij een PWA kun je de native functionaliteit voor het verzenden van push notificaties benutten voor een hoger engagement met gebruikers. Ze zijn zo dus altijd te bereiken, zelfs als ze je shop niet gebruiken. Dit verhoogt traffic, maar hiermee stimuleer je ze ook om langer op de site te blijven hangen, en yes: dat verhoogt eveneens de kans op conversie. Een PWA kan makkelijk gedeeld worden via een normale url-structuur. En zoals eerder benadrukt: liefhebbers van je shop kunnen de PWA ook installeren op het startscherm van hun mobiele apparaat.
Een SEO booster
Doordat een PWA dus feitelijk een website is, wordt deze gewoon geïndexeerd door Google. In tegenstelling tot een native app. En dat biedt dus voordelen voor je vindbaarheid. Een PWA is, net als een mobile website overigens, goed te optimaliseren voor SEO. Daarnaast spelen snelheid en veiligheid een belangrijke rol, maar daarvoor zit je goed bij een PWA. Er wordt minder data gebruikt dus is de snelheid gewaarborgd. En met de toepassing van een https verbinding is ook de veiligheid zeker gesteld. Ook de toegenomen gebruiksvriendelijkheid op mobiel die ontstaat met een PWA, wordt door Google gewaardeerd en kan je positie flink boosten!
Overstappen naar headless commerce? Download gratis whitepaper
Je webshop super snel, gebruiksvriendelijk en zelfs beschikbaar maken als er geen internetverbinding aanwezig is. Als je voor headless kiest, open je een deur naar grote voordelen. Is de nieuwe headless technologie de toekomst? Lees nu over de voor- en nadelen van een headless CMS.
Oké, maar zijn er ook nadelen?
Hoewel er veel meer voordelen zijn dan nadelen, is het altijd goed om kritisch te kijken waar je rekening mee moet houden. De belangrijkste nadelen:
Niet alle functies van mobiel apparaat zijn te gebruiken
Je kunt niet van alle mobiele telefoon functionaliteiten gebruikmaken. Een PWA kun je bijvoorbeeld nog niet koppelen met de draadloze ‘Near Field Communication (NFC) communicatiemethode’. Ook toegang krijgen tot de kalender en de contactenlijst van de gebruiker is nog niet mogelijk bij PWA’s. Daarnaast kun je in chrome een PWA al koppelen met Bluetooth maar bijvoorbeeld in FireFox en Safari nog niet. Het hangt van je platform en browser af welke functionaliteiten van het apparaat gebruikt kunnen worden.
Geen app marketing via app stores
Op dit moment ben je met een PWA nog niet vindbaar in de app store. Om ervoor te zorgen dat gebruikers de PWA toevoegen aan het startscherm, kun je ze een pop-up tonen. Maar een gebruiker krijgt pas een ‘add to homescreen’ melding in de browser als hij de website 2 keer heeft bezocht binnen 2 weken. Slim dus om je gebruikers hiervan op de hoogte te brengen. Dat de PWA nauwelijks opslagruimte kost, maakt het voor gebruikers vaak wel aantrekkelijker om een PWA op te slaan (in plaats van een app te installeren). Dit is echter op dit moment nog een nadeel, maar Google is volop bezig met Progressive Web App development om dit aan te passen met het openen van de Play Store voor PWA's.
Indien je toch echt je PWA in de Google Play Store wil is er wel een omweg om deze toe te voegen, namelijk met behulp van Trusted Web Activity. Hiermee render je de website tot een echte app.
Wat je verder nog moet weten?
1. Is een bestaande (Magento 2) webshop om te zetten naar een PWA?
Ja, dat is zeker mogelijk. Het is uiteraard wel afhankelijk van de functionaliteiten die je wilt gebruiken. De meeste tijd gaat zitten in de uitbreidingen van je PWA met native features van het mobiele apparaat. Dus welke native features je wilt gebruiken en de complexiteit van je bestaande website, bepalen de omvang van het omzetten van je bestaande shop naar een PWA. Als je wilt dat de webshop ook offline gaat werken, vraagt dit meer tijd.
Een PWA ontwikkelen betekent frontend loskoppelen van de backend. Een uitdaging nog wel, zeker bij een complexe Magento 2 shop. Maar met de aankondiging van Magento PWA studio biedt Magento de oplossing. Dit is een toolset om een PWA mee te bouwen. Het koppelt de storefront los van de Magento backend. Via de Magento API communiceer je dan met de backend van je Magento shop. Zo is het dus mogelijk om een zelfgemaakte storefront toe te voegen. Je bent bovendien niet meer gebonden aan PHP. De PWA Studio maakt deel uit van Magento 2.3.
Meer informatie over e-commerce platform Magento.
2. Ik twijfel tussen een PWA en een native app, wat is het beste advies?
Een PWA is een verrijking van de mogelijkheden op het web, maar zal een native app voorlopig niet vervangen. Qua functioneren concurreren PWA’s pas met native apps als ze ook alle mogelijkheden van een mobiel apparaat krijgen. Maar dat is nu nog niet het geval. Het beste advies is afhankelijk van je doelstelling. Waarom wil je een app? Wat moet deze app kunnen? En wat is de toegevoegde waarde? Dit laatste is essentieel, zeker bij een native app. Aangezien je doelgroep hiervoor een handeling moet verrichten: het downloaden van de app. Dat is vaak best wel een drempel. Een PWA is een laagdrempeliger alternatief. Denk dus ook aan je doelgroep.
Verder is het goed om stil te staan bij de uitstraling van je oplossing. Indien de app dezelfde beleving, look and feel dient te hebben en vooral een aanvulling moet zijn op je huidige website, is een PWA een goede oplossing. Als alle functionaliteiten die je in je app wilt ook te realiseren zijn via een PWA, is dit zeker het overwegen waard. En daarmee profiteer je van de eerder genoemde voordelen. Maar wanneer je app een totaal andere beleving moet creëren of wanneer je native functionaliteiten van een mobiel apparaat wilt inzetten die niet door alle browsers ondersteund worden, blijft de native app voor nu de beste keuze! De app is dan iets totaal anders dan je website.
Meer informatie over PWA's.
PWA’s nog volop in ontwikkeling - be ready!
Het is van belang om te beseffen dat we ons nog altijd in de (door)ontwikkelingsfase bevinden, wat betreft PWA’s. Nog niet alle functionaliteiten van de telefoon worden al ondersteund door browsers en het is nog onduidelijk welke verdere gebruiksfuncties in de toekomst ondersteund gaan worden. Op dit moment is Google in de lead, waardoor het in eerste instantie allemaal erg Android gerelateerd is. Apple blijft gelukkig niet achter, na lang wachten werd de ondersteuning van PWA’s in de 11.3 iOS-update officieel uitgebreid. En dat betekent dat ze makkelijker en in grotere aantallen geïmplementeerd kunnen gaan worden.
Als de technologie dus zover is, dat meer native functionaliteit gebruikt kan worden in PWA’s en de de activatie met een druk op de knop te realiseren is, zal het hard gaan. Dus be ready voor als het zover is!
Download gratis e-book web performance
Eén van de voordelen van een Progressive Web App (PWA) is top-performance. Wil je meer weten over hoe performance in elkaar steekt en hoe jij je website kunt optimaliseren - ongeacht of je een PWA gebruikt -, download dan onze gratis whitepaper over web performance.
Vul je gegevens in en ontvang de download in je inbox.
Blijf op de hoogte!
Eens per maand verzamelen we al het relevante nieuws die jou kan helpen excelleren in deze toffe, uitdagende wereld van e-commerce. Vul je e-mailadres in en ontvang jouw maandelijkse dosis inspiratie.
Meer weten over PWA's?
Hi! Aangenaam, mijn naam is Ezra, webdeveloper bij Bluebird Day. Misschien twijfel je tussen een Progressive Web App en een native app, of je vraagt jezelf af wanneer een PWA een slimme keuze is? Ik help je graag met jouw vragen en uitdagingen!
