071 - 576 13 23
4 Redenen voor een Progressive Web App

4 Redenen voor een Progressive Web App

door op 26 maart 2018


Sinds een tijdje hoor je wellicht de term Progressive Web App (PWA) voorbijkomen, zonder wellicht precies te weten wat het is, of wat je er aan hebt. Een PWA is een nieuw Google-concept waarmee de scheidslijn tussen app en webapp vervaagt.

Het uitgangspunt is dat je met een aantal technische toevoegingen een website kan installeren als een app op je telefoon, met een eigen icoon op de homescreen. Voor de duidelijkheid, dit gebeurt dus niet in de App Store, maar gewoon vanuit je eigen website.

pwa image

De Service Worker; een onzichtbare harde werker

PWA’s leunen sterk op een nieuwe techniek: Service Workers. Service Worker is een techniek waarmee JavaScript op de achtergrond uitgevoerd kan worden. Een Service Worker wordt door de website geïnstalleerd zonder tussenkomst van de gebruiker (net als bijvoorbeeld een cookie) en het bevindt zich eigenlijk tussen de voorkant van de applicatie en de buitenwereld.  

Hiermee kan een webdeveloper allerlei functionaliteiten toevoegen aan een website. Functionaliteiten die tot nu toe voorbestemd waren voor app-ontwikkelaars. Immers, door op de achtergrond te draaien hoeft de gebruiker niet meer de website te openen om toch interactie te hebben.

Het meest directe voordeel is natuurlijk dat je niet meer een app hoeft te ontwikkelen (en onderhouden!) voor elk platform, maar in één keer klaar bent. In dit artikel geef ik je daarnaast nog 4 redenen waarom je nog dit jaar een Progressive Web App wilt hebben.

1. Razendsnelle websites

Uit onderzoek (Google/SOASTA, “The State of Online Retail Performance,” April 2017.) blijkt dat elke seconde dat een gebruiker moet wachten, dit 20% conversie kost. Elke seconde telt dus letterlijk.

Door de positie van een Server Worker tussen de voor- en achterkant in kan het requests onderscheppen die op weg zijn naar een webserver en een eerder opgevraagde versie teruggeven aan de voorkant. Dat proces gaat razendsnel. Er wordt niet eens gewacht op een antwoord van de server; de voorkant van de webapp speelt dus eigenlijk even voor webserver. Met de Workbox library van Google is dit gemakkelijk ingesteld.

Dit hebben we bijvoorbeeld toegepast op de routeplanner die we hebben ontwikkeld voor Fastned, waardoor de webapplicatie binnen 200ms(!) geladen is en de gebruiker direct aan de slag kan.

2. Jouw webapp offline beschikbaar

Het maakt voor de service worker niet uit of de uiteindelijke webserver antwoord geeft. Het opent de deur naar een voordeel dat eerder enkel was weggelegd voor native apps: offline beschikbaarheid. Dat is huge! Jouw webapp blijft dus gewoon werken terwijl je klant in het vliegtuig zit, of de gebrekkige wifi-connectie van de Starbucks het even niet doet.

3. Engagen via pushmeldingen

Een vaak gehoord argument voor het bouwen van een native app zijn pushmeldingen, tot nu toe was het bouwen van een native app namelijk de enige manier om deze te verzenden naar je gebruikers.

Met de komst van de Push-API is daar verandering in gekomen. Deze registreer je vanuit een Service Worker en zorgt ervoor dat jouw webapp, zelfs wanneer de browser niet actief is, een pushmelding kan ontvangen. Natuurlijk wordt de bezoeker wel eerst even om toestemming gevraagd.

Tweakers.net heeft dit onlangs geïmplementeerd, waardoor je bijvoorbeeld een pushbericht ontvangt als iemand je mentioned of een berichtje stuurt.

4. Ondersteuning is eindelijk op orde

Begin dit jaar kwam eindelijk de tweet waar webdevelopers lang op hebben gewacht; Apple gaat Service Workers toevoegen aan de opkomende versie van Safari op iOS én MacOS. Daarmee komen ze in het rijtje bij Firefox en Chrome (Google zet vol in op deze techniek!). Tevens komt ook de volgende versie van Edge (de opvolger van Internet Explorer) uit met ondersteuning.

serviceworker

Mijn schatting is dat aan het einde van dit jaar hiermee het percentage geschikte mobile devices wereldwijd rond de 95% wordt. In Nederland zal dit wellicht nog hoger zijn; hier updaten we (gelukkig) relatief snel onze telefoons.

Conclusie

Jarenlang hebben we moeten werken met halve oplossingen om native apps te bouwen met webtechnologieën, bijvoorbeeld door middel van Ionic en Cordova. Al deze hybride oplossingen laden uiteindelijk de webapp in een soort frame, wat allerlei gedoe oplevert.

Nu is er dus eindelijk licht aan het einde van de tunnel en kan je nu écht apps ontwikkelen met HTML, JavaScript en CSS.

Hoe de toekomst er precies uitziet, weet ik natuurlijk ook niet. Misschien betekent dit wel het einde van de appstore, of gaan we daar binnenkort webapps verwelkomen. Wat ik wel weet is dat Google zijn gewicht volledig achter de PWA’s heeft gezet en als hofleverancier van het mobiele landschap (bijna 90% van de mobiele markt is Android in Nederland) is dat meer dan een teken aan de wand.

 

Wil jij ook aan de slag met Progressive Web Apps?
Bekijk onze vacatures