WordPress PWA- Tussen een app en een website in!

Een WordPress PWA… juist… wat is dat?

Wanneer je overweegt om jouw website naar een app om te zetten is het natuurlijk altijd de vraag, waarom iemand jouw app zou willen installeren. Een app neemt immers plaats in op je telefoon en aangezien de gemiddelde persoon die ik ken toch zijn telefoon behoorlijk vol heeft staan, zal men kritisch zijn met betrekking tot het installeren van nieuwe apps. Het moet wat extra bieden!

Bovendien zijn er natuurlijk kosten verbonden aan een app. De app moet worden ontwikkeld, het kost geld om hem in de store te plaatsen en bij het aanpassen van de app, zal je opnieuw een hele procedure moeten doorlopen.

Gelukkig is er ook een ‘tussenoplossing’. En die tussenoplossing wordt PWA genoemd. Nu zullen Apeldoorners bij het horen van PWA als eerste aan de Prins Willem Alexanderlaan denken, maar in dit geval staat PWA voor Progressive Web Application. En zo’n ‘progressive web application’ is niet het tegenovergestelde van een ‘conservative web application’, maar ‘progressive’ staat hier voor het geleidelijk ‘installeren’ van je web applicatie.

Een PWA kan overigens zowel een ‘gewone’ website zijn, als iets wat werkelijk een ‘app karakter’ heeft. Maar daarover later meer.

Geen app store noodzakelijk!

Het aardige van zo’n progressive web application -en om mijn vingers niet de hele tijd blauw te tikken zal ik dit verder tot PWA afkorten- is dat je heb zomaar direct van het web kan installeren. Want eigenlijk is het gewoon een website, maar met net een beetje meer.

Mijn hobby-site ‘Wilkookt!‘ is zo’n WordPress PWA. Maar voor je er direct op klikt om te kijken, vraag ik je toch even geduld te hebben en verder te lezen. Want dan kan je direct aan den lijve ondervinden, wat nu het verschil tussen een PWA en een gewone website is.

Kijk je op je desktop naar de website, dan zal je een gewone website zien. Niets bijzonders mee aan de hand. Want een PWA is alleen bedoeld voor smartphones en tablets.

Ga je naar Wilkookt! toe, zal je onder aan de pagina een balk zien staan met de tekst ‘Voeg toe aan Startscherm’. De exacte tekst is afhankelijk van de browser die je gebruikt. En je taalinstellingen voor die browser.

In de afbeelding hieronder wijst de rode pijl naar hoe het er in Chrome uit zal zien.

wordpress pwa | WordPress PWA- Tussen een app en een website in!

Overigens, niet iedere browser ondersteunt PWA apps en je kan de ondersteuning hiervoor ook uitzetten. Tenminste, dat kan in Chrome.

Maar in ieder geval, als je een geschikte browser gebruikt, en je klikt op ‘voeg toe aan Startscherm’ dan zal de browser jouw PWA installeren. En hier gebeuren er een paar dingen.

1. Er wordt een icoon op je startscherm geplaatst.

Tussen jouw apps is er nu een icoontje bijgekomen. Op de afbeelding hieronder geeft de rode pijl aan, waar die nieuwe app staat.

WordPress PWA

Wat hier natuurlijk wel belangrijk is, is dat je website een ‘favicon’ heeft. Want die zal als icon voor je PWA worden gebruikt. Wanneer je geen icon hebt, of het standaard ‘WordPress’ icoon, dan zal het niet echt herkenbaar zijn.

2. Er wordt een bestand gedownload, het zogenaamde ‘manifest’ bestand.

In de tweede stap zal er een bestand worden gedownload, waarin jouw browser het één en ander over jouw WordPress PWA website wordt verteld. Zoals bijvoorbeeld de belangrijkste pagina’s om te downloaden, hoe pagina’s ververst moeten worden en wat het gedrag moet zijn, als er geen verbinding is. Gelukkig hoeven we zelf niet zo’n bestand te ‘schrijven’, verderop in dit artikel bespreek ik een tweetal plugins die dit voor ons doen.

