Progressive Web Apps veranderen de manier waarop gebruikers websites gebruiken. Ze zijn technisch gezien een mix van het beste dat een mobiele app en een traditionele website te bieden hebben. Door vanaf nul te beginnen met PWA technologie in WordPress kun je niet alleen je skills verbeteren, maar ook een aantrekkelijkere, toegankelijkere en sneller ladende versie van je website maken.
Dit betekent dat bedrijven, bloggers en digitale makers beter dan ooit in contact kunnen komen met hun gebruikers en meer inhoud kunnen bieden.
Als je klaar bent om je WordPress website om te zetten naar een PWA, dan ben je bij ons aan het juiste adres. Wij leggen je precies uit hoe je deze webapplicaties bouwt en optimaliseert, zodat je verzekerd bent van het succes van je volgende project.
Laten we aan de slag gaan!
Wat zijn PWA’s?
Progressive Web Apps zijn een soort technologie die de mogelijkheden van een traditionele, responsieve website combineert met die van een functierijke mobiele applicatie.
Volgens Mozilla gebruiken PWA’s moderne webfuncties om een app-achtige webinterface te bieden die toegankelijk is met een webbrowser.
De drie belangrijkste technische componenten achter PWA’s zijn:
- Service workers. PWA’s maken gebruik van scripts die onafhankelijk van een website draaien en vergelijkbare acties uitvoeren die alleen op de webpagina kunnen worden uitgevoerd. Service workers maken bijvoorbeeld pushmeldingen mogelijk, maken synchronisatie op de achtergrond mogelijk en zijn offline beschikbaar. Dit laatste is mogelijk omdat de service workers fungeren als een proxy-netwerk. PWA’s kunnen de inhoud cachen en afleveren wanneer er geen verbinding is, waardoor ze een uitzonderlijke betrouwbaarheid bieden, zelfs in onzekere netwerkomstandigheden.
- Web app manifest. Het manifest is een JSON-bestand dat de applicatie beschrijft, waardoor deze zich kan presenteren als een add-to-home icoon op een smartphone. Het bestand is gericht op het creëren van een interactie met het gebruikerssysteem, inclusief de start-URL, weergave-instellingen, beschrijvende naam en pictogrammen.
- HTTPS. Dit laatste onderdeel is een van de meest cruciale. Hoewel het niet direct bijdraagt aan de gebruikerservaring, verhoogt HTTPS de veiligheid en wordt de privacy van de bezoeker beschermd door gegevensversleuteling en anonimiteit van informatie.
De combinatie van alle drie de technologieën zorgt voor een snelle, installatievrije ervaring, waarbij de PWA volledig is geïntegreerd in de homepage.
Je kunt zien dat al deze stukjes prachtig samenkomen met de website en app van Cafe Javas.
Deze PWA, ontwikkeld door TechAhead, biedt een naadloze ervaring tussen de website en mobiele app versies. Hierdoor kunnen klanten eenvoudig bestellingen plaatsen vanuit hun webbrowser zonder de frustrerende UX van een traditionele website.
Waarom van een WordPress site een PWA maken een goed idee is
Je WordPress site omvormen tot een Progressive Web App kan je digitale aanwezigheid en gebruikerservaring aanzienlijk verbeteren. Hier lees je waarom de overstap een briljante zet is:
1. Meer betrokkenheid van gebruikers
Een van de vele voordelen van PWA’s is de mogelijkheid om pushmeldingen te versturen. Hiermee kun je je publiek informeren over je laatste nieuws en aankondigingen en er eenvoudigweg voor zorgen dat je websitebezoekers je niet vergeten. Deze eigenschap stimuleert regelmatige bezoeken en meer interacties.
2. Verbeterde snelheid van je site
PWA’s zijn ook extreem snel. De meeste assets worden in de cache opgeslagen en service workers helpen om ze snel te laden. Zelfs als de bezoekers van je site niet over de snelste en meest betrouwbare netwerkprovider beschikken, zal hun met WordPress gevoede PWA direct laden. Deze snelheidsverbetering verbetert niet alleen de gebruikerservaring, maar draagt ook positief bij aan de ranking in zoekmachines, want sitesnelheid is een rankingfactor voor Google.
3. Offline mogelijkheden
Misschien wel een van de meest overtuigende voordelen van PWA’s is hun vermogen om offline of op netwerken van slechte kwaliteit te functioneren. Dit wordt bereikt door service workers die belangrijke bronnen cachen, waardoor gebruikers eerder bezochte pagina’s kunnen openen zonder internetverbinding.
4. Traditionele beperkingen zijn niet van toepassing
Traditionele websites en mobiele applicaties hebben elk hun beperkingen. Websites zijn bijvoorbeeld sterk afhankelijk van de netwerkkwaliteit en bieden geen native app-functionaliteiten zoals pushmeldingen of offline toegang. Mobiele applicaties daarentegen vereisen dat gebruikers regelmatig updates downloaden en installeren.
PWA’s hebben deze nadelen niet.
Je WordPress site omzetten in een PWA is niet alleen je site verbeteren. Het verandert de manier waarop je publiek ermee omgaat door middel van een sneller, aantrekkelijker platform dat werkt en er goed uitziet op elk apparaat en met elk netwerk.
Vereisten voor PWA ontwikkeling in WordPress
Iedereen die een PWA voor WordPress wil bouwen, moet het volgende weten:
- UX ontwerp. Gebruik UX design principes als uitgangspunt om van je PWA iets te maken dat gebruiksvriendelijk is en dat mensen willen gebruiken en ermee willen werken.
- HTML en CSS vaardigheden. Je moet je pagina’s ordenen en ze visueel aantrekkelijk en responsief maken. Dit vereist kennis van HTML en CSS, de bouwstenen van webdesign.
- PHP kennis. WordPress is gebouwd op PHP, dus je moet deze server-side scripttaal kennen om thema’s en plugins aan te passen en andere dynamische content functionaliteit aan je PWA toe te voegen.
- JavaScript kennis. JavaScript is onder andere nodig om interactiviteit met je PWA af te handelen, te werken met service workers voor offline functionaliteit en meer ingewikkelde functionaliteit toe te voegen zoals pushmeldingen.
- Bekendheid met WordPress. Het maakt het ontwikkelproces veel gemakkelijker als je begrijpt hoe alle aspecten van WordPress werken, de API’s, thema’s en plugins aanpassen, inhoud beheren en de WordPress-specifieke PHP-functies die je tot je beschikking hebt.
Beste PWA plugins voor WordPress
Als je snel zoekt naar de beste PWA plugins voor WordPress, ontdek je al snel een reeks tools die je website kunnen verbeteren met app-achtige functionaliteit, snellere laadtijden en andere indrukwekkende features.
Voor degenen die snel een PWA willen bouwen, zijn hier een aantal van de beste PWA plugins die momenteel beschikbaar zijn voor WordPress en die je workflow kunnen versnellen.
1. Super Progressive Web Apps
De Super Progressive Web Apps plugin is ontwikkeld door SuperPWA en biedt WordPress gebruikers een eenvoudige manier om hun websites te veranderen in Progressive Web Apps (PWA’s). Deze samensmelting van de beste aspecten van web en mobiele app technologieën maakt offline gebruik, bijna directe laadtijden en toegang via een snelkoppeling op het beginscherm mogelijk.
Voordelen
- Het toevoegen van app-achtige functies en de mogelijkheid om zelfs offline inhoud te bieden, kan het websitebezoek, de betrokkenheid en andere KPI’s verhogen.
- Superieure prestaties, door een kortere laadtijd en een lichtere belasting op een apparaat, kunnen ook de SEO waarde van een website verhogen.
- Eenvoudig in te stellen en te configureren met gebruiksvriendelijke instellingen.
Nadelen
- Kan incompatibel zijn met bepaalde thema’s of plugins, waardoor meer aanpassingen nodig zijn om goed te werken.
- Beschikbare geavanceerde opties vereisen een beter begrip van webtechnologieën om er voordeel uit te halen.
Prijzen
SuperPWA werkt op een freemium model, wat betekent dat een kernset van functies gratis beschikbaar is, met extra’s die toegankelijk zijn via upgrades. De eerste set SuperPWA upgrades begint bij $99.
2. PWA for WP & AMP
De PWA for WP & AMP plugin verrijkt de gebruikerservaring met een app-achtige interface, volledige AMP PWA compatibiliteit, multisite ondersteuning, UTM tracking en de mogelijkheid om offline te werken. Het biedt ook ondersteuning voor de ontwikkeling van service workers, app banners, een web app manifest en een aangepast splash scherm.
Voordelen
- Verbetert de betrokkenheid door je website installeerbaar te maken op het beginscherm.
- Ondersteunt AMP
- Cache en analytics voor offline interacties inbegrepen
Nadelen
- Setup is iets complexer vanwege AMP integratie
3. PWA
De PWA plugin is gericht op essentiële elementen van PWA, zoals service workers, web app manifest en HTTPS ondersteuning. PWA is gericht op snellere laadtijden en het bieden van een app-achtige ervaring op mobiel.
Voordelen
- Omdat het de bedoeling is dat deze plugin uiteindelijk deel gaat uitmaken van de WordPress core, kun je hoogwaardige codering en compatibiliteit verwachten.
- Het biedt een eenvoudige manier om PWA functies toe te passen, waardoor de betrouwbaarheid, snelheid en betrokkenheid van je website toenemen.
Nadelen
- Geavanceerde functies worden niet gedekt door de plugin en vereisen aanvullende plugins of aangepaste ontwikkeling om te bereiken.
4. Instantify
Instantify onderscheidt zich door drie belangrijke functies te combineren in één platform: Progressive Web Apps (PWA), Google’s Accelerated Mobile Pages (AMP) en Facebook Instant Articles (FBIA). Met deze combinatie transformeert de tool je website om deze een app-achtig gevoel te geven, versnelt het de laadtijden van mobiele webpagina’s en stelt het de inhoud van je website open voor sociale platforms.
Voordelen
- Door PWA, AMP en FBIA te combineren, hoef je je geen zorgen te maken over verschillende plugins.
- AMP pagina’s krijgen de voorkeur bij zoekopdrachten, dus dit kan de prestaties van je website in zoekmachines verbeteren in termen van zichtbaarheid.
- Betrek gebruikers met pushmeldingen en meer, en maak je content efficiënter te gelde via geoptimaliseerde advertenties en Facebook Instant Articles.
Nadelen
- Er is geen gratis proefversie, wat gebruikers kan afschrikken die de plugin willen testen voordat ze ervoor betalen.
- De uitgebreide functies kunnen ertoe leiden dat deze plugin niet goed werkt met sommige thema’s als hij niet goed is ingesteld.
Prijzen
Instantify kost $29, een eenmalig bedrag voor een levenslange licentie. Dit is inclusief zes maanden ondersteuning, die kan worden verlengd voor $ 21 extra. Het product wordt niet geleverd met een gratis proefversie of geld-terug garantie, dus het is misschien het beste om je huidige behoeften en compatibiliteitseisen goed te overwegen voordat je tot aanschaf overgaat.
Zo bouw je een PWA met een WordPress plugin: stap voor stap
Het bouwen van een PWA met WordPress is een spannende manier om de mobiele ervaring van je website te verbeteren en deze sneller, betrouwbaarder en aantrekkelijker te maken. Zoals we al hebben besproken, maken PWA’s gebruik van moderne webmogelijkheden om gebruikers direct vanuit hun browser een app-achtige ervaring te bieden.
Hier volgt een stap-voor-stap mini-gids over hoe je je WordPress site kunt omvormen tot een PWA met behulp van een van de plugins die we hebben besproken.
Stap 1: Plan je PWA
Voordat je in de technische aspecten duikt, moet je de functies en doelen van je PWA plannen. Bedenk welke delen van je site baat zouden kunnen hebben bij offline toegang, welke acties gebruikers moeten kunnen uitvoeren zonder netwerkverbinding en hoe je wilt dat je PWA eruit ziet op het beginscherm. Planning helpt ervoor te zorgen dat je PWA de gebruikerservaring op zinvolle manieren verbetert.
Stap 2: Kies de juiste plugin
Zoals we hebben besproken, zijn er verschillende plugins beschikbaar om van je WordPress site een PWA te maken.
Beoordeel elke plugin op basis van je specifieke behoeften. Als je op zoek bent naar een eenvoudige, rechttoe rechtaan oplossing, dan biedt Super Progressive Web Apps een gemakkelijke installatie. Voor wie integratie met meerdere tools nodig heeft, is Instantify misschien een betere optie.
Voor ons voorbeeld van vandaag gebruiken we Super Progressive Web Apps.
Stap 3: Installeer de gekozen plugin
Als je eenmaal een plugin hebt gekozen, installeer deze dan op je WordPress site. Je kunt dit doen door naar je WordPress dashboard te gaan, te navigeren naar Plugins > Add new, de plugin op naam te zoeken en te klikken op Install now. Klik na de installatie op Activate.
Stap 4: Configureer de instellingen
Na activering vind je de instellingen van de plugin onder het Settings menu in je WordPress dashboard.
Hier kun je verschillende aspecten van je PWA configureren, zoals:
-
- Application name. De naam van je PWA zoals die op het beginscherm zal verschijnen.
- Description. Een korte beschrijving van je app.
- Homepage. De pagina die je PWA als eerste zal laden.
- Themakleur. De kleur van de werkbalk.
- Achtergrondkleur. De achtergrondkleur van het splash-scherm.
- Pictogram. Selecteer een afbeelding voor het pictogram van je PWA.
Klik op Save settings als je klaar bent met aanpassen.
Stap 5: Test je nieuwe PWA
Zodra je de instellingen hebt geconfigureerd, is het cruciaal om je PWA te testen op verschillende apparaten. Gebruik Chrome DevTools of vergelijkbare tools om verschillende apparaten te simuleren of test direct op je mobiele apparaat door je site toe te voegen aan het startscherm.
Als je bijvoorbeeld een iOS-apparaat gebruikt, moet je de cache van je mobiele browser wissen voordat je je website bezoekt.
Klik op de knop Share en vervolgens op Options. Klik op Add to home screen. Sluit je browser en klik op het app-icoon dat zojuist is toegevoegd aan je startscherm. Blader door een paar pagina’s op de website, verbreek de verbinding met internet en probeer diezelfde pagina’s opnieuw te openen.
Als ze laden, is je PWA klaar!
Een PWA bouwen met WordPress vanaf niks
Voor wie meer controle en maatwerk wil, is het handmatig omzetten van je WordPress site in een PWA misschien wel de beste route.
Deze methode is technischer en vereist een goed begrip van webontwikkelingsprincipes, dus zorg ervoor dat je de eerder genoemde vereisten doorneemt om te controleren of je in staat bent om dit te voltooien.
Stap 1: Zorg dat je HTTPS hebt
Het beveiligen van je site met HTTPS is onmisbaar voor PWA’s. HTTPS versleutelt gegevens tussen je website en zijn bezoekers en beschermt zo tegen datalekken en dergelijke.
Je kunt een gratis SSL certificaat krijgen van Let’s Encrypt als dat nog niet bij je hostingpakket zit.
Het installatieproces verschilt per hostingprovider. Veel hostingproviders bieden eenvoudige SSL installatiemogelijkheden met één klik. Raadpleeg de ondersteuningsdocumentatie van je hostingprovider voor specifieke instructies.
Zorg er na de installatie van je SSL certificaat voor dat al het websiteverkeer HTTPS gebruikt door HTTP om te leiden naar HTTPS. Dit kun je doen met een WordPress plugin zoals Really Simple SSL of door het .htaccess bestand van je site aan te passen als je het prettig vindt om handmatig wijzigingen aan te brengen.
2. Een web app manifest maken
Het web app manifest is een JSON bestand dat bepaalt hoe je PWA eruit ziet voor gebruikers en hoe het opstart. Het bevat onder andere de naam, pictogrammen en start URL van je app.
Om te beginnen maak je een JSON bestand aan met de naam manifest.json. Dit bestand moet belangrijke informatie over je app bevatten, zoals de naam (name), korte naam (short_name), start URL (start_url), weergavetype (display), achtergrondkleur (background_color), themakleur (theme_color) en pictogrammen (icons).
Hier is hoe de code er ongeveer uit zou moeten zien, volgens MDN Web Docs.
{
"name": "Your App Name",
"short_name": "AppShortName",
"start_url": "/",
"display": "standalone",
"background_color": "#FFFFFF",
"theme_color": "#000000",
"icons": [
{
"src": "path/to/icon.png",
"sizes": "192x192",
"type": "image/png"
}
]
}Voeg een link naar het manifest.json bestand toe in de sectie head van het sjabloon van je WordPress site.
Gebruik vervolgens tools zoals Google’s Lighthouse om je web app manifest implementatie te testen en te valideren.
3. Een service worker implementeren
Service workers fungeren als een proxy tussen je web app en de buitenwereld. Ze zijn essentieel voor offline functionaliteit, pushmeldingen en resource caching.
Om er een te maken, moet je een nieuw JavaScript -bestand maken. Noem het service-worker.js en plaats het in de hoofdmap van je WordPress thema. Dit bestand bevat de logica voor het cachen van bronnen, het onderscheppen van netwerkverzoeken en het beheren van offline mogelijkheden.
Je moet je service worker registreren vanuit het JavaScript van je web app. Meestal wordt dit gedaan in een hoofd JavaScript bestand dat op je webpagina draait.
Hier is een voorbeeld van hoe je een service worker van Borstch registreert:
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
});
}Implementeer in je service-worker.js bestand de logica voor het cachen van statische assets, het onderscheppen van fetch requests en het serveren van content uit de cache wanneer je offline bent.
Hier is een basisvoorbeeld voor het cachen van wat assets:
const CACHE_NAME = 'your-app-cache';
const urlsToCache = [
'/',
'/styles/main.css',
'/script/main.js'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => {
return cache.addAll(urlsToCache);
})
);
});Testen is een must om ervoor te zorgen dat je service worker zich gedraagt zoals verwacht. Gebruik het Application paneel in Chrome DevTools om geregistreerde service workers, in de cache geplaatste assets en meer te inspecteren.
Een WordPress PWA optimaliseren
Het optimaliseren van je WordPress PWA is het laatste wat je moet doen om snelheid, betrouwbaarheid en functionaliteit te garanderen. Laten we eens duiken in een aantal geavanceerde optimalisatietechnieken, waarbij we ons richten op cachingstrategieën, resourceprioritering en adaptief laden voor verschillende verbindingssnelheden.
Cachingstrategieën
Caching is volgens Smashing Magazine een belangrijk element van PWA optimalisatie. Het zorgt ervoor dat je app sneller laadt door kopieën van bronnen op te slaan. Het implementeren van een cache-first strategie zorgt ervoor dat je app bronnen uit de cache haalt voordat je het netwerk probeert. Deze aanpak is vooral effectief voor statische bronnen die niet vaak veranderen.
Gebruik service workers om belangrijke bronnen in de cache te plaatsen tijdens de installatiefase. Dit omvat de schil van je app (HTML, CSS, JavaScript) en alle statische bronnen.
Overweeg voor dynamische inhoud strategieën zoals stale-while-revalidate, waarbij inhoud uit de cache eerst wordt geveleverd en de cache vervolgens wordt bijgewerkt met verse inhoud van de server.
Hulpbronnen prioriteren
Niet alle bronnen zijn hetzelfde. Sommige zijn kritisch voor de eerste rendering, terwijl andere kunnen worden gerenderd via lazyloading. Analyseer de laadprestaties van je app om te bepalen welke resources essentieel zijn en als eerste moeten worden geladen. Je kunt de preload en prefetch directives gebruiken om de browser te informeren over deze prioriteiten:
- Preload. Gebruik dit voor bronnen die nodig zijn op de huidige pagina. Het vertelt de browser om deze bronnen vroeg in het laadproces op te halen.
- Prefetch. Dit is voor bronnen die nodig kunnen zijn in toekomstige navigaties. Het stelt de browser voor om deze bronnen op te halen als hij inactief is.
Adaptief laden
Adaptief laden past de inhoud en functies van je app aan op basis van de mogelijkheden van het apparaat van de gebruiker en de netwerkomstandigheden. Deze techniek zorgt ervoor dat je PWA een goede ervaring biedt, zelfs op langzame of instabiele netwerken.
Implementeer kenmerkdetectie om verschillende bronnen te leveren op basis van het apparaat van de gebruiker. Je kunt bijvoorbeeld afbeeldingen met een hoge resolutie serveren aan gebruikers met een snelle verbinding en kleinere, gecomprimeerde afbeeldingen aan gebruikers met een langzamere verbinding.
Je zou de Network Information API kunnen gebruiken om de verbindingssnelheid van de gebruiker te detecteren en het gedrag van je app daarop aan te passen. Je kunt er bijvoorbeeld voor kiezen om bij een langzame verbinding alleen essentiële inhoud te laden en niet-kritieke resources uit te stellen tot de verbinding beter wordt.
Houd je aan de standaarden van Google
Je WordPress site omvormen tot een PWA is een slimme zet om de mobiele gebruikerservaring te verbeteren. Maar je moet je wel houden aan de PWA-standaarden van Google om dit effectief te laten zijn.
De PWA standaarden van Google leggen de nadruk op beveiliging, gebruikerservaring en toegankelijkheid:
- Sites moeten HTTPS gebruiken en responsief zijn op mobiele apparaten
- Offline toegang tot URL’s van apps toestaan en metadata bevatten voor de functie Toevoegen aan beginscherm.
- Ze moeten snel laden, functioneren in verschillende browsers en zorgen voor soepele pagina-overgangen zonder netwerkafhankelijkheid.
- Alle pagina’s moeten unieke URL’s hebben.
Samenvatting
Progressive web apps betekenen een grote sprong voorwaarts in het verbeteren van de betrokkenheid en toegankelijkheid van gebruikers op het web. Door de mogelijkheden van traditionele websites te integreren met de geavanceerde functies van mobiele applicaties, bieden PWA’s een naadloze, app-achtige ervaring zonder de noodzaak voor app store downloads.
Met dit in gedachten hebben we hier vandaag het transformerende potentieel van PWA’s voor WordPress sites onderzocht, de voordelen ervan belicht en richtlijnen gegeven voor het maken van je eigen PWA’s met behulp van WordPress plugins of door middel van handmatige codering. We hopen dat je het nuttig hebt gevonden.
Als je dat nog niet hebt gedaan, ga je dan binnenkort van je WordPress site een PWA maken?
Hi Jeremy,
Thanks for your article. Het is wel wat technisch voor mij, maar ik denk met wat geduld en oefenen kom ik er wel uit. Ik keek naar Instantify en deze lijkt mij prima geschikt voor mijn client die veel bezoekers op haar website heeft, die nu niet regelmatig terugkeren. Ik denk dat ik dit met PWA kan veranderen. Alleen het lijkt alsof Instantify niet meer geupdate wordt. De laatste aanpassingen zijn van begin 2023, dus ruim een jaar geleden.
En ik vroeg mij af: Heb je enig idee of het compatible is met Oxygen Builder. Mijn hele site is daarmee gebouwd.
Groeten en dank alvast voor een reactie.