Progressive web app: Wat is het en wat kun je ermee?

Je hebt misschien wel eens gehoord over Progressive Web Apps. Deze Apps zijn mogelijk de toekomst van de mobiele ontwikkelaars. De Progressive Web Apps zijn de laatste trend binnen de wereld van web development. Mobiele ontwikkelaars kunnen met behulp van de Progressive Web Apps meer gebruikers bereiken buiten de grenzen van de app stores. Dat klinkt allemaal goed, maar wat zijn Progressive Web Apps nou eigenlijk precies?

Web of geen web

Door middel van moderne web mogelijkheden kan een Progressive Web App een app- achtige gebruikerservaring bieden aan de gebruikers. Een Progressive Web App is in staat om het zelfde werk te verrichten als normale apps die te vinden zijn in de App stores. Progressive Web Apps zien er uit en voelen als een normale App, die onder andere ook push notificaties kan verzenden, offline werkzaam is en deze App wordt geladen op de homepagina van je toestel. Mobiele Web Apps die toegankelijk zijn via de mobiele browser waren in het verleden niet in staat om deze functies te verrichten. Door middel van nieuwe Web API’s, nieuwe concepten en nieuwe buzzwords zijn de Progressive Web Apps hier wel toe in staat.

Voor alle duidelijkheid, het gaat hierboven om mobiele Web Apps die toegankelijk zijn via de browser van je toestel. Daarbij heeft een Progressive Web App alle kenmerken die wij gewend zijn binnen de gewoonlijke Apps. De inhoud van een hybride app wordt alleen geladen in een mobiele browser. Hiermee wordt de App beperkt door de kenmerken van de browser, dit houdt tevens in dat er sprake is van een goede beveiliging en API standaardisatie.

Ok, maar hoe werkt het dan?

Zoals eerder genoemd brengen de Progressive Web Apps alle kenmerken die we verwachten van een App naar de browser van je mobiel. Er wordt gebruik gemaakt van op standaard gebaseerde technieken en deze Apps draaien in een beveiligde container. Deze container is toegankelijk is voor iedereen die zich begeeft op het web. Al met al zijn Progressive Web Apps een geheel van technologieën, API’s en design concepten die samen een app- achtige ervaring bieden. De gebruiker ziet dat allemaal via de mobiele browser. Laten we ingaan op een aantal basisprincipes van Progressive Web Apps.

Service Workers ⚙️⚙️

De Service Worker is een ongelofelijke krachtige technologie achter de Progressive Webb App. Zij zorgen ervoor dat de App offline kan blijven functioneren en dat er push notificaties kunnen worden verzonden. Ook dat er gebruik gemaakt kan worden gemaakt van content cache en nog veel meer. Al deze dingen geven jou het gevoel van een gewone App die je gewend bent uit de app stores. De Service workers worden vaak ook beschreven als ‘Proxy’ en dit is eigenlijk precies juist. Door middel van Service Workers is er volle controle over de gecachete data die per direct terug gebracht kan worden.

De pure kracht en flexibiliteit van Service Workers zorgt ervoor dat zij erg gecompliceerd zijn. In het algemeen hebben web ontwikkelaars de voorkeur voor kant en klare diensten van de Service Workers, zoals bijvoorbeeld de offline modus. Mozilla heeft een groot aanbod van deze kant en klare Service Workers met talloze toepassingen die herbruikbaar zijn. Op deze manier kunnen bepaalde gebeurtenissen worden opgevangen en kan data worden teruggekeerd naar de cache als een netwerk aanvraag mislukt.

Een Service Worker is slechts een JavaScript- bestand als elk ander, dat op de achtergrond draait en werkt. Het is aan de ontwikkelaar zelf om de code te schrijven om de caching werkend te krijgen, push notificaties te verzorgen, inhoud op te halen enz. Uiteindelijk gebruiken ontwikkelaars allemaal soort gelijke, laten we zeggen ‘recepten’, om algemene taken onder andere de offline ondersteuning, te realiseren. Om het allemaal wat gemakkelijker te maken is het handig om deze kant en klare ‘recepten’ te gebruiken. Het bespaart je veel tijd en moeite. De Service Workers zijn op dit moment beschikbaar op Android toestellen met Chrome 50 en worden nog niet door andere mobiele browsers ondersteund.

App Shell

De App Shell model is een eenvoudige concept ontwerp waarbij de mobiele web App in eerste instantie wordt geladen. Het biedt daarentegen een eenvoudige schil van een UI App waarmee de content van de App wordt geladen. De App Shell vormt geen API of een kader maar het is eerder een ontwerpbenadering waar ontwikkelaars voor kunnen kiezen. Ze houden zich dan aan de versterkte cache mogelijkheden van Service Workers. Je zult het waarschijnlijk allemaal wel eenvoudig vinden en het is een voor de hand liggende aanpak die hier toch lastiger klinkt dan het eigenlijk is.

Met de App Shell Model wordt er gefocust om een schil te houden van de app UI en afhankelijk daarvan de inhoud weer te geven. De app UI en de inhoud worden vervolgens apart geplaatst in de cache. Het is helemaal ideaal als de App Shell een cache heeft dat zo snel mogelijk laadt wanneer een gebruiker de pagina bezoekt en op een later moment weer terugkeert. Het apart houden van de shell en de content tijdens het laden verbetert theoretisch gezien de gebruikerservaring en mening van de werkzaamheid en gebruiksvriendelijkheid van de App.

Instabiliteit en de App Manifest

Mobiele Web Apps waren niet de Apps die wij tegenwoordig gewend zijn uit de app stores. De mobiele web Apps waren niet oproepbaar vanaf het homescreen van het toestel. Een gebruiker kon de mobiele website wel naar de homepagina van de toestellen halen. Toch was de ervaring hiermee minder gewaardeerd dan de normale apps uit de app stores. Tegenwoordig is dit enorm verandert met behulp van alle bovengenoemde ontwikkelingen. Chrome heeft het op Android toestellen mogelijk gemaakt op web Apps te installeren op de homepagina. Net zoals het normaal gaat bij normale app store Apps.

Om Chrome duidelijk te maken dat jou website te installeren is als een App, schrijf je een manifest.json bestand. Dit bestand link je dan vanaf de hoofd HTML pagina. Momenteel heeft iOS nog geen extra functies zoals Android dat wel heeft. Het enige waar gebruikers van iOS gebruik van kunnen maken is het linken van een web App naar de homepagina. Dit werkt iets minder soepel, maar er is hoop dat Apple ook met functies op dit gebied gaat komen.