Wat is een PWA?

PWA Staat voor 'Progressive web app(lication)'. Het is een mobiele app die draait in de browser van je smartphone met alle functionaliteiten en dezelfde gebruikerservaring als een 'echte' Android, iOS of Windows app. In dit artikel ga ik in op de oorsprong, de voordelen, nadelen en vergelijk ik de PWA met de Native app.

Aangemaakt op . Laatst bijgewerkt op .

Definitie (betekenis)

PWA Is een afkorting die staat voor 'Progressive Web App'. Het gaat om een type mobiele applicatie.

Een PWA doet zich voor als traditionele (native) mobiele applicatie terwijl een groot deel van de functionaliteiten via het internet (de browser op je smartphone) wordt geleverd.

Het doel van een PWA is om de flexibiliteit van het internet met de unieke functionaliteiten en gepolijste gebruikerservaring van een native mobiele applicatie te combineren.

Ontstaan

Het idee ontstond bij Apple oprichter Steve Jobs. Hij presenteerde het concept tijdens de presentatie voor en over de allereerste iPhone in 2007. Niet wetende dat het idee zo'n 10 jaar in de ijskast zou komen te liggen.

Onderstaande video is een fragment uit die originele iPhone presentatie in 2007. Daarin heeft Steve Jobs het over 'Web 2.0 + AJAX' apps die zich net zo gedragen als 'echte' iOS apps.

PWA Is inmiddels een standaard die in 2015 door Google in het leven werd geroepen. De naam komt bij Google Chrome ontwikkelaar Alex Russel en designer Frances Berriman vandaan.

Microsoft nam het concept met veel enthousiasme over. Apple was iets minder enthousiast maar is alsnog overstag gegaan.

Apple ziet een PWA als een website in een andere verpakking en vind niet dat een PWA is wat een 'echte' app hoort te zijn. Daar komt natuurlijk bij dat met PWA's Apple minder controle heeft: de app valt niet binnen het ecosysteem en de App store van Apple zelf.

De PWA als concept is ontzettend populair bij veel grote internationale organisaties. Denk aan bedrijven zoals Airbnb, Spotify, Aliexpress en Pinterest.

Hoe en waarmee wordt een PWA ontwikkeld?

Een PWA wordt dus door het web aangedreven. Om die reden worden PWA's gebouwd met web technologieën. Denk aan:

  • HTML: Verzorgt de (basis)structuur van webpagina's. Bestaat al sinds 1993.

  • CSS: CSS Verzorgt de vormgeving van webpagina's. Denk aan kleurgebruik, lettertype en layout.

  • JavaScript: Met JavaScript kan een statische webpagina interactief worden gemaakt. Denk aan een menu dat uitklapt of artikel gallerijen die nieuwe producten laden als je naar beneden scrollt. JavaScript is onmisbaar bij het ontwikkelen van een PWA.

  • WebAssembly: WebAssembly zorgt ervoor dat PWA's op het gebied van efficiëntie en snelheid kunnen concurreren met native applicaties. Ontwikkelaars kunnen dichter bij de hardware komen en meer systeembronnen benutten. Binnen WebAssembly kan er ontwikkeld worden in talen zoals C, C++ en Rust.

Frameworks en tooling

Bij het bouwen van een PWA worden regelmatig technologieën en tools gebruikt.

  • Service workers: Service workers zijn scripts die op de achtergrond van een browser draaien. Ze maken bijvoorbeeld push meldingen mogelijk en zijn essentieel voor offline functionaliteit van een PWA.

  • Web App Manifest: Dit is een JSON bestand (tekstbestand opgeslagen in het JSON formaat). Hiermee wordt de browser verteld hoe een snelkoppeling van de app weergegeven moet worden op het startscherm van een smartphone.

  • Frameworks: Veel ontwikkelaars van PWA's gebruiken frameworks zoals Angular, Vue.js en React. Een framework bevat tools om sneller te kunnen ontwikkelen en kent een levendige gemeenschap van ontwikkelaars. Daardoor is documentatie en ondersteuning snel te vinden.

  • Build tools: Enkele voorbeelden van build tools zijn:

    • Webpack: een bundelmodule die de applicatie om kan zetten in statische bestanden. Het grote voordeel is dat die bestanden sneller geladen en gebruikt kunnen worden. Het verbeterd de prestaties van de app.

    • Parcel: Parcel optimaliseert de hele PWA voor 'productie'. Het minimaliseert alle geschreven JavaScript, CSS en HTML en optimaliseert alle afbeeldingen. Ook dit komt de prestaties ten goede.

  • API's: Om gebruik te kunnen maken van geavanceerde functies worden API's ingezet. Denk aan een 'Fetch API' voor netwerkverzoeken, een 'Cache API' voor caching doeleinden of bijvoorbeeld IndexedDB. Dat is een API voor het opslaan van gestructureerde data op jouw smartphone. API's Worden niet alleen gebruikt om functionaliteiten van de smartphone aan te kunnen spreken (zoals de camera) maar ook om bijvoorbeeld een connectie maken met externe diensten zoals Facebook.