3. De weergave van de site krijgt een ‘mobile look’

De normale elementen van je browser zullen worden verborgen. Geen adresbalk en geen gebruikelijke menu’s voor je browser. Het enige menu wat er is, is het menu wat je zelf aan je site hebt toegevoegd.

WordPress PWA

4. De website wordt gedownload in de ‘idle time’

Ja, dat lees je goed. De hele website wordt gedownload. Nou ja, de hele website… dat valt mee. In dat manifest bestand van je WordPress PWA staat welke pagina’s er met prioriteit, welke ‘wanneer het schikt’ en welke helemaal niet moeten worden gedownload.

En hier komt ook precies het woordje ‘progressive’ vandaan in de afkorting PWA. Naarmate je verder klikt in de app zullen er meer pagina’s worden geladen. Om precies te zijn, die pagina’s die vanuit de huidige pagina zijn gelinkt.

Sommige pagina’s wil je direct beschikbaar hebben -zoals bijvoorbeeld algemene voorwaarden- andere pagina’s hebben minder prioriteit. En dat ‘manifest’ bestand zorgt ervoor dat je browser precies op de hoogte is van hoe jij wilt dat je site gedownload en ververst moet worden.

5. Offline…

En nu wordt het leuk. Want stel nu dat je site offline gaat. Dat kan zijn omdat je site daadwerkelijk down is, of omdat de telefoon van je klant even geen bereik heeft. Om te laten zien hoe dit allemaal werkt, wil ik je graag even uitnodigen om via je telefoon naar Wilkookt.nl te gaan. Maar wel met je tablet, of je telefoon, niet met je desktop. Als het goed is, zie je een balk onder in het scherm met een tekst als ‘Wilkookt! toevoegen aan je startscherm. De exacte tekst is afhankelijk van je browser, en je browsertaal. Hier klik je op, je wordt om bevestiging gevraagd, en je klikt ook op de bevestiging.

Dan wordt de WordPress PWA app geïnstalleerd.

En wat gebeurt er als ik geen verbinding meer heb?

Om dat te zien klik eens op een aantal recepten (of klik niet en wacht even) en verbreek daarna de verbinding met het Internet door zowel je Wifi als je mobiele data uit te zetten.

Vrijwel gelijk zal je een melding onder in je WordPress PWA app zien, die je vertelt, dat er geen verbinding is:

WordPress PWA

Wanneer je dan op enkele pagina’s klikt, zal je merken, dat -ook al heb je ze nog niet bezocht- je die pagina’s gewoon kan openen in de app. Klik je nog even door dan heb je een aardige kans, dat je ineens mijn ‘foutpagina’ krijgt, waar je vertelt wordt, dat je offline bent, en deze pagina pas beschikbaar zal komen wanneer je weer online bent.

Enkele voorbeelden

Wanneer is het nuttig om je website (ook) als PWA aan te bieden? Dat is sterk afhankelijk van hoe nuttig de site zelf voor je bezoekers is. Daarnaast zijn er ook een aantal technische zaken die een rol spelen.

Maar laten we eens kijken naar een paar voorbeelden.

Naslagwerken

Het eerste voorbeeld is natuurlijk precies wat je hier ziet. Een receptensite. Wanneer je een recept wilt maken, dan doe je dat het liefst niet vanaf je PC of laptop, maar een telefoon of een tablet. Die kan je in de keuken ergens makkelijk neerzetten of leggen. Je kan erom lachen, maar ik heb in de keuken een muziekstandaard staan speciaal voor dit doel.

Maar je kan natuurlijk ook aan andere naslagwerken denken. Ik heb diverse klanten die een behoorlijke ‘knowledgebase’ op hebben gebouwd over hun specialisme. Voor hen zou het ‘verappen’ van hun site als een WordPress PWA ook een heel nuttige optie zijn.

Online leeromgevingen

