Migration to injectManifest

server/manifest.webmanifest

@@ -0,0 +1,20 @@
+{
+    "name": "Allerta",
+    "short_name": "Allerta VVF",
+    "icons": [
+        {
+            "src": "/resources/images/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/resources/images/android-chrome-384x384.png",
+            "sizes": "384x384",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "start_url": "http://localhost:8080/",
+    "display": "standalone"
+}

server/resources/images/site.webmanifest

@@ -0,0 +1,20 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-384x384.png",
+            "sizes": "384x384",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "start_url": "http://localhost:8080/",
+    "display": "standalone"
+}

server/resources/src/main.js

@@ -52,10 +52,11 @@ $( document ).ready(function() {
 });
 if ('serviceWorker' in navigator) {
     window.addEventListener('load', () => {
-        navigator.serviceWorker.register('/resources/dist/sw.js').then(registration => {
-            console.log('SW registered: ', registration);
-        }).catch(registrationError => {
-            console.log('SW registration failed: ', registrationError);
-        });
+      navigator.serviceWorker.register('/resources/dist/sw.js').then(registration => {
+        console.log('SW registered: ', registration);
+        //registration.pushManager.subscribe({userVisibleOnly: true});
+      }).catch(registrationError => {
+        console.log('SW registration failed: ', registrationError);
+      });
     });
-}
+  }

server/resources/src/sw.js

@@ -0,0 +1,30 @@
+//import { CacheableResponsePlugin } from 'workbox-cacheable-response/CacheableResponsePlugin';
+import { CacheFirst } from 'workbox-strategies/CacheFirst';
+import { NetworkFirst } from 'workbox-strategies/NetworkFirst';
+//import { ExpirationPlugin } from 'workbox-expiration/ExpirationPlugin';
+//import { NavigationRoute } from 'workbox-routing/NavigationRoute';
+import { precacheAndRoute } from 'workbox-precaching/precacheAndRoute';
+import { registerRoute } from 'workbox-routing/registerRoute';
+
+precacheAndRoute(self.__WB_MANIFEST);
+
+registerRoute(
+  new RegExp('.*\.js'),
+  new NetworkFirst({
+    cacheName: 'js-cache',
+  })
+);
+
+registerRoute(
+  new RegExp('\.{svg,jpg,png,gif,ico}$'),
+  new CacheFirst({
+    cacheName: 'images-cache',
+  })
+);
+
+registerRoute(
+  new RegExp('\.{eot,ttf,woff,woff2}$'),
+  new CacheFirst({
+    cacheName: 'fonts-cache',
+  })
+);

server/resources/webpack.config.js

@@ -67,10 +67,18 @@ module.exports = {
         $: 'jquery',
         popper: 'popper.js'
     }),
-    new workboxPlugin.GenerateSW({
+    new workboxPlugin.InjectManifest({
+      swSrc: './src/sw.js',
       swDest: 'sw.js',
-      clientsClaim: true,
-      skipWaiting: true,
+      include: [
+        /\.html$/,
+        /\.js$/,
+        /\.css$/,
+        /\.woff2$/,
+        /\.jpg$/,
+        /\.png$/
+      ],
+      maximumFileSizeToCacheInBytes: 100 * 1024 * 1024
     })
   ],
   optimization: {

server/resources/workbox-config.js

@@ -1,8 +0,0 @@
-module.exports = {
-  "globDirectory": ".",
-  "globPatterns": [
-    "**/*.{eot,svg,ttf,woff,woff2,png,js,gif,ico,mp3}"
-  ],
-  "swDest": "sw.js",
-  "swSrc": ""
-};

server/templates/base.html

@@ -5,6 +5,7 @@
           <title>{{ title }} - ALLERTA sistema gestionale {{ owner }}</title>
           <link href="{{ urlsoftware }}/resources/images/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
           <meta name="viewport" content="user-scalable=no, initial-scale=1">
+          <link rel="manifest" href="/manifest.webmanifest">
           <style>
           body:not(table){
             max-width: 100%;