Onze agentschapspartner giftGRÜN gebruikte WordPress om een Progressive Web App (kortweg PWA) te bouwen voor het universitair ziekenhuis RWTH Aachen, dat 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 een Progressive Web App werkt
Patrick, hoe werkt een PWA precies en hoe zit het met data management?
De inhoud wordt onderhouden in WordPress en uitgevoerd via normale templates. Een ServiceWorker levert de offline functionaliteit. Wanneer de pagina voor het eerst wordt geopend, downloadt de ServiceWorker een zip-bestand met alle pagina's, dat op de server wordt gegenereerd.
Wanneer nu een pagina wordt opgevraagd, wordt de pagina getoond die al in de cache zit. 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 men ook kunnen herladen na een update, maar dit is niet nodig geweest voor onze use case.
De gegevens worden volledig offline opgeslagen; alleen voor video's en externe inhoud is een internetverbinding nodig.
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 zij via de officiële winkels worden gedistribueerd om een groot bereik te krijgen. PWA's daarentegen kunnen met een druk op de knop direct bij het bezoeken van de site worden geïnstalleerd.
Apple loopt echter nog een beetje achter met de ondersteuning van PWA-functionaliteiten. Maar dit is niets nieuws onder webontwikkelaars, dat Safari dingen niet ondersteunt die in andere browsers al jaren gebruikelijk zijn...
Hoe werkt de interactie van de Progressive Web App met WordPress?
We gebruiken WordPress voor het onderhoud van de gegevens, maar ook voor de templates. Het is een normale website, met als enige verschil dat de inhoud offline beschikbaar wordt gesteld via een JavaScript ServiceWorker. En dat het zich bijna als een native app gedraagt.
Er is ook de optie om de WordPress REST API te gebruiken en alles aan de client kant te renderen, zoals gebruikelijk zou zijn in native apps. Voor onze use-case hebben we hier echter alleen maar extra moeite gezien die nauwelijks enig voordeel oplevert.
Een progressieve webapplicatie implementeren met WordPress
Welke benaderingen zijn er als je een Progressive Web App met WordPress wilt realiseren?
Er zijn een aantal plugins die met een druk op de knop en een paar instellingen een pagina in een progressive web app kunnen veranderen. Er zijn ook pushnotificatiediensten die kunnen worden gebruikt om alle blogbezoekers te informeren over nieuwe berichten. Deze kant-en-klare plugins zijn echter meer bedoeld om een gewone blog offline geschikt te maken en gerichte bestanden vooraf te laden.
Na wat gespeeld te hebben met een aantal van deze plugins, zijn we naar onze eigen oplossing gegaan. Wij hebben onze functionaliteit los van de plugins gebouwd, bijvoorbeeld om het volledige laden van pagina-inhoud via een door de server gegenereerde zip mogelijk te maken en om flexibeler te zijn in het aanpassen van functionaliteit. Pushberichten worden meestal via betaalde diensten in kaart gebracht, maar kunnen net zo goed zelf worden gebouwd.
PWA's: compatibiliteit en gegevensbescherming
Wat zijn de mogelijke valkuilen en hoe heb je die opgelost? En hoe zit het met gegevensbescherming?
Het gebruikelijke met webontwikkeling: elke browser werkt anders en het moet uitvoerig worden getest op alle apparaten. Apple weigert de PWA functionaliteit volledig te ondersteunen en heeft weer eigen Apple specifieke meta tags om de app te laten werken die afwijken van de standaard.
Het caching-model moet worden gekozen naar gelang van de gebruikssituatie. ServiceWorkers kunnen in milliseconden gecachete pagina's uitvoeren en op de achtergrond verversen. Als ik echter op een nieuwspagina ben, ziet de gebruiker misschien liever een kleine wachtbalk 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 geregistreerde gebruikers zijn. Het is dus onmogelijk om na te gaan of een nieuwe werknemer alles heeft doorgewerkt of de app zelfs nog niet 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 pushberichten wil op een iPhone, dan kan dat niet anders dan op een native manier. Anderzijds is de productie van PWA's ook aanzienlijk goedkoper dan een native app door het gebruik van webtechnologieën en het feit dat de hele winkelafhandeling achterwege blijft. Uiteraard speelt ook het beschikbare budget een doorslaggevende rol.
Heb je nog andere PWA-projecten in de pipeline waar je ons over kunt vertellen?
Heel veel – maar die willen we nog niet verklappen 😉 Alleen dit: ook in de e-commerce sector kunnen er leuke dingen gedaan worden met PWA's.
Een paar woorden over jou en je bureau?
giftGRÜN is het digitale bureau 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 overkoepelend systeem voor onze klanten, d.w.z. het verbinden van ons ERP-systeem met websites.
Wij doen veel interface werk en ontwikkelen ook onze eigen WordPress themes. Ons team bestaat uit ontwerpers, front- en backendlers en projectmanagers. Onze favoriete hoster is natuurlijk die uit Münster 🙂 .
