Progressive Web Apps vs Native Apps: de belangrijkste informatie

Jordy Senders

Marketeer

Aangemaakt op 6 februari 2024. Laatst bijgewerkt op 25 april 2024.

Samenvatting (in het kort)

Kort door de bocht is een PWA (Progressive Web App) in een jasje van een mobiele applicatie.

Een native mobiele applicatie is een app die ontwikkeld is voor het gebruik op een specifiek platform: dat kan Android zijn voor Android smartphones of iOS voor iPhones. Er wordt dus ook gebruik gemaakt van native programmeertalen (voor Android en/of iOS).

Wat is een PWA?

De term PWA staat voor 'Progressive Web App'. Het is een mobiele applicatie die binnen de browser van je smartphone draait en dus ook met technologieën (programmeertalen) binnen de browser gebouwd is:

• HTML, CSS, JavaScript, WebAssembly

Een PWA is snel, (deels) offline te gebruiken, direct vanuit de browser bereikbaar en hoeft niet vanuit een app store gedownload en bijgewerkt te worden. Dit behoort echter wel tot de mogelijkheden.

Voorbeelden van bekende Progressive Web Apps

Er zijn genoeg bekende PWA's in omloop. Grote kans dat je regelmatig gebruik maakt van een PWA zonder het te weten. Dit zijn er 5:

1. Uber

2. Pinterest

3. Telegram web

4. Google Drive

5. AliExpress

Wat interessante feiten en statistieken over PWA's in 2024

1. De PWA markt bereikt in 2027 naar verwachting een omzet van 10,4 miljard dollar.

2. Iedere 3 seconden wordt er een nieuwe PWA website/app gemaakt

3. Het overgrote merendeel van alle PWA's bevinden zich in de sectoren media, entertainment, retail en e-commerce.

4. Het ontwikkelen van een PWA is 3 tot 8 keer goedkoper dan het ontwikkelen van een native app.

5. PWA's verbeteren de gebruiker retentie tot wel 180%.

Bron data: Visionvix.com

Wat is een Native app?

Een native app is een mobiele app die ontwikkeld is voor 1 specifiek platform. Denk aan iOS op iPhones of Android op... Android smartphones :-). En er zijn ook nog steeds windows telefoons en tablets.

Bij ieder platform hoort een eigen programmeertaal of meerdere programmeertalen:

• iOS: Objective-C, Swift, JavaScript, React Native

• Android: Java, Kotlin, C, C++, C#, Lua, JavaScript, Python

• Windows: C#, C++, C

Dit betekent dat een native app die voor iOS is ontwikkeld niet gebruikt kan worden op Android en Windows smartphones. Een PWA kan op alle platformen gebruikt worden en is niet platform afhankelijk.

Voorbeelden van bekende native apps

De kans is ook groot dat je dagelijks gebruikmaakt van een native app. Dit zijn 5 bekende native apps:

1. Facebook

2. Instagram

3. Wix

4. Discord

5. Airbnb

Vanuit een zakelijk perspectief

Als eigenaar van een bedrijf en/of iemand die met een idee voor een app rondloopt komen meteen zaken zoals tijd, geld en veiligheid (van data) naar boven drijven.

Naast de keuze voor het type app (of dat nou native, PWA, hybride of web app is) hebben dus meerdere factoren invloed op je besluitvorming. Ik ga hieronder in op de, wat ons betreft, belangrijkste zaken.

1. Ontwikkelingskosten

In essentie is een PWA een website die er hetzelfde uit moet zien en moet voelen als een native app. Klinkt aantrekkelijk, zeker wanneer je bedenkt dat de ontwikkeling van een PWA vaak (veel) minder kost.

Native apps zijn speciaal ontworpen om op 1 specifiek platform te functioneren. Wil je 1 native app op zowel Android als iOS uitbrengen? Ga er dan maar vanuit dat je de begrote ontwikkelingskosten kunt verdubbelen.

Het ontwikkelen van een PWA is 3 tot 8 keer goedkoper dan het ontwikkelen van een native app. - Medium.com

Je hebt hiervoor namelijk een team nodig dat zowel in Swift en Objective-C (iOS) als in Java en Kotlin (Android) kan programmeren.

Gaat je applicatie leunen op het gebruik van 'native functionaliteiten' zoals Bluetooth, contacten, de kalender of NFC? Dan is de kans groot dat een andere aanpak beter bij je past. Dat hoeft niet direct een native app te betekenen wanneer je cross-platform wil ontwikkelen: het ontwikkelen van een hybride app is ook een optie.

2. Onderhoud

Het ontwikkelen en onderhouden van een PWA betekent dat je 1 groot stuk broncode hebt die door meerdere platformen ondersteund wordt.

Je hoeft daardoor minder code te onderhouden en maakt gebruik van een kleiner aantal programmeertalen. Onderhoudskosten vallen daardoor altijd lager uit dan bij een native app.

PWA onderzoeken en statistieken tonen aan dat Progressive Web Apps 33% minder onderhoudskosten met zich meebrengen t.o.v. native apps

