Alles over de progressive web app

– Update: december 2023 –

Een aantal jaar geleden wilde iedereen een app. Wie een app had hoorde er bij. Nu is het niet zo dat de relevantie van een app is afgenomen, maar de noodzaak is wel veranderd. Een gebruiker wil vooral snel zijn informatie ontvangen of actie uitvoeren.

Inmiddels bestaat de eerste app store ruim 15 jaar.  Op 10 juli 2008 werd deze door Apple gelanceerd. Hij was op dat moment gevuld met 500 apps. Inmiddels zijn dat er meer dan 2 miljoen. We kunnen dus zeker wel spreken van een groot succes. En dat terwijl voormalig Apple topman Steve Jobs destijds in tegenstelling tot concurrenten geen mogelijkheid bood aan andere ontwikkelaars om apps te maken. Jobs wilde voor apps volledig leunen op de browser.

Wat is een Progressive Web App?

Tegenwoordig zijn er meerdere smaken waarmee je een app kan ontwikkelen. Naast de native of hybride ontwikkeling kun je ook kiezen voor een Progressive Web App (PWA). Ruim tien jaar later wordt de filosofie van Jobs dus langzaam werkelijkheid: Een PWA is een website met veel van de kenmerken en eigenschappen van een app. Een app die in de browser werkt dus! Je kunt dit eigenlijk zien als een mobiele website die zich gedraagt als een app. Hiermee heb je wel de lusten maar niet de lasten van app ontwikkeling.

PWA’s zijn bedacht door Google. Het doel van Google is om alle informatie wereldwijd snel en eenvoudig toegankelijk te maken voor zijn gebruikers. Naast de beroemde zoekmachine gebruiken ze ook hun besturingssysteem Android en de webbrowser Chrome om dit doel te bereiken. In 2017 kondigde Google de Progressive Web app aan. 

De PWA in 2024
In een recent artikel van David Heinemeier Hansson, CTO van 37signals (de makers van onze project management software Basecamp), wordt een belangrijke verschuiving in de B2B app-ontwikkeling besproken. Hansson benadrukt dat 2024 wel eens het jaar van de PWA zou kunnen worden. Dat komt door de steeds groter wordende uitdagingen van het ontwikkelen van native apps voor verschillende platforms. Denk bijvoorbeeld aan de hoge kosten en technische complexiteit. Door recente verbeteringen van Apple in de PWA-ondersteuning, zoals ‘Add to Dock’ en ‘Web Push Notifications’, worden PWAs een zeer aantrekkelijker alternatief. Hansson adviseert bedrijven om zich in eerste instantie op PWAs te richten, gezien hun toegenomen levensvatbaarheid en concurrentiekracht.

Als een website zich een progressive web app wil noemen zijn daar drie zaken voor nodig. Allereerst moet de site een beveiligde verbinding door middel van een certificaat ondersteunen. Je herkent deze aan het (groene) slotje in je browser. Daarnaast moet er gebruik worden gemaakt van Service Workers en moeten de eigenschappen van de webapp in een manifest worden omschreven. Ik leg het hieronder beknopt uit. 

Het manifest

Het is belangrijk dat een gebruiker je app snel herkent. Het manifest regelt deze zaken. Denk bijvoorbeeld aan een icoon wat op het homescreen staat. Ook regelt het manifest het splashscreen wat een gebruiker ziet als de app opstart. Daarnaast regelt het de kleuren, de url van het beginscherm en wijst het een gebruiker er op dat de webapp aan het startscherm van je telefoon toegevoegd kan worden. 

De service workers

Service workers zijn kleine stukjes code die onafhankelijk van de website op een apparaat (je mobiele telefoon bijvoorbeeld) kunnen werken. Ze moeten ervoor zorgen dat de browser vaste elementen van je telefoon opslaat in het geheugen. Denk daarbij aan het menu, de logo’s en andere vaste elementen. Daardoor hoeft de browser bij een volgend bezoek deze elementen niet op te halen maar staan ze direct klaar. Ze kunnen daarnaast (als de browser dat toestaat) de website ook toegang gegeven tot bijvoorbeeld locatieverzieningen of pushnotificaties. 