Wanneer je denkt over het uitvoeren van je online leeromgeving als een PWA, dan zijn er twee zaken om goed rekening mee te houden. Bestaat jouw cursus voor een groot deel uit video, dan zal altijd een internet verbinding noodzakelijk blijven. Je kan dus wel je site als PWA aanbieden om je cursisten een meer vloeiende ervaring te geven, maar ‘offline werken’ is er met video niet bij.

Webshops

Je webshop als PWA uitvoeren is zeker ook een goede mogelijkheid. Hier zitten echter enkele haken en ogen aan, die ik in een later artikel meer uitgebreid zal bespreken.

En dan nu: Hoe maak ik van mijn WordPress site een WordPress PWA?

Een PWA is niet iets ‘typisch WordPress’. Iedere website kan in principe omgezet worden tot een PWA website, maar daarvoor moet wel aan een aantal voorwaarden worden voldaan.

Een PWA implementatie bestaat uit twee belangrijke onderdelen. Een manifest en een service worker.

Het manifest is een ‘document’ in JSON formaat wat beschrijft, hoe de interactie tussen de PWA app en de server plaats moet vinden. Omdat het best lastig is zo’n document op te stellen, zijn er verschillende geautomatiseerde tools om dat te doen. Het zal je weinig verbazen, dat de manier waarop je het makkelijkst een ‘manifest’ op kan stellen voor een WordPress site door middel van een plugin gebeurt.

Het tweede wat je nodig hebt is een ‘service worker’. Zo’n service worker is een proces wat op de achtergrond van je website draait. Zoals ik al aangaf in de voorbeelden hierboven en zoals je zelf hebt mogen zien wanneer je de Wilkookt! WordPress PWA hebt geïnstalleerd, op de achtergrond worden aan client en server kant een aantal processen uitgevoerd, die in principe los staan van de directe interactie. Pagina’s worden geupdate, vervangen, gedownload.

Nu heb je eigenlijk twee soorten van PWA plugins voor WordPress. De eerste soort, die ik straks in detail ga bespreken, is de plugin die bedoeld is voor de eindgebruiker. Een plugin die jij vandaag kan installeren en waarmee je binnen een uur je eigen WordPress PWA online kan hebben. Dat is leuk voor een recepten database, een blog met WordPress tips of een andere vorm van kennisbank.

Dit soort plugins zijn voor webshops en online leeromgevingen minder geschikt. Voornamelijk omdat ze geen rekening houden met het verschil tussen een ingelogde en niet-ingelogde gebruiker.

Een PWA Framework

Om je site 100% te kunnen finetunen is er een aantal plugins die niet bedoeld zijn voor eindgebruikers maar voor programmeurs. Mijn favoriete op dit gebied is een plugin die simpelweg PWA heet. De plugin doet in directe zin niet zo gek veel meer dan het aanbieden van een scherm voor een aantal instellingen. Maar naast die instellingen stelt de plugin een groot aantal API functies beschikbaar, die gebruikt kunnen worden om het creëren van een manifest en het uitvoeren van een service worker tot in detail te kunnen controleren.

En daarmee is een plugin als deze uitermate geschikt voor complexere omgevingen als webshops en online leeromgevingen, waar mensen vaak als ze zijn ingelogd andere informatie te zien moeten krijgen, dan wanneer ze dit niet zijn.

En dan de makkelijke manier

Heb je een site waarop je bezoekers niet in hoeven te loggen? Dan is de plugin Progressive WordPress (PWA) denk ik wel de makkelijkste plugin om van jouw website een geschikte WordPress PWA te maken.

Wat wel een voorwaarde is, is dat je website responsive is.

Na het installeren van de plugin hoef je slechts een drietal schermen in te vullen en je WordPress PWA is ready to run.

Laten we eens meer in detail naar die schermen kijken.

Add to Homescreen

Op de pagina ‘Add to Homescreen’ geef je alle informatie in die je nodig hebt om jouw bezoeker de gelegenheid te geven jouw WordPress PWA op zijn mobiel te installeren.

En dat is eigenlijk super simpel. De pagina bestaat uit een aantal secties.

WordPress PWA