Naast dat de ontwikkeling van een native app vaker wel dan niet meer kosten met zich meebrengt zorgen aparte broncodes in verschillende talen voor meer onderhoudskosten.

Statistieken tonen aan dat de onderhoudskosten van een mobiele applicatie op jaarbasis gelijk staan aan ongeveer 15 tot 20 procent van de initiële ontwikkelingskosten.

3. Beveiliging

Wat betreft beveiliging zijn er ook een aantal duidelijke verschillen. Doordat een PWA een website in het jasje van een native app is maakt het gebruik van het HTTPS protocol.

Wat HTTPS (Hyper Text Transfer Protocol Secure) doet is het verkeer van website naar bezoeker en andersom versleutelen.

Als aanvulling hierop kan er binnen een PWA gebruik gemaakt worden van zogenaamde 'JSON Web Tokens' (JWT) en 'Content Security Policy' (CPS):

• JWT: Een gestandaardiseerde manier om op een veilige manier data tussen twee partijen uit te wisselen. Wordt vaak gebruikt om een gebruiker te identificeren en legitimeren.

• CPS: Geeft je controle over de inhoud van je applicatie. Een CPS zorgt ervoor dat derden geen code in jouw applicatie kunnen 'injecteren' en kan een 'Cross-site scripting aanval' (XSS) helpen voorkomen. Hierbij worden gaten in de beveiliging van een applicatie (of website) uitgebuit.

Een PWA kan dus net zo veilig (of kwetsbaar) zijn als een website.

Alle native apps die gepubliceerd zijn in de Google Play Store en/of Apple App Store moeten aan een aantal veiligheidseisen voldoen. Ze worden ook gecontroleerd op veiligheid voordat ze opgenomen worden in een app store.

Veelgebruikte opties om de veiligheid van data in een native app op te schroeven zijn multi-factor authenticatie en het gebruik van native veiligheidsopties zoals Face ID en Touch ID. Er zijn echter meerdere mogelijkheden:

• VPN of SSL 'tunnel': Gebruik van een VPN of SSL 'tunnel' om gevoelige data te verzenden en te beveiligen.

• RASP: 'Runtime Application Self Protection' is een technologie die zelf aanvallen op applicaties kan detecteren en deze kan afweren.

• Certificate pinning: Met certificate pinning zorg je ervoor dat jouw mobiele applicatie alleen kan en mag communiceren met servers die een vertrouwde 'pincode' hebben.

Ben je van plan een mobiele applicatie te ontwikkelen die gevoelige data zoals patiëntgegevens of financiële data verwerkt? Dan is een native applicatie waarschijnlijk de beste keuze.

4. Vindbaarheid

Op het gebied van vindbaarheid hebben PWA's een streepje voor. Doordat een PWA een website in het jasje van een native app is kunnen zoekmachines zoals een Google, Bing en DuckDuckGo de inhoud indexeren (oftewel: opnemen in de zoekresultaten).

Kijk bijvoorbeeld naar de website en app van BMW. Het Beierse bedrijf wilde haar eigen website verbeteren en besloot een PWA te integreren.

Het resultaat? Een toename van 49% in verkeer dat via zoekmachines binnenkwam. Daarbovenop laadde de PWA zo'n 3 tot 4 keer sneller dan de oude website waardoor het totale aantal mobiele gebruikers met 50% toenam.

Aan de andere kant kun je binnen de Google Play Store (Android) en Apple App Store (iOS) gebruikmaken van iets dat de afkorting 'ASO' kent. ASO Staat voor 'App Store Optimization'.

Dit betekent dat je wijzigingen in en buiten de app in de store aanbrengt zodat jouw app zo goed mogelijk gevonden kan worden in die specifieke app store. Die optie heb je niet wanneer je er voor kiest je PWA niet op te (laten) nemen in een app store.

Onderaan de streep is het vaak makkelijker om te winnen binnen ASO dan binnen SEO met een PWA die niet via een app store beschikbaar is. Bij SEO zijn er veel meer factoren betrokken, bij ASO gaat het om het uitsluitend zoeken en tonen van mobiele applicaties.

Vanuit het oogpunt van de gebruiker

1. Installatie

Traditioneel gezien is het als gebruiker van een PWA niet nodig om een PWA te installeren zoals je dit voor native apps via de Google Play Store of de Apple App Store doet. Het fijne is wel dat iedere PWA als icoontje toegevoegd kan worden aan het startscherm van je smartphone.

Dat wil niet zeggen dat het onmogelijk is om een PWA in een app store te krijgen. Dat kan prima, al wil dat dan wel zeggen dat downloaden, installeren en updaten allemaal via diezelfde store (moeten) verlopen.

Een reden waarom veel bedrijven voor een PWA kiezen is omdat de drempel om deze te gebruiken extreem laag is. Het aantal nieuwe gebruikers neemt toe, de sessie(duur) per gebruiker wordt verhoogd en ook de conversieratio neemt over het algemeen vrijwel altijd toe.

Aan de andere kant loop je wel het voordeel van een app store mis: mensen die in de app store browsen kunnen je app niet vinden en de store zelf kan jouw app niet aanbevelen bij gebruikers.

