Progressive Web App met WordPress: voor- en nadelen

4 Min.
Progressieve Web-app WordPress

Onze agency-partner giftGRÜN bouwde met WordPress een Progressive Web App (kort: PWA) voor het universitair ziekenhuis RWTH Aachen, die de onboarding van nieuwe medewerkers ondersteunt. We spraken met Patrick Heinker over de voor- en nadelen van PWA's ten opzichte van websites en native apps.

Hoe werkt een Progressive Web App

Patrick, kun je ons vertellen hoe een PWA werkt en hoe het zit met databeheer?

De inhoud wordt in WordPress bijgehouden en via normale templates uitgevoerd. Een ServiceWorker zorgt voor de offline functionaliteit. Wanneer de pagina voor het eerst wordt geopend, downloadt de ServiceWorker een zip-bestand met alle pagina's die door de server gegenereerd zijn.

Als nu een pagina wordt opgeroepen, wordt de reeds gecachete pagina getoond. En de ServiceWorker zorgt op de achtergrond voor de update, zodat bij het volgende bezoek nieuwe inhoud wordt weergegeven, als er iets is veranderd. Optioneel zou je ook kunnen herladen na een update, maar dat was niet nodig voor onze use case.

PWA WordPress
Screenshots van de Progressive Web App voor het universitair ziekenhuis RWTH Aachen

De gegevensopslag is volledig offline, een internetverbinding is alleen nodig voor video's en externe inhoud.

PWA vs. native app

Wat zijn de verschillen maar ook de voordelen ten opzichte van native apps?

Native apps zijn platformspecifiek, vaak complex en daardoor duur om te implementeren. Bovendien moeten ze via de officiële stores worden verspreid om een groot bereik te behalen. PWA's daarentegen kunnen met een druk op de knop direct bij het bezoeken van de site geïnstalleerd worden.

Apple loopt echter nog steeds een beetje achter met de ondersteuning van PWA-functionaliteiten. Maar dat Safari dingen niet ondersteunt die in andere browsers al jaren gebruikelijk zijn, is niets nieuws voor webontwikkelaars.

Hoe werken de Progressive Web Apps en WordPress samen?

Wij gebruiken WordPress voor gegevensonderhoud, maar ook voor de sjablonen. Het is een normale website, met als enige verschil dat de inhoud offline beschikbaar wordt gemaakt via een JavaScript ServiceWorker. En dat het zich bijna als een native app gedraagt.

Er is ook de mogelijkheid om de REST API van WordPress te gebruiken en alles client-side te renderen, zoals bij native apps. Voor onze toepassing zagen we daar echter niet het voordeel van in en het zou alleen maar meer werk hebben betekend.

Progressive Web App maken met WordPress

Waar moet je beginnen als je een progressive web app wilt implementeren?

Er zijn een aantal plugins, waarmee een pagina met een druk op de knop en een paar instellingen kan worden omgetoverd tot een Progressive Web App. Er zijn ook pushnotificatiediensten die gebruikt kunnen worden om alle blogbezoekers te informeren over nieuwe berichten. Deze kant-en-klare plugins zijn eerder bedoeld om een gewone blog offline geschikt te maken en gerichte bestanden vooraf te laden.

Na wat rondgespeeld te hebben met een aantal van deze plugins, besloten we om voor onze eigen oplossing te kiezen. Wij hebben onze functionaliteit los van de plugins gebouwd om bijvoorbeeld het volledige laden van pagina-inhoud via een door de server gegenereerde zip mogelijk te maken en om flexibeler te zijn bij het aanpassen van functies. Pushberichten worden meestal in kaart gebracht via betaalde diensten, maar kunnen net zo goed zelf worden gebouwd.

PWA's: compatibiliteit en gegevensbescherming

Wat zijn de mogelijke valkuilen en hoe hebben jullie die opgelost? En hoe zit het met het onderwerp gegevensbescherming?

Zoals altijd bij webontwikkeling werkt elke browser anders en moet de PWA uitgebreid getest worden op alle apparaten. Apple weigert de PWA functionaliteit volledig te ondersteunen en heeft weer eigen Apple specifieke meta tags om de app die afwijken van de standaard te laten werken.

Het caching-model moet gekozen worden op basis van de toepassingssituatie. ServiceWorkers kunnen in milliseconden pagina's cachen en op de achtergrond verversen. Als ik echter op een nieuwspagina ben, ziet de gebruiker misschien liever een klein wachtbalkje tot de laatste inhoud is geladen.

Gegevensbescherming was voor ons een van de belangrijkste redenen om voor een PWA te kiezen. De inhoud en de leervorderingen van de gebruikers worden volledig offline bewaard. De server ziet nooit welke gebruiker wat oproept, aangezien er geen ingelogde gebruikers zijn. Het is dus onmogelijk om te achterhalen of een nieuwe werknemer alles heeft doorgewerkt of de app nog niet eens heeft geïnstalleerd.

Voor- en nadelen van de systemen

Hoe bepaal je per klant welke technologie het meest geschikt is voor zo'n project?

Er zijn toepassingen die alleen via een native app kunnen worden uitgevoerd. Als een klant bijvoorbeeld absoluut push-notificaties op een iPhone wil, dan is er geen andere manier dan native. Aan de andere kant is het bouwen van PWA's ook beduidend goedkoper dan een native app door het gebruik van webtechnologieën en het feit dat er geen tussenkomst van een winkel nodig is. Uiteraard speelt ook het beschikbare budget een doorslaggevende rol.

Hebben jullie nog andere PWA-projecten in de pipeline waar jullie ons al iets over kunt vertellen?

Heel veel - maar die willen we nog niet verklappen 😉 Laten we het erop houden dat je ook op e-commerce gebied geweldige dingen kunt bereiken met PWA's.

Een paar woorden over jou en je bureau?

giftGRÜN is het digitale agentschap binnen de GRÜN Group. Onze bedrijvengroep is de marktleider op het gebied van donatie- en ledenbeheersystemen in Duitsland. De meeste van onze projecten gaan over het opzetten van een totaalsysteem voor onze klanten, d.w.z. het verbinden van ons ERP-systeem met websites.

Wij doen veel interfacewerk en ontwikkelen ook onze eigen WordPress themes. Ons team bestaat uit ontwerpers, front- en backend-ontwikkelaars en projectmanagers. Onze favoriete webhost is natuurlijk RAIDBOXES uit Münster 🙂.

Jouw vragen over Progressive Web Apps

Welke vragen heb je over Progressive Web Apps? Voel je vrij om de commentaarfunctie te gebruiken. Wil je op de hoogte blijven van nieuwe artikelen over WordPress en WooCommerce? Volg ons dan op Twitter, Facebook, LinkedIn of via onze nieuwsbrief.

Reacties op dit artikel

Laat een opmerking achter

Jouw e-mailadres zal niet worden gepubliceerd. Verplichte velden zijn met een * gemarkeerd.