Diese folgenden Schritte, sollte man beachten, wenn man die Applikation als PWA Konfigurieren will.
Schritt 1: im Client unter dem /public Verzeichnis zwei Dateien erstellen:
manifest.json
service-worker.js
Die service-worker.js Datei soll den folgenden Inhalt haben: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});
Die manifest.json soll folgendes aussehen:
https://developer.chrome.com/docs/extensions/mv3/manifest/
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:"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 3: 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 nicht.
Browser DevTools öffnen.
Tab Lighthouse auswählen.
Lighthouse → Kategorien → Progressive Web-App und auf Seitenaufbau analysieren.
Sollte alles in Ordnung mit den Einstellungen sein:
