PWA Einrichten

Diese folgenden Schritte, sollte man beachten, wenn man die Applikation als PWA Konfigurieren will.

Hier eine allgemeine Einführung zu PWA - https://web.dev/progressive-web-apps/

Schritt 1: im Client unter dem /public Verzeichnis zwei Dateien erstellen

1. manifest.json

   • Die manifest.json nach dem folgenden Muster aufbauen: https://developer.chrome.com/docs/extensions/mv3/manifest/

2. service-worker.js

   • Die service-worker.js Datei mit folgenden Inhalt:

self.addEventListener('activate', (event) => {  event.waitUntil(handleActivate());});

async function handleActivate() {  await self.clients.claim();}

self.addEventListener('fetch', () => {  // We have to register a 'fetch' event handler to be a valid PWA});

Schritt 2: Manifest und Service Worker in den index.html einbinden.

<link rel="manifest" href="/manifest.json">

 <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker
        .register('/service-worker.js', { scope: '/' })
        .then(function (registration) {
          console.debug('Service Worker Registered');
        });
      navigator.serviceWorker.ready
        .then(function (registration) {
          console.debug('Service Worker Ready');
        });
    }
  </script>

Schritt 3: PWA Icons generieren in verschiedenen Grössen

Auf die Icons wird über das manifest.json zugegriffen:

"icons": [
  {
    "src": "images/icons/icon-72x72.png",
    "sizes": "72x72",
    "type": "image/png"
  },
]

Bildformate: PNG, SVG, ICO, JPG/JPEG.

• 192x192 Pixel

• 512x512 Pixel

• 180x180 Pixel

• 167x167 Pixel

• 152x152 Pixel

• 120x120 Pixel

• 114x114 Pixel

• 96x96 Pixel

• 72x72 Pixel

• 48x48 Pixel

• 32x32 Pixel

Schritt 4: PWA in dem Browser Testen.

Sofern die Einstellung und die oben genannten Schritte erfüllt sind, kann man die PWA z.B. mit Chrome testen.

1. Browser DevTools öffnen.

2. Tab Lighthouse auswählen.

3. Lighthouse → Kategorien → Progressive Web-App und auf Seitenaufbau analysieren.

4. Sollte alles in Ordnung mit den Einstellungen sein: