Wat is een PWA (Progressive Web Application)?

PWA is een webapplicatie die eruitziet en zich gedraagt als een native mobiele applicatie, maar werkt in de browser.

Belangrijkste kenmerken van PWA:

• Betrouwbaarheid: Werkt offline dankzij Service Workers.
• Prestaties: Laadt snel en reageert op gebruikersacties.
• Installeerbaarheid: Gebruikers kunnen PWA toevoegen aan het startscherm van hun apparaat.
• Vindbaarheid: Wordt geïndexeerd door zoekmachines.
• Aantrekkelijkheid: Kan pushmeldingen versturen.
• Responsiviteit: Past zich aan elke schermgrootte aan.
• Veiligheid: Werkt alleen op HTTPS.

Technologieën gebruikt in PWA:

• Service Workers: Proxy tussen browser en netwerk, maakt caching mogelijk en offline werken.

  // Voorbeeld van installatie van Service Worker
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('/service-worker.js')
        .then(registration => {
          console.log('Service Worker geregistreerd met scope:', registration.scope);
        })
        .catch(error => {
          console.log('Fout bij registratie Service Worker:', error);
        });
    });
  }
  

• Web App Manifest: JSON-bestand met informatie over de app (naam, iconen, schermoriëntatie, etc.).

  {
    "short_name": "My PWA",
    "name": "Mijn Voorbeeld PWA",
    "icons": [
      {
        "src": "/images/icon-192x192.png",
        "type": "image/png",
        "sizes": "192x192"
      },
      {
        "src": "/images/icon-512x512.png",
        "type": "image/png",
        "sizes": "512x512"
      }
    ],
    "start_url": "/",
    "background_color": "#3367D6",
    "display": "standalone",
    "scope": "/",
    "theme_color": "#3367D6"
  }
  

• HTTPS: Zorgt voor een veilige verbinding.

Voordelen van PWA:

• Vereist geen installatie via app-winkels.
• Vraagt minder ruimte op het apparaat.
• Wordt gemakkelijker bijgewerkt.
• Is beschikbaar op alle platforms die browsers ondersteunen.

PWA-testen omvatten het controleren van:

• Functionaliteit in online en offline modi.
• Installatie en werking op het startscherm.
• Responsiviteit op verschillende apparaten.
• Pushmeldingen.
• Werking van Service Worker en caching.
• De manifest van de app.
• Prestaties.