What The *beep* is… – een progressive web app?

Goed dat je dit stuk leest, want 2018 wordt het jaar van de progressive web app (PWA). Je kunt dus maar beter goed op de hoogte zijn. Misschien heb je al eens van de term gehoord, of ben je gewoon nieuwsgierig. Wat het ook is, in dit artikel lees je precies wat een PWA is, en wat de voor- en nadelen zijn.

PWattes?

PWA is dus een afkorting voor ‘progressive web app’. De term is de wereld in geholpen door Alex Russel, een engineer voor Google Chrome. Hij schreef er in 2015 al een blogpost over. Maar wat betekent het nou precies?

Een PWA is een webapplicatie. Dat is niets anders dan een app die draait in een website. Twitter is een goed voorbeeld van zo’n webapplicatie. Wat een webapplicatie progressive maakt? Het feit dat een PWA een steeds betere gebruikerservaring kan bieden op basis van de mogelijkheden in de gebruikte browser. Hoe slimmer de browser wordt, hoe slimmer de PWA.

Samengevat betekent het dat een progressive web app prima werkt in de meeste oudere browsers, maar ook gebruik kan maken van nieuwe functionaliteiten in moderne browsers.

De 9 originele eigenschappen van een PWA

Alex Russel deelde in zijn originele blogpost 9 eigenschappen die een PWA uniek maken:

Responsive

Het is 2018, dus dat een PWA responsive is, lijkt ons vanzelfsprekend.

Offline te gebruiken

Een PWA doet het ook zonder internetverbinding.

Voelt als een native app

Een progressive web app ziet eruit en gedraagt zich als een native app.

Altijd up-to-date

Een gebruiker hoeft jouw PWA nooit zelf te updaten.

Veilig

Een PWA gebruikt beveiligde verbindingen om beveiligingsrisico’s te beperken

Makkelijk te ontdekken

Moderne browsers herkennen een PWA vanzelf.

Push-notificaties

Je kunt push-notificaties versturen via een PWA, om zo je gebruikers betrokken te houden.

Te installeren

Een progressive web app is eenvoudig te installeren op je telefoon.

Makkelijk te delen

Je deelt een PWA eenvoudig via een standaard URL.

Wat een PWA verder nog superinteressant maakt, is het feit dat je allerlei API’s van een smartphone kunt gebruiken. Denk bijvoorbeeld aan de camera, locatie of NFC-chip. Zo wordt het gat tussen een native app en een PWA steeds kleiner, tot de native app überhaupt geen toegevoegde waarde meer heeft.

De technische kant: service worker en web app manifest

We willen je niet te veel vermoeien met het technische verhaal achter een PWA, dus we houden het simpel. Er zijn eigenlijk 2 elementen die een PWA nodig heeft om te kunnen werken.

Ten eerste is er de service worker. Dat is een Javascript dat op de achtergrond draait, waarmee je bijvoorbeeld push-notificaties regelt, data offline opslaat en synchroniseert. En het maakt een PWA razendsnel, waardoor de gebruikerservaring dichter bij die van een native app komt.

Daarnaast heb je het web app manifest. Dit is een JSON-bestand dat je gebruikt om bijvoorbeeld het icoon op je smartphone vorm te geven, maar ook het splash screen, de themakleuren en de URL.

Samen zorgen de service worker en het web app manifest er ook voor dat een PWA te installeren is. Wil je meer weten over de technische werking van een PWA? Neem dan even contact met ons op :).

Waarom is 2018 pas het jaar van de PWA?

PWA’s zijn echt helemaal hip. Hoe kan het dan dat het nog niet de nieuwe standaard is? Simpel: Apple wilde nog niet meewerken. PWA’s worden al op zo’n 80% van de Android-apparaten ondersteund, maar Apple heeft zich lange tijd verzet geboden. Inmiddels zijn ze overstag, en vanaf iOS 11.3 worden PWA’s ook door Apple ondersteund. Is dit de definitieve nagel aan de doodskist van de native app?

Gerelateerde artikelen:

• Native apps vs Web apps vs Hybride apps – welke is de beste keuze?
• Links maken tussen een WebView en Native Code
• Een applicatie (laten) ontwikkelen in 7 stappen
• Hoe je in 5 stappen jouw nieuwe app idee test