SEO Workshop: PWA

Progressive Web Apps zijn een combinatie van kenmerken van websites met kenmerken van apps. Ze bieden een uitstekende manier om de gebruikerservaring van een website te verbeteren en te zorgen voor een naadloze overgang tussen web en app.

Waarom zijn PWA’s zo populair?

• Installatie op het startscherm: Gebruikers kunnen een PWA eenvoudig toevoegen aan hun startscherm, waardoor het lijkt op een native app.
• Combinatie van het beste van beide werelden: PWA’s bieden de snelheid en betrouwbaarheid van een native app, gecombineerd met de toegankelijkheid en vindbaarheid van een website.
• Offline functionaliteit: Veel PWA’s kunnen offline werken, waardoor gebruikers de app kunnen gebruiken, zelfs als ze geen internetverbinding hebben.
• Pushnotificaties: Net als een native app kunnen PWA’s pushnotificaties sturen om gebruikers op de hoogte te houden van nieuwe content of aanbiedingen.
• Snelle laadtijden: PWA’s zijn vaak sneller dan traditionele websites, wat leidt tot een betere gebruikerservaring.

Een voorbeeld hiervan is de website van Pinterest

Installatie

Als je een website als PWA opzet dan kan je deze installeren als app via een + knop in de adresbalk.

De website wordt dan als “app” geinstalleerd op je bureaublad of homescreen en kan als app geopend worden (geen adresbalk, niet in de browser maar via een apart icoontje).

Enkele linkjes om eens te bekijken:

Mogelijk met webapps: https://whatwebcando.today/

Voordelen ondervonden: case studies: https://developers.google.com/web/showcase/

Lees meer: https://web.dev/progressive-web-apps/

Wat heb je nodig?

1. Manifest.json

Elke PWA vereist een manifest.json bestand. Hierlangs weet de PWA hoe de app eruit moet zien, de naam, start URL, icoontjes, …

Je kan dit bestand genereren via online tools, zoals: https://progressier.com/pwa-manifest-generator of https://app-manifest.firebaseapp.com/

Het manifest.json file wordt in de root directory van je website geplaatst.

Let wel op: je kan enkel een PWA installeren met een https verbinding.

2. Service Worker

De SW is javascript code die we toevoegen om een PWA op te zetten. Deze laat toe dat we de webapp “offline” gebruiken, push notifications opzetten en alternatieve caching strategieën uitbouwen die op de achtergrond los van de webpagina uitgevoerd worden. Zo kunnen we bepaalde bestanden inladen bij het eerste bezoek om in het cache geheugen voor offline gebruik beschikbaar te zijn zonder dat de gebruiker merkt dat deze “offline” is.

Voor diegenen die met WordPress werken, je kan plugins gebruiken om een PWA van je website te maken.

Voor de mensen die hier interesse in hebben, dit is een goede site met een voorbeeld: https://www.freecodecamp.org/news/build-a-pwa-from-scratch-with-html-css-and-javascript/