Offline te gebruiken, push notificaties en op alle platformen beschikbaar
Progressive web apps - PWA

Wat is nu eigenlijk een PWA?

In dit tweeluik duiken we in de progressive web app (PWA). We vertellen je wat het is, hoe het werkt en hoe het zich verhoudt tot native apps. We hebben het voornamelijk over mobiele apps, maar dit gaat evengoed op voor tablets en smartwatches.

Traditioneel app development

Zoals je misschien al weet werken native apps die geprogrammeerd zijn voor iOS niet op Android en vice versa. Dat heeft alles te maken met de verschillen tussen de besturingssystemen op deze twee platformen. De systemen hebben hun eigen architectuur en protocollen. Daarnaast worden apps voor Android vaak in Java/Kotlin geschreven en apps voor iOS in Object-C/Swift.

Echter staat onze industrie natuurlijk niet stil. We zijn al vanaf het begin van het smartphone tijdperk bezig met het bedenken van manieren om cross-platform apps te kunnen maken met één tool of programmeertaal. Jij, als business owner, wil natuurlijk snel en efficiënt kunnen ontwikkelen. Dat is lastig wanneer er per platform specifieke code geschreven dient te worden.

Het mobiele app landschap

Eerst even een aantal begrippen op een rij:

  • Native apps: met native apps bedoelen we in de context van mobiele platforms (zoals iOS en Android) applicaties die geschreven zijn voor een specifiek platform en hier dan ook op geïnstalleerd worden. Omdat je deze specifiek voor een platform ontwikkelt hoef je je geen zorgen te maken over cross platform compatibiliteit. Je moet alleen wel dezelfde app voor elk platform los ontwikkelen;
  • Traditionele web apps: hier spreken we feitelijk over mobiele sites die in de mobiele browser bekeken worden. Je moet voor elk scherm een aparte ‘webpagina’ laden en je kunt bijvoorbeeld vaak niet alle on device functionaliteiten (goed) gebruiken, zoals GPS of je camera. Ook moet je goed opletten dat je elke webpagina voor elke browser optimaliseert. Geen verbinding? Geen app. Daarnaast werkten de browsers vaak ook trager dan native apps
  • Hybride app: de naam verklapt het al, dit is een vorm waarin we van zowel native als web app eigenschappen gebruik maken. Feitelijk spreken we hier over een kleine native huls met daarin een webapp. Je installeert deze wel vanuit de stores en doordat de huls native is, kan de web app via het native hulsje de on device functionaliteiten gebruiken. De schermen hoeven niet als een nieuwe webpagina geladen te worden;
  • Cross Platform Native frameworks: dit zijn frameworks waarin we met één programmeertaal native apps bouwen voor meerdere platforms. We hoeven dus ook hier maar één keer te ontwikkelen om dezelfde app in meerdere stores te kunnen publiceren.

Zo, nu we het huidige mobiele landschap verkend hebben staat ons niets meer in de weg om de nieuwste vorm nader te beschouwen: de progressive web app.

Terug bij af?

Als je de opsomming hierboven leest kom je al gauw tot de conclusie dat web apps verre van ideaal zijn. Toch lijken PWA’s nog het meeste op web apps, omdat ze beiden via de browser toegankelijk zijn. Maar in de afgelopen jaren heeft de ontwikkeling op het gebied van webtechnieken en de devices die wij met z’n alle gebruiken niet stil gestaan. Met de komst van HTML5, CSS3 en nieuwe vormen van Javascript beschikken we over veel meer toepassingen en frameworks. Daarnaast zijn smartphones ook steeds vaker voorzien van krachtige processoren en uitgebreide browsers. Hierdoor is het mogelijk om met behulp van webtechnieken veel intuïtievere oplossingen te creëren. PWA is daar een goed voorbeeld van.

Door nieuwe frontend technieken kunnen we een webapplicatie verpakken in een mini-applicatie. Daardoor voelt de app net zo snel en slick aan als een native app. Maar omdat je de PWA in één keer laadt, hoef je dus ook niet bij elk scherm een nieuwe HTML-pagina in te laden, zoals dat bij web en hybride apps wel het geval is.

De eigenschappen op een rij:

  • Snelheid: vergelijkbare snelheid en soepelheid in gebruik als een native app;
  • Progressief: de app is op alle platformen te gebruiken, dus ook op desktops/laptops;
  • Responsive: de app past zich automatisch aan elk scherm aan;
  • Vindbaar: de app staat op het web, en kan dus geïndexeerd worden door zoekmachines;
  • Niet installeren: je hoeft ze niet te installeren, maar kunt ze direct gebruiken;
  • Notificaties: Middels push notificaties kan re-engagement bewerkstelligd worden;
  • Offline: ook zonder verbinding te gebruiken.

De kracht van Service workers

PWA heeft een geheim wapen in de achtergrond draaien: de service worker. Een service worker is een script dat zorgt voor een aantal belangrijke features. Bij reguliere hybride en web apps praat de app direct tegen het netwerk/internet. Dus als je geen verbinding hebt stopt het functioneren van je app. Maar niet bij PWA’s! Dankzij service worker kunnen toch mutaties doorgevoerd worden, ook wanneer je geen internet hebt. Deze mutaties worden op de achtergrond opgeslagen. Wanneer er verbinding is, zorgt de service worker voor een juiste afhandeling met de server.

Wanneer een PWA?

Of web de absolute toekomst heeft, valt nog te bezien. Er kleven ook nadelen aan PWA’s. Op de voor- en nadelen ga ik in een volgend artikel verder op in. Maar wanneer we tegen een casus oplopen waarin in één project zowel een mobiele app als een responsive web applicatie/platform gebouwd dient te worden is de progressive web app absoluut een interessante optie.

Nieuwsgierig naar PWA app voorbeelden?

Google, de drijvende kracht achter progressieve web apps, heeft een aantal mooie showcases samengesteld. Hier kun je zelf ervaren hoe een PWA aanvoelt.

Bart
Kan ik met je meedenken?

Wil je een prijsindicatie of
sparren over de mogelijkheden?

Mail Bart Evers
Of bel naar 0649773000

Wellicht ook interessant:

Growthsourcing het nieuwe detacheren

  • Opleiden

Growthsourcing het nieuwe detacheren

Applicaties laten ontwikkelen

  • Development

App usage

Marketing automation

  • Marketing

marketing notes