...
| 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:
...
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.
...