2. Opslagruimte

PWA's Zijn lichtgewicht apps en worden ook met die mindset ontworpen. Ze nemen dus niet zoveel ruimte op je smartphone in als een native app.

Een voorbeeld daarvan is de PWA van Twitter (X): Twitter Lite (X Lite). Die neemt zo'n beetje 1 tot 3 procent van de opslagruimte tot zich die de native app van Twitter (X) nodig heeft.

3. Batterijverbruik

PWA's Draaien in de browser van een smartphone, waardoor ze gemiddeld meer van de batterij vragen dan native apps.

Native code is de snelste code omdat het code is die 1 op 1 matcht aan de code van het besturingssysteem. Er is geen aanvullende 'jasje' (extra code) nodig om de app te laten communiceren met het besturingssysteem en om de app zich te laten gedragen als een native app.

4. Personalisatie

Op het gebied van personalisatie schiet een PWA ten opzichte van een native app nog altijd tekort.

Je kunt in een PWA bijvoorbeeld op basis van activiteit push meldingen naar de gebruiker sturen, echter zal al je verzamelde data komen te vervallen op het moment dat de browser instellingen worden aangepast of gereset.

5. Snelheid

De reden dat veel grote bedrijven zoals Uber en Pinterest zijn overgestapt van een native aanpak naar een PWA heeft voornamelijk te maken met 2 zaken:

1. Performance

2. Conversie(optimalisatie)

Met een PWA kan de laadtijd van een app drastisch teruggedrongen worden en kan de conversieratio verbeterd worden.

Dit zijn enkele interessante statistieken van grote(re) organisaties die zijn overgestapt op een PWA (bron voor statistieken):

• Lancôme: zag een toename van 53% in mobiel verkeer.

• Twitter: zag een toename van 25% meer bekeken pagina's per sessie.

• Trivago: zag een toename van 150% in terugkerende bezoekers.

Globale PWA statistieken

• Een website die gebruik gaat maken van een PWA zal gemiddeld 63% sneller laden dan de 'oude' mobiele website (bron).

• Pagina's laden 2 tot 4 keer sneller met een PWA (bron).

• Websites die een PWA zijn laden gemiddeld in 2.75 seconden (bron).

Native apps kunnen hardware en device features volledig benutten. Ze integreren naadloos in je smartphone en hebben in die content een 'betere performance' dan PWA's.

6. Updates

Wanneer je een app via de App Store of Play Store installeert verlopen updates ook via de store. Afhankelijk van je instellingen worden die updates automatisch uitgevoerd, maar het kan ook zijn dat je dit handmatig moet doen.

Bij een 'traditionele' PWA die niet via een store is geïnstalleerd krijgt een gebruiker niets mee van updates. Updates worden in dat geval door de ontwikkelaar doorgevoerd en staan direct live.

Dat heeft als keerzijde dat de gebruiker geen controle over versiebeheer heeft. Via een app store heeft de gebruiker de mogelijkheid een update niet te installeren of te wachten met een (grote) update.

Totaaloverzicht van de voor- en nadelen

Wanneer we alle informatie in het artikel samenvatten in overzichtelijke tabellen dan zijn dit wat ons betreft de belangrijkste voordelen en nadelen van zowel PWA's als native apps.

PWA: Voordelen en nadelen

Native: Voordelen en nadelen

De keuze tussen PWA of Native

De hamvraag: hoe maak je voor jouw mobiele app (project) een keuze tussen een Progressive Web App of een Native app? Dat is een beslissing waarvan ik je aanraad deze te bespreken met de personen die 'm gaan ontwikkelen.

De verschillende overwegingen en vraagstukken die bij die beslissing voorbij kunnen komen heb ik hieronder naast elkaar gezet:

Niet onbelangrijk: PWA's Worden op dit moment niet in alle browsers ondersteund. Dat kan invloed hebben op jouw keuze. Dit is de huidige staat van PWA ondersteuning in browsers:

Bronnen

1. Medium.com - PWA Statistics 2024 - Julian Neagu

2. Magenest.com - PWA Statistics: noticeable insights in 2024 - Minh Hoang

3. Visionvix.com - Progressive Web App statistics 2023 - Julian Neagu

4. Thinkwithgoogle.com - Tracking BMW's road to a faster mobile experience - Jörg Poggenpohl

5. Wikipedia.com - Progressive Web App

6. Medium.com - Progressive Web App PWA Statistics 2023 - Julian Neagu

7. Wikipedia.com - JSON Web Token

8. Approov.io - How Certificate Pinning Helps Thwart Mobile MitM Attacks - David Stewart

9. Developer.android.com - Security guidelines

10. Developer.apple.com - Security

Hulp nodig bij je keuze?

Twijfel je over je keuze tussen native, PWA of misschien wel hybride apps? We sparren graag vrijblijvend met je mee. Bel of mail mijn collega Bertus.

• +31 40 3041457
• info@cell-0.com

Company Naam Email Telefoon Opmerkingen Verstuur Bedankt voor je bericht! We komen zo snel mogelijk bij je terug.