In de eerste sectie hoef je maar één veld in te stellen. Op wat voor manier je jouw website installeerbaar wilt maken. ‘Normal’ wil zeggen, dat er een installatiebalk onderaan je browser wordt geplaatst. Dat is toch wel mijn voorkeur.

Kies je voor ‘on element click’ dan moet je aan een klikbaar element (een knop, een link) een CSS class toevoegen, die je in een vervolgveld op moet geven. Dit is leuk wanneer je aardig met CSS overweg kunt, want je zal er ook -met CSS- voor moeten zorgen, dat het klikbaar element verborgen is, als de PWA al geïnstalleerd is. Misschien dat ik ooit in de WordXPression Snippet Base ooit een code snippet zal plaatsen hoe je dit moet doen, maar voorlopig adviseer ik je voor de eerste optie te kiezen.

En de optie ‘Never’… Tja, wat moet ik daar van zeggen? Waarom zou ik deze plugin willen installeren, wanneer ik de mensen nooit de optie wil geven mijn site als een WordPress PWA te installeren? Lijkt me nogal overbodig.

wordpress pwa | WordPress PWA- Tussen een app en een website in!

De tweede sectie die je op deze pagina in moet vullen geeft aan hoe je wilt dat je WordPress PWA er uit komt te zien. De meeste zaken spreken voor zich maar een aantal velden wil ik toch even nalopen.

Display mode

Hoe wil je dat je app op de telefoon zichtbaar is. Je hebt hier de keuze tussen een drietal instellingen.

  • Fullscreen : Je app komt letterlijk op het hele scherm te staan. Dus ook de controls van je operating system (iOS of Android) zijn niet meer zichtbaar. Dit kan nuttig zijn, wanneer je app een goede navigatie heeft, waarmee je overal kan komen. Maar wanneer je toch iets simpels als een ‘back’ knop wilt hebben, zonder die zelf te hoeven implementeren, dan is de volgende optie toch aan te bevelen.
  • Standalone – Native App feeling : Je app ziet eruit als een app. Dus geen browser balk, maar wel het navigatiemenu wat bij jouw OS hoort. Voor de gebruiker een vertrouwde vorm van app navigatie en daarom zeer aan te bevelen.
  • Minimal Browser Controls : Wat dit wil zeggen verschilt van browser tot browser. Maar in ieder geval is er geen balk waarin je een URL in kan tikken, je kan de app niet uit. Maar er wordt wel een aantal controls van de browser aan je scherm toegevoegd. Denk hierbij bijvoorbeeld aan een ‘Verversen’ functie of functies om een pagina voor- of achteruit te gaan. Maar zoals gezegd, je browser bepaald welke functies dat zijn.

Orientation

In dit veld geef je aan of je de app alleen in portrait, alleen in landscape of in beide modi wilt tonen. Voor Wilkookt! staat dit op ‘portrait’.

wordpress pwa | WordPress PWA- Tussen een app en een website in!

In het scherm Start URL tracking kan ik de UTM parameters meegeven die vanuit de start URL worden meegegeven. Tot op heden is het nut van deze parameters op deze plaats mij onduidelijk.

Offline usage

Op de pagina ‘offline usage’ vind je een aantal opties, die beschrijven wat je WordPress PWA meot doen als de server offline is.

Laten we het weer per sectie bekijken.

wordpress pwa | WordPress PWA- Tussen een app en een website in!

De eerste sectie van de pagina ‘offline usage’ heet ook ‘offline usage’. En in drie velden beschrijf je de drie belangrijkste zaken die er moeten gebeuren om een zo soepel mogelijke gebruikerservaring te krijgen met je WordPress PWA.

In het veld Offline fallback page geef je aan welke pagina getoond moet worden, wanneer de server niet beschikbaar is en de pagina ook niet voorkomt in de cache. Dat is een pagina waarin je de gebruiker op een vriendelijke manier vertelt, dat de informatie er niet is, omdat er geen verbinding is met het Internet, en dat zodra die verbinding is hersteld, de pagina beschikbaar zal komen.

Oftewel : Lieve bezoeker, het ligt niet aan ons, het ligt aan jou.

