PWA Einrichten

Owned by Sebastian Greulach
Last updated: Jun 07, 2023 by Remo von Ballmoos
2 min read

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

Hier eine allgemeine Einführung zu PWA - Progressive Web Apps  |  web.dev

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

  1. manifest.json

  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

Über die URL PWABuilder können aus einem einzelnen Bild (SVG,PNG…) die einzelnen (verkleinerten) Bilder generiert werden. Das muss also nicht manuell gemacht werden.

Falls die im Manifest referenzierten Bilder nicht verfügbar sind, dann wir (mindestens in Chrome) das PWA Feature nicht aktiviert.

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: