De Voorhoede

front-end developers

De uitdaging: performance en app development strategie voor meerdere merken

De Persgroep Nederland is de uitgever van meerdere grote nieuwsmerken in Nederland en België. Voor Volkskrant, Parool and Trouw is er één team verantwoordelijk voor ontwikkeling en onderhoud van de websites en apps. Dit team wilde één werkwijze neerzetten om de websites en apps van deze 3 merken te herontwikkelen en te onderhouden. Deze werkwijze moest ten eerste web performance garanderen. Ten tweede moest deze werkwijze leiden tot een onderhoudsvriendelijke en herbruikbare app strategie. De Persgroep vroeg de Voorhoede te helpen bij het ontwikkelen van deze strategie.

De oplossing: investeer in je gebruikers

Als we starten met een nieuwe opdracht kijken we vaak naar de analytics om te zien hoe gebruikers verdeeld zijn over browsers en platformen. Hieruit bleek dat de native apps een stuk minder gebuikt werden dan de website. We hebben dit in ons voordeel gebruikt, door te focussen op web technologie.

De ontwikkelkosten worden enorm gedrukt wanneer je een appy ervaring creëert in de browser en deze hergebruikt in een hybride app. Bovendien maak je een merk vindbaar in de Apple App Store & Google Play Store.

Dit leidde tot de volgende strategie:

Stap 1: Supersnelle website

Omdat we zo veel mogelijk functionaliteit van de website hergebruiken in de hybride app, leidt een snelle website tot een snelle progressive web app (PWA) en snelle hybride app. Bovendien heeft onderzoek aangetoond dat web performance een enorme impact heeft op conversie en behoud van je gebruikers. We hebben het team geholpen een performance workflow neer te zetten, wat heeft geresulteerd in de snelste nieuwswebsite van Nederland. Daarnaast hebben we een performance budget opgesteld zodat performance centraal blijft staan tijdens ontwikkeling in de toekomst.

WebPageTest resultaat waar Trouw.nl in 0.6s laadt tegenover een aantal andere online niewssites

Stap 2: Moderne web app voor de massa

Om een 'appy' ervaring te bewerkstelligen op het web hebben we een PWA ontwikkeld. Deze kan bijvoorbeeld push notificaties versturen en dezelfde snelheidservaring geven onafhankelijk van de connectiviteit van de gebruiker. Al deze functionaliteiten werken in moderne browsers en de website is installeerbaar als PWA.

Aan de linkerkant is de website met PWA install banner te zien, in het midden de fullscreen PWA en aan de rechterkant de hybride Android app

Stap 3: Een beetje native voor de rest

Om vindbaar te zijn in de Apple App Store & Google Play Store hebben we de PWA in een Cordova hybrid app gestopt. De PWA strategie is gericht op de toekomst. Op dit moment kunnen we zelfs de PWA functionaliteiten hergebruiken in de Android hybride app. En ondanks dat dit op iOS niet kan, kunnen we wel deze functionaliteiten nabouwen met Cordova plugins.

De technieken

  • Service workers maken push notificaties en netwerk onafhankelijke laadtijden mogelijk op het web

  • Hybride Cordova apps zorgen ervoor dat er ook apps aanwezig zijn in de App Store en Google Play Store

Het resultaat

  • De snelste kranten website van Nederland

  • Progressive Web App welke wordt hergebruikt in de hybride Android app

  • iOS hybride app die met Cordova missende PWA functionaliteiten wel mogelijk maakt

  • Eén herbruikbare strategie voor drie nieuwsmerken