Een PWA, wat is dat nou weer?
PWA staat voor Progressive Web App. Aha, zeg dat dan meteen! Nu wordt alles in één keer duidelijk, toch? Niet? Ok, ik zal proberen het in gewone-mensen-taal uit te leggen.
Progressive Web Apps zijn websites die zich gedragen als een app die je uit de iOS App Store, de Google Play Store of vooruit… de Microsoft Store haalt. Dit soort websites bieden een zeer prettige gebruikerservaring, doordat ze:
- Soepele pagina-overgangen hebben
- Snel laden
- Ook werken met een slechte of geen internetverbinding
- Zijn te bewaren op het home screen van je telefoon zonder ze te hoeven installeren
- Op volledig scherm getoond worden op een smartphone (dus geen adresbalk of knoppen onderaan het scherm)
Door deze eigenschappen geven deze websites de gebruiker het gevoel een ‘echte app’ in handen te hebben.
Eén app voor iOS, Android en Windows
Het mooie voor de ontwikkelaars is dat je geen verschillende apps hoeft te bouwen voor de verschillende platformen zoals iOS, Android en vooruit… Windows Phone. Apps voor deze platformen gebruiken elk hun eigen programmeertaal, waardoor je letterlijk verschillende apps moet bouwen. Hierdoor is zowel de bouw als het onderhoud van dergelijke apps kostenintensief.
In het geval van een PWA bouw je één enkele app, volledig met de standaard webtechnieken, die zich op alle verschillende platformen hetzelfde gedraagt. Dat betekent één code base die we moeten schrijven en onderhouden. Daardoor is een PWA meestal veel goedkoper dan een app voor iOS, Android en vooruit maar weer… Windows Phone.
Maar Freek, hoe kan het dan dat een PWA zo soepel werkt?
Goede vraag. Het geheim zit hem – grof gezegd – in drie ontwikkelingen:
1. Ten eerste wordt elke keer als je van pagina verandert niet een hele nieuwe pagina ingeladen. In plaats daarvan update je alleen het stukje van de pagina dat daadwerkelijk moet veranderen. Zo hoef je bijvoorbeeld zelden de hoofdnavigatie (het menu) of de footer van de pagina te updaten, want daar staat op elke pagina hetzelfde. Daardoor is de volgende pagina sneller ‘klaar voor gebruik’.
2. Ten tweede gaan we efficiënter om met de data die we ophalen van de server. Traditioneel haal je bij elke verandering van een pagina een complete webpagina op van de webserver. Dat betekent dat je de webserver om een nieuwe pagina vraagt (dat duurt even). Daarna genereert de webserver de gehele pagina (dat duurt even). Vervolgens serveert de webserver de pagina kant en klaar aan de browser (dat duurt even). Tenslotte leest de browser elke keer opnieuw de webpagina uit en toont deze op het scherm (je raadt het al: dat duurt even).
In PWA-land haal je bij het eerste bezoek van de website in een compacte vorm de data (teksten, links naar plaatjes, logica van de website, enz.) op. Daarna laat je de browser het werk doen om op basis van die data de webpagina op te bouwen. Bij het eerste bezoek duurt het ophalen van de data wat langer, omdat je in één keer data van de verschillende pagina’s ophaalt en in het geheugen laadt. Als dat eenmaal is gebeurd, is daarna elke verandering van pagina vrijwel direct klaar.
3. Tenslotte kunnen we de data die je bij het eerste website bezoek hebt opgehaald opslaan op het apparaat waarmee je de website bezoekt. Dat betekent dat als je een volgende keer naar de website gaat de data al beschikbaar is. Je hoeft dan dus niet meer naar de webserver om de data op te halen. Daardoor zal de website ook werken als er op dat moment geen internetverbinding beschikbaar is. Uiteraard wordt de data op je apparaat weer bijgewerkt zodra er wel weer een internetverbinding is.
Maar Freek, is er dan helemaal niets negatiefs te vertellen over PWA’s?
Eén van de belangrijkste dingen die je je moet realiseren is dat een PWA nooit in een App Store terecht kan komen. Het is immers geen app zoals Apple, Google of vooruit… Microsoft die kent. Uiteindelijk is het niets meer dan een website die zich toevallig net iets anders gedraagt dan een traditionele website.
Hoe werkt het voor Google?
Een ander punt van aandacht is de vindbaarheid door zoekmachines. Doordat een PWA grotendeels door de browser opgebouwd wordt, is het voor de zoekmachines moeilijk om te bepalen waar de website precies over gaat. De zoekmachines zien alleen ‘de schil’, of het template van de website en niet de content.
Als het gaat om een applicatie die bij een bedrijf intern gebruikt wordt is dat geen probleem, want dan hoef je ook niet gevonden te worden. Dat ligt natuurlijk anders als het gaat om een ondernemer die zijn spullen aan de man wil brengen. Gelukkig is er een techniek om dit probleem op te lossen: server side rendering. Daarmee kan een zoekmachine ook direct zien waar de webpagina over gaat en is de webpagina ‘gewoon’ vindbaar.
Als laatste hoorde je voorheen vaak dat je voor bepaalde functies een ‘echte’ app nodig hebt. Denk bijvoorbeeld aan applicaties die gebruik maken van de gps-module, de accelerometer of de gyroscoop in je telefoon. ‘Vroeger’ had je daar inderdaad echte apps voor nodig, maar tegenwoordig zijn die functies ook goed te gebruiken met web technologie.
Zo zijn er dus wel degelijk uitdagingen, maar ook voldoende technieken om de negatieve impact ervan te omzeilen.
Ik ben overtuigd! Wat nu?
Geweldig! Neem vrijblijvend contact met ons op en vraag naar de mogelijkheden. Hopelijk kunnen mijn collega’s en ik dan een super-te-gek-gave PWA voor je ontwikkelen. Ik kan niet wachten om ermee aan de slag te gaan!
Contact opnemen