PWA vs Native app

In functionaliteit kennen de Progressive Web App en Native app een aantal verschillen. Ik zet een aantal opvallende voor je uiteen in onderstaande tabel.

Grootste verschillen tussen PWA en Native app

Feature

PWA

Native app
Werkt offline ✅ ja ✅ ja
Mobiele navigatie ✅ ja ✅ ja
Push meldingen ✅ ja ✅ ja
Toevoegen aan startscherm ✅ ja ✅ ja
Geen download nodig ✅ ja ❌ nee
Geen app/play store ✅ ja ❌ nee
Linken en delen ✅ ja ❌ nee
Indexeren door Google ✅ ja ❌ nee
Gebruikt weinig data ✅ ja ❌ nee
Geen updates nodig ✅ ja ❌ nee

Wel of geen app en play store: toelichting

Het is ook met een PWA mogelijk je app in de Google Play Store en Apple App Store te plaatsen. We kunnen dit bij Cell[0] ook doen. Dit hangt altijd volledig af van de wens van een klant.

Zodra je in de app store staat en gebruikers de app via de store downloaden en installeren zullen updates echter via diezelfde store uitgevoerd moeten worden.

3 Voorbeelden van bekende PWA's

De kans is groot dat je in het dagelijks leven gebruik maakt of hebt gemaakt van een PWA. Dit zijn 3 voorbeelden van bekende mobiele applicaties die een PWA zijn:

1) Uber

Uber heeft anno 2024 meer dan 130 miljoen maandelijks actieve gebruikers (bron) en is de bekendste app voor het boeken van personenvervoer.

Sinds 2017 is Uber een PWA. In 2019 werd diezelfde app van een nieuw design voorzien waarbij hij ook deels opnieuw opgebouwd werd.

De reden hiervoor is dat Uber de app beter beschikbaar wilde maken voor oude(re) smartphones en trage(re) internetverbindingen.

Voor de herontwikkeling maakten ze gebruiken van het Fusion.js framework - een 'plugin based' open source framework dat speciaal door het development team van Uber voor hun eigen PWA ontwikkeld werd.

1 Van de resultaten van het gedeeltelijk opnieuw opbouwen is dat de app nu altijd binnen maximaal 3 seconden opstart, zelfs wanneer de gebruiker op een 2G verbinding zit. Daarnaast verbeterde dankzij de Fusion.js implementatie de zogenaamde Time To First Byte (TTFB) van 1.5 naar 1.26 seconden.

2) Pinterest

Pinterest heeft waarschijnlijk ook geen introductie bij je nodig. De visuele zoekmachine is met name populair onder vrouwen: meer dan 75% van de gebruikersgroep is vrouw (bron). Iedere maand maken bijna een half miljard (!) mensen (bron) gebruik van deze PWA.

Dat was het niet altijd. Voordat Pinterest in 2017 een PWA werd was het namelijk een native app. Na het analyseren van gebruikersgedrag kwam het bedrijf echter tot de conclusie dat het conversiepercentage in browsers bijzonder slecht te noemen was.

Om dit te tackelen herstructureerde Pinterest de app. Over een periode van 3 maanden werd er met behulp van Webpack, Redux en React.js flink gesleuteld.

Er werd met name hard aan de performance van de app gewerkt. Zo werd er bijvoorbeeld gebruik gemaakt van 'progressive JPEG' en 'lazy loading' om sneller afbeeldingen te kunnen laden en tonen. Dit zorgde voor een aantal indrukwekkende verbeteringen op het platform (bron):

  • Tijd die op Pinterest werd doorgebracht nam ten opzichte van de mobiele website in de PWA met 40% toe

  • Toename van 44% in advertentie inkomsten

  • Toename van 60% in 'user engagement': scrollen, klikken, abonneren, etc

3) Telegram web

