Versions Compared

Old Version 2

changes.mady.by.user Sebastian Greulach

Saved on

compared with

New Version Current

changes.mady.by.user Remo von Ballmoos

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

muhamed (Unlicensed) Bitte hier die Docu zu PWA schreibenDiese 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

  2. service-worker.js

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

Code Block
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.

Code Block
<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:

Code Block
"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

Info

Über die URL https://www.pwabuilder.com/imageGenerator können aus einem einzelnen Bild (SVG,PNG…) die einzelnen (verkleinerten) Bilder generiert werden. Das muss also nicht manuell gemacht werden.

Note

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:

    Image Added