In het veld Offline Content geef je aan welke pagina’s met hoge prioriteit geladen moeten worden. Dit zijn natuurlijk de homepage, je ‘Offline fallback page’ en de overzichtspagina(s) van je meest belangrijke informatie. Andere pagina’s die hoge prioriteit hebben kunnen algemene voorwaarden, privacy policy of andere belangrijke zakelijke informatie zijn.

Op het moment dat je bezoeker geen contact heeft met het Internet, zal Google Analytics ook niet kunnen zien welke pagina’s er bezocht worden. Wanneer je Offline Google Analytics aanvinkt, dan worden die gegevens lokaal opgeslagen en later alsnog verwerkt.

Let op: Dit werkt alleen met Google Analytics. Andere online meettools die je hebt voor je site zullen niet werken, wanneer je bezoeker offline is.

wordpress pwa | WordPress PWA- Tussen een app en een website in!

Het scherm ‘Caching strategies’ geeft aan hoe bepaalde informatie op je device gecachet moet worden.

Wat je in dit scherm ziet staan is een goed ‘gemiddelde’, maar het geeft ook precies aan, waarom deze plugin niet geschikt is voor webshops en online leeromgevingen. Want in zo’n geval wil ik eigenlijk per post type een aparte caching strategy kunnen bepalen. ‘Lessen’, ‘Producten’ en afreken pagina’s vragen om een totaal andere aanpak dan mogelijk is met deze plugin.

wordpress pwa | WordPress PWA- Tussen een app en een website in!

En onder offline indicator geef je aan, welke boodschap -en hoe- getoond moet worden wanneer de verbinding weg is gevallen.

Push notifications

wordpress pwa | WordPress PWA- Tussen een app en een website in!

De plugin biedt ook de mogelijkheid om push berichten te sturen. Wanneer je wilt weten wat een push bericht is, moet je eens onderaan deze pagina aan de linkerkant op de rode bel klikken en de verdere instructies volgen.

Wat niet uit de plugin blijkt, maar wel duidelijk is in de documentatie, is dat de plugin ook geïntegreerd is met de OneSignal plugin. Wanneer je deze actief hebt, werken push notificaties ook probleemloos. Aangezien dit mijn voorkeur heeft, heb ik verder niet veel aandacht besteed aan dit scherm.

Hoe nu verder?

Wil je weten hoe jouw website er als een WordPress PWA uit zou zien? Dan kan je dit het best op een staging kopie van je website uitproberen. Op een lokale kopie van je website zal het niet lukken, omdat die niet gevonden kan worden door je mobiele telefoon.

Vind je dat allemaal te complex, voor een vast ‘bedrag’ van 2 uur support strippenkaart kan ik voor jou op een subdomein in mijn beheer een tijdelijke versie van jouw website installeren, met daarop jouw website geconfigureerd als een WordPress PWA. Op deze manier kan je testen of dit inderdaad iets is wat je op je website wilt hebben. Mocht je hiervoor kiezen, dan wordt dit ook op je live website geïmplementeerd.

Voor alle duidelijkheid : Dit aanbod geldt alleen voor websites waar bezoekers niet op in hoeven te loggen!

Heb je een webshop of een online leeromgeving en je wilt die graag beschikbaar maken, maak dan even een belafspraak via het contactformulier, zodat we dit even rustig samen kunnen bespreken.

Nog niet uitgelezen?

Vind je dit artikel interessant? Mooi! Want ik heb nog veel meer te bieden. Op deze site vind je letterlijke honderden artikelen over WordPress, marketing, e-commers, e-learning en nog veel meer onderwerpen. Op zoek naar meer informatie? Kies één van de trefwoorden hieronder of tik een zoekopdracht in.

Wees eens aardig en deel dit met je vrienden
Enkele trefwoorden om vergelijkbare posts te vinden:

Word je website de baas. Neem vandaag nog contact op!

Contact Information

WordXPression 
Imkersdreef 525
7328DG Apeldoorn
06-10449807 (van 9:00 tot 17:00 van ma-vr)

KVK : 75580152 

Social media
Stuur een bericht