Page Comparison

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

...

1. • mit folgenden Inhalt

...

1. • :

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});

...

...

In Bloqs Sanbox ist ebenfalls das manifest vorhaneden, denn man Benutzerdefiniert konfigurieren kann.

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:

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 testen, ob sie installierbar ist oder nichtz.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 RemovedImage Added