In 2021 had de WhatsApp concurrent Telegram ongeveer 500 miljoen geregistreerde gebruikers. In januari 2024 heeft het meer dan 800 miljoen maandelijks actieve gebruikers (bron).

Telegram koos voor een PWA aanpak omdat ze gebruikers de mogelijkheid wilde geven om berichten te lezen op zoveel mogelijk verschillende apparaten. Dit zijn enkele resultaten die het bedrijf boekte na de lancering van hun PWA:

  • 175% Meer gebruikers sinds 2018

  • 50% Meer retentie

  • 40% Meer gebruikers jaar op jaar

  • Helft meer sessies per gebruiker sinds lancering PWA

Dit vinden we (minder) goed aan PWA's

Of het nu om een hybride app, native app of PWA gaat: ieder type heeft zijn eigen voor- en nadelen. Dit zijn wat ons betreft de voornaamste plus- en minpunten van de Progressive Web App.

Pluspunten

  • Een PWA kan tegelijkertijd als een app en een website functioneren. Hierdoor kunnen functionaliteiten van apparaat en browser gebruikt worden.

  • Geen download en installatie nodig.

  • Groter bereik doordat de PWA overal vanaf het web bereikbaar is.

  • Kan als app op het startscherm toegevoegd worden.

  • Geen updates met input van gebruiker nodig.

  • Zichtbaar voor zoekmachines (ondersteund SEO).

  • Vaak goedkoper te ontwikkelen en te onderhouden.

Minpunten

  • Geen toegang tot app stores. Gebruikers moeten eerst de website bezoeken voordat de app toegevoegd kan worden aan het startscherm.

  • Functionaliteiten zoals contacten, de kalender, Bluetooth en NFC kunnen gebruikt worden. Soms is dat in een PWA lastiger te bereiken dan in een native app en in sommige situaties zullen er functionaliteiten zijn die met een PWA niet te gebruiken zijn.

  • De compatibiliteit van PWA's met browsers is nog in ontwikkeling. Apple ondersteunt nog niet alle functionaliteiten van een PWA. Op dit moment is het nog niet mogelijk om Bluetooth, Siri, push notificaties, Face ID of Touch ID te gebruiken.

  • De performance van een native app is nog altijd net iets beter dan die van een PWA.

PWA of Native: hoe maak je de keuze?

In de ontwikkeling van jouw app (idee) zul je een keuze moeten maken voor de 'fundering' van jouw app. Word het een PWA of native app? We hebben de wat ons betreft belangrijkste 'argumenten' van de 2 naast elkaar gezet. Het is aan jou in welk lijstje je de meeste winst ziet.

Je kiest voor PWA wanneer..

  • Je een app nodig hebt die soepel draait op zowel Android als iOS en tegelijkertijd als een web app in een web browser kan functioneren.

  • Je 1 app wilt ontwikkelen die op alle platformen en apparaten te gebruiken is.

  • Zo laag mogelijke ontwikkelings- en onderhoudskosten belangrijk zijn.

  • Het besparen van opslagruimte op apparaten en het vermijden van app stores belangrijk voor je is.

  • Je de content in de app wil laten indexeren door zoekmachines (SEO).

Je kiest voor native wanneer..

  • Je een app nodig hebt met zo'n sterk mogelijke performance en die alle functionaliteiten (zoals Bluetooth en Touch ID / Face ID) kan gebruiken.

  • Jouw app beschikbaar moet worden in de Google Play store en Apple App store.

  • Een zo soepel mogelijke gebruikerservaring (UI/UX) belangrijk is.

  • Je een app voor een specifiek platform wilt ontwikkelen.

FAQ

Hoe gebruik je een PWA?

Net zoals iedere andere app. Vanuit je browser kun je de app als icoon aan je startscherm toevoegen en vanuit daar de app 'opstarten'.

Hoe werkt een PWA?

Een PWA is een mobiele app die met web platform technologie is gebouwd. Hij gedraagt zich echter als een native app. Dus als een app die je via een app store installeert. Net zoals een hybride app kan een PWA met 1 broncode op meerdere platformen draaien.

Zijn PWA's platform specifiek?

Nee, je kunt een PWA op ieder platform gebruiken. Of dat nu Android, iOS of ander platform betreft. Apple ondersteunt echter nog niet alle functionaliteiten van een PWA. Dingen zoals push meldingen, Bluetooth en toegang tot Touch ID en Face ID werken niet.

Wat zijn bekende PWA's?

Er zijn tal van grote apps die een PWA zijn. In dit artikel hebben we er 3 besproken: Uber, Pinterest en Telegram.