Progressive web apps

Maar wat is dan een PWA?

Een Progressive Web App is stiekem gewoon een goed gebouwde, snelle en responsive website, maar dan met nog wat extra's erbij. Extra's die de ervaring van de website optillen tot het niveau van een 'echte' app. Dus je gebruikt standaarden als HTML5, CSS en JavaScript en combineert dat met nieuwe fijne dingen als Service Workers, Push Notificaties, pagina-transities en andere zaken die meer appy aanvoelen voor de gebruiker. Je leunt ook veel meer op het kunnen van de browser.

Het progressieve in de term Progressive Web App duidt op het feit dat de app nog prima werkt als al het nieuwe niet ondersteund wordt door de betreffende browser van de gebruiker. En als dat dus wel zo is, dan is de ervaring verrijkt met mooie nieuwe foefjes. Progressive enhancement dus!

En het mooiste is nog wel dat je als gebruiker gewoon een adres bezoekt. Je hoeft niet een app te downloaden en te installeren uit de app store. Iets wat het grootste deel van gebruikers op het internet gemiddeld minder dan 0 keer per maand doet!! (zie bron) 

PWA technische vereisten

Maar wat maakt nou op zijn minst een PWA? Voordat je een Progressive Web App hebt gemaakt, dien je op zijn minst aan een aantal vereisten te voldoen:

1. HTTPS
De app moet draaien op HTTPS. Safety first!

2. Service Workers
De app moet zogenaamde Service Workers hebben. Een Service Worker is een script dat als het ware in het grijze gebied tussen je browser en je app zit. Hij draait op de achtergrond en wacht op events die hem in gang zetten, onafhakelijk van wat je app op dat moment 'doet'. Zo is er een Service Worker voor caching. Die cached de informatie van je app en zorgt ervoor dat die info offline beschikbaar is. Heel handig als je je gebruikers je webapp wilt laten gebruiken zonder internetverbinding. Er zijn nog meer fijne Service Worker recepten beschikbaar. Kijk eens op https://github.com/GoogleChrome/samples/tree/gh-pages/service-worker 

3. Een Manifest bestand
Je PWA moet een manifest hebben. Daar staat informatie in over je app. Hoe deze bijvoorbeeld getoond moet worden, wat het icoon is als je de app opslaat op je home screen van je device, de kleur, etc.

De Stranden Den Haag app

En daar zijn we nu met de Stranden Den Haag app. Op basis van de specificaties die al bekend waren, hebben we in een korte tijd de eerste versie van de Stranden Den Haag app gemaakt als PWA. De Stranden Den Haag app toont je de stranden van Den Haag, Scheveningen en Kijkduin, met daarbij informatie over het huidige weer, reddingsposten/hulpdiensten, watersport locaties en andere interessante plekken in en om het zand. Nu de app draait gaan wij verder met de verbeteringen, aanvullingen en doorontwikkeling. We kunnen nog heel wat zaken toevoegen om de gebruikerservaring te verfijnen, het technisch allemaal wat strakker te maken, en de gebruiker meer uitgebreide informatie te verschaffen over de stranden van Den Haag.

PWA's!? Ja, wij zijn om. En we gaan er nog veel meer maken!

Kijk voor nu met je mobieltje op strandendenhaag.nl