SEO Workshop: PWA

Progressive Web Apps zijn een combinatie van kenmerken van websites met kenmerken van apps.

Je krijgt voordelen van beide.

Voordelen Website	Voordelen App
Draait op alle toestellen	Offline beschikbaar (cache)
Kan als website werken	Kan als app werken (geen adresbalk, zeer snel, homescreen icoontje)
Geen app store of google play nodig om te installeren	Push notificaties, geo locating, …

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/

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://www.simicart.com/manifest-generator.html/

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.

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/