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
manifest.jsonDie
manifest.jsonnach dem folgenden Muster aufbauen: https://developer.chrome.com/docs/extensions/mv3/manifest/
service-worker.jsDie
service-worker.jsDatei 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.
Browser DevTools öffnen.
Tab Lighthouse auswählen.
Lighthouse → Kategorien → Progressive Web-App und auf Seitenaufbau analysieren.
Sollte alles in Ordnung mit den Einstellungen sein:
