Home » Blog » Ontwikkeling » Progressive Web Apps » Alles over de progressive web app

Alles over de progressive web app

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 meer dan 10 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.

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. 

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. Bovendien 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 en te installeren
  • 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

 

De nadelen van een PWA

  • Niet alle mobiele browsers ondersteunen PWA’s volledig
  • iOS toestellen ondersteunen het aanroepen van native functies nog beperkt (daarover hieronder meer)
  • Niet alle functies van de telefoon kunnen gebruikt worden, denk bijvoorbeeld aan toegang tot contacten of bluetooth.
  • Je app staat niet in de app store en kan daarom door gebruikers niet gevonden worden op de gebruikelijke plaats.
  • Ondersteuning door iOS, het besturingssysteem van de iPhone

 

Vrijwel alle grote platforms hebben inmiddels ondersteuning voor progressive web apps, maar de implementatie verschilt een beetje. Apple voegde pwa’s toe in iOS 11.3, maar niet geheel. Het belangrijkste is dat pushnotificaties niet werken onder iOS, omdat een service worker niets op de achtergrond mag doen. Andere belangrijke verschillen in implementatie: een pwa mag maximaal 50MB aan data opslaan en als de gebruiker de pwa een week niet start, gooit iOS de data weg. Ook kan Siri webapps niet vinden, werken Touch ID en Face ID niet en kunnen pwa’s geen gebruik maken van bluetooth en ARKit. Daarnaast zijn webapps in het multitaskoverzicht niet voorzien van een screenshot; er staat dan een wit venster.

De enige reden waarom PWA’s dus nog niet massaal zijn doorgebroken is heel simpel: Apple houdt het tegen. Op dit moment wordt er veel geld verdient met de micro transacties via de app store. Een vast deel daarvan wordt namelijk afgedragen aan Apple. Op een PWA is het niet te voorkomen dat deze transacties via andere kanalen gaan. Verder moet je sowieso goed nadenken over het design, de snelheid en de veiligheid van je app. iOS heeft een andere bediening dan Android. Wil je dezelfde gebruikservaring bieden dan zul je hier dus rekening mee moeten houden. PWA’s zijn dus geen wondermiddel die alle verschillen tussen bestaande besturingssystemen weghalen en de ontwikkeling van apps ineens een stuk goedkoper maken maar het is in ieder geval een grote stap vooruit. 

Is de PWA de heilige graal?

Nee, dat niet perse. 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 ontwikkelt. Nieuwsgierig? Neem vooral contact met ons op! We zullen in de nabije toekomst zien of ze daadwerkelijk kunnen concurreren met native apps maar gezien de ondersteuning van grote partijen als Google is de kans groot dat het PWA principe steeds populairder wordt. Over het algemeen kunnen marktleiders het zich niet veroorloven om succesvolle techniek lang tegen te houden dus hopelijk verdwijnt de terughoudendheid van Apple dan ook.