PWA (Progressive Web Apps) is een van de meest besproken technologische verschuivingen op het web en heeft een ongeëvenaard momentum gekregen onder de beoefenaars in de IT-wereld. Als u bouwt voor het web, weet ik zeker dat PWA het nieuwste ‘buzzword’ is dat aan uw werkvocabulaire is toegevoegd. Het is niet verwonderlijk, want PWA heeft de verre droom van het installeren van web-apps op de telefoon voor echt gemaakt.
Er is al veel spotlight en ‘geekspeaks’ geweest over het bouwen van PWA en de voordelen ervan. De meeste pogingen om PWA te introduceren, vooral voor de nieuwelingen, lijken gevuld met jargon of hadden te veel code die hen zou kunnen intimideren om de eerste stap te zetten. In dit artikel probeer ik een snapshot te geven van PWA, net genoeg om een kickstart te geven aan hun leerproces.
Wat is een Progressive Web App?
“Progressive Web App (PWA) is een term die wordt gebruikt om een nieuwe software-ontwikkelingsmethodologie aan te duiden. In tegenstelling tot traditionele applicaties zijn progressive web apps een hybride van gewone webpagina’s (of websites) en een mobiele applicatie. Dit nieuwe applicatiemodel probeert de mogelijkheden van de meeste moderne browsers te combineren met de voordelen van mobiele ervaring.”
Dit is wat wikipedia zegt over PWA. Nou, dit lijkt misschien een beetje vaag of zelfs omstreden. Dus laten we eens op een informele manier naar PWA kijken.
Als ooit het beste van web en het beste van apps een kloon-kind hadden – dan is het PWA. Of anders, het is gewoon dat de webpagina alle ‘juiste vitaminen’ heeft genomen zodat het zich meer kan gedragen als een app gedownload uit de App Store / Play Store. Het begint als een normale webpagina in een browser, en als een gebruiker de webpagina verkent, krijgen ze de vraag of ze willen “Toevoegen aan beginscherm”. Zodra de gebruiker de duimen omhoog geeft op deze vraag, VOILA! PWA wordt toegevoegd aan hun startscherm. Eenmaal geopend vanaf het startscherm, kan het zelfs de browser UI controls verbergen en verschijnen als een app.
Dit is meer als een veredelde bookmark die de sweet spot heeft geraakt tussen het web en mobiele apps. Ik zeg dit omdat PWA erin is geslaagd om de kloof in het web te overbruggen. Het web is altijd dorstig geweest naar betrouwbare prestaties op gelijke hoogte met de native apps. Het heeft altijd verlangd naar een plaats in de notificatiebalk en in het startscherm, net als een app. Meer dan 40% van de gebruikers stuitert op websites die er meer dan 3 seconden over doen om te laden. PWA is een oplossing voor deze “Web Obesitas Epidemie” onder gebruikers.
Het draait allemaal om het wegnemen van frictie en het gemakkelijk maken voor gebruikers om te bereiken wat ze willen.
De eer voor deze naadloze ervaring moet volledig worden gegeven aan de Service Worker (een script dat de browser op de achtergrond uitvoert, los van de webpagina), die de ruggengraat is van elke PWA. De service workers maken betrouwbare en intelligente caching, het op de achtergrond updaten van content, push notificaties en de meest aantrekkelijke offline functionaliteit mogelijk naar eerder bezochte sites. Dit betekent dat, na het eerste bezoek aan een website, de site en app betrouwbaar snel zijn, zelfs op flaky netwerken.
Maar hier kan een vraag rijzen – hoe zit het met de snelle eerste lading met betrouwbare prestaties? Dat is wanneer Accelerated Mobile Pages (AMP) samenkomt met service worker. AMP biedt betrouwbaar snelle webcomponenten voor de eerste lading. Deze componenten zijn veel sneller te laden en minder data hongerig. Websites die de combo van AMP en Service Worker gebruiken zullen een betrouwbare snelheid bieden zoals van native apps. Zodra de pagina is geladen stelt de site de service worker in en worden assets op een intelligente manier gecached. Dit houdt de PWA altijd up to date en bevrijdt de gebruikers van de frequente updates die vanuit de App Store gedaan moeten worden.
PWA in een notendop:
- Betrouwbaar : Snel laden en werkt offline
- Snel : Soepele animaties, scrollen zonder jank en naadloze navigatie, zelfs op onbetrouwbare netwerken
- Betrokken : Opstarten vanaf beginscherm en kan push-notificatie ontvangen
Waarom is het belangrijk ?
Het is een mythe dat gebruikers graag de app downloaden van elke website die ze vaak bezoeken. Volgens Comscore Mobile App Report downloadt meer dan 50% van de gebruikers van smartphones in Amerika nul apps per maand. Dat wil zeggen dat de tijd dat de telefoon vol staat met apps voorbij is en dat de wittebroodsweken van mensen met een smartphone stilaan voorbij zijn. Elke stap om een app te downloaden vermindert 20% van de gebruikers. PWA vermindert de stappen tussen het ontdekken van een app en het op het startscherm krijgen ervan en elimineert zo de frictie om een app geïnstalleerd te krijgen. Dit biedt een zeer vruchtbare bodem voor bedrijven om hun PWA in te zetten.
De volgende drie metrieken kunnen worden belicht om het belang van PWA in de vormgeving van het toekomstige web te begrijpen.
a. Bereik: Het mobiele webpubliek is de afgelopen jaren in een explosief tempo gegroeid. Google heeft gemeld dat Chrome maar liefst 1 miljard mobiele gebruikers heeft, terwijl dat er in 2016 nog 400 miljoen waren. Volgens het rapport van Comscore is het bereik van mobiel web 2,5 keer groter dan dat van apps, als we kijken naar de top 1000 sites en apps. Dit is de reden waarom de beslissing van Flipkart, Myntra enz. om hun website te verlaten en ‘app only’ te worden, averechts heeft gewerkt. Als we een betere ervaring kunnen bieden aan een breder publiek, kunnen we zeker een concurrentievoordeel krijgen ten opzichte van de anderen.
b. Acquisitie : Een ander serieus punt van zorg voor de mobiele apps is de vindbaarheid voor gebruikers in vergelijking met websites. De kosten van het werven van gebruikers op het web zijn 10 keer goedkoper dan die van native apps. Met meer exposure en lage frictie voor on-boarding, zal PWA waarschijnlijk meer gebruikers werven tegen zeer lage kosten.
c. Conversie: De naadloze end-to-end gebruikerservaring, zelfs met flaky netwerken die door PWA wordt geboden, verbetert het aantal succesvolle conversies. Flipkart lanceerde hun PWA ‘Flipkart-lite’, waarvan ze beweren dat het een toename van de conversie met 70% heeft opgeleverd met lagere acquisitiekosten.
Om samen te vatten : PWA helpt conversies te verbeteren door het potentiële bereik te vergroten met lage acquisitiekosten.
Hoe begin je eraan?
Als je eenmaal een nieuwe technologie hebt leren kennen, is de volgende uitdaging de beslissing om deze te adopteren. De meeste mensen komen op dit punt in een dilemma. De beslissing moet worden ingegeven door uw specifieke bedrijfsbehoeften. De volgende twee gevallen kunnen u helpen bij het identificeren van de methode die bij u past om PWA te implementeren.
a) Vanaf de basis
Bedenk het scenario wanneer een bedrijf een nieuwe website bouwt of een redesign ondergaat. In dit geval is het zinvol en haalbaar om een PWA vanaf de basis te bouwen. Dit zal het bedrijf in staat stellen om de kracht van PWA met AMP, service workers, App shell en Web Manifest te benutten. Bijvoorbeeld. Volgens Ali Express, toen ze eenmaal hun website vernieuwden als PWA, waren ze in staat om hun conversiepercentage voor nieuwe gebruikers met 104% te verhogen, kregen 2X meer bezochte pagina’s per sessie per gebruiker over alle browsers en 74% toename in de tijd besteed per sessie over alle browsers.
b) Een eenvoudige versie of Een enkele functie
Wanneer bouwen vanaf nul niet realistisch is, kan men altijd een eenvoudige versie van de website bouwen of zich richten op een enkele functie die een hoge impact heeft voor eindgebruikers. De focus ligt op het leveren van een snelle, boeiende en betrouwbare ervaring. AirBerlin is in dit geval een geschikt voorbeeld. Zij focusten zich in hun PWA op de post- booking experience. Nadat een passagier heeft ingecheckt, heeft hij toegang tot zijn reisgegevens en instapkaart, zelfs zonder internetverbinding.
4. Uitdagingen in PWA
Er zijn een aantal uitdagingen in PWA die moeten worden overwogen bij het kiezen ervan.
a) Cross Browser Support: Terwijl Chrome, Opera, en Samsung’s android browser PWA ondersteunen, moeten IE, Edge en Safari hun ondersteuning nog uitbreiden.
b) Beperkte Functionaliteit: PWA heeft geen ondersteuning voor hardware die niet wordt ondersteund door HTML5
c) Beperkte Legitimiteit: Aangezien er geen centrale download Store is voor PWA, missen ze in het geven van een gevoel van legitimiteit en vertrouwen dat meestal wordt gegeven door native apps van Play Store/App Store.
d) Cross Application Login Support : Native apps hebben de mogelijkheid om met andere apps te praten en logins te authenticeren (Facebook, Twitter, Google). Als webpagina, heeft PWA niet de mogelijkheid om te communiceren met andere geïnstalleerde apps.
Conclusie
We kunnen niet zeggen dat PWA Native Apps zal doden in de toekomst. Maar toch is er een groeiende belangstelling voor deze aanpak in de gemeenschap. PWA’s staan nog in de kinderschoenen en er moeten nog veel uitdagingen worden aangepakt. Toch hebben ze de potentie om een verschuiving teweeg te brengen in de manier waarop het web werkt.
Bedenkvoer
Volgens Henrik Joreteg is “PWA het grootste wat er op het mobiele web is gebeurd sinds Steve de iPhone introduceerde!”
Twistbaar? Controversieel? Instemming?
Denk na voordat de tijd vliegt!