Om een progressive web app te realiseren, speelt naast de service worker de ‘application shell architecture’, die ook bij native apps wordt gebruikt, een belangrijke rol. Hierdoor kan de gebruikerssoftware onderscheid maken tussen de vaste elementen en de content/inhoud. Hierdoor zijn de download tijden korter en de prestaties van de PWA veel beter. Vervolgens is het dan mogelijk om al gedownloade content van een PWA offline te gebruiken.

De voordelen van een PWA

  • Het is goedkoper en eenvoudiger om een PWA te programmeren.
  • Wijzigingen zijn makkelijk en snel door te voeren.
  • Je kunt met een PWA zowel een normale website als een mobiele app creëren .
  • Je hoeft een PWA niet eerst te downloaden, maar zet ‘m met twee klikken op je startscherm.
  • Updates hoeven niet worden gedownload, dit gebeurt automatisch als de app opstart.
  • Een PWA heeft veel minder opslagruimte nodig.
  • PWA’s zijn vindbaar in zoekmachines en onafhankelijk van het gesloten systeem van een app store.
  • Een PWA kan in de Google zoekresultaten gevonden worden.

De nadelen van een PWA

  • Niet alle mobiele browsers ondersteunen PWA’s volledig.
  • Niet alle functies van de telefoon kunnen gebruikt worden, zoals toegang tot contacten, Virtual Reality en bluetooth.
  • Je app staat niet in de app store en kan daarom door gebruikers niet gevonden worden op de gebruikelijke plaats.
  • Als de gebruiker de PWA een week niet start, gooit iOS de data weg. Dit geldt alleen voor websites die informatie verzamelen, zoals Facebook.
  • Siri kan webapps niet vinden.

Push-notificaties in iOS

Een push-notificatie is een melding die de app naar je stuurt. Bijvoorbeeld wanneer iemand je bericht een like heeft gegeven, als er een kortingsactie is of als herinnering dat je iets moet doen (zoals een testvraag invullen of een DuoLingo-les maken). Tot januari 2023 hield Apple de mogelijkheid om push-notificaties te sturen in PWA’s tegen. Aan de ene kant omdat ze zelf controle willen houden over de apps die mensen kunnen downloaden. Via de App Store kan Apple de veiligheid van de apps garanderen en voorkomen dat mensen worden opgelicht via nepbetalingen en virussen. Aan de andere kant verdient Apple veel geld aan de AppStore. Bedrijven betalen een bepaald bedrag per app die ze erin zetten en ook van elke betaling ontvangt Apple een percentage.

Maar nu is het dus mogelijk om push-notificaties te sturen via een PWA op iOS. Daardoor wordt het voor veel bedrijven aantrekkelijk om een PWA te publiceren in plaats van een native app (via de AppStore). Het ligt er natuurlijk nog wel aan welke functionaliteiten je in je app wil zien. Toegang tot contacten, bluetooth, Augmented en Virtual Reality zijn nog niet beschikbaar via de PWA. Maar als push-notificaties vereist zijn in je app, kan je nu voor deze optie gaan.

Is de Progressive Web App de heilige graal?

Nee, dat niet per se. Je moet sowieso goed nadenken over het design, de snelheid en de veiligheid. De mogelijkheden zijn nu soms nog beperkt. Daarnaast verwacht een Android gebruiker een andere werking van een App dan een iOS gebruiker. Een voorbeeld: iOS heeft geen back button. Die moet je er dus zelf inzetten, wil je dezelfde gebruikerservaring bieden als in een Android-browser. Het is dus goed om je te realiseren dat PWA’s geen wondermiddel zijn die alle verschillen tussen de bestaande besturingssystemen weghalen.

Wij werken er in ieder geval graag mee en hebben al een aantal progressive web apps ontwikkeld. Nieuwsgierig? Neem vooral contact met ons op!

Deel dit blogbericht via