fixed serviceworker with workbox

package.json

@@ -57,6 +57,8 @@
     "webpack-dev-server": "^3.11.0",
     "webpack-merge": "^4.2.2",
     "webpack-stream": "^6.1.0",
+    "workbox-core": "^5.1.4",
+    "workbox-webpack-plugin": "^5.1.4",
     "worker-plugin": "^5.0.0"
   },
   "dependencies": {

src/components/serviceworker/notifications.js

@@ -1,45 +0,0 @@
-/* eslint-env serviceworker */
-(function () {
-    'use strict';
-
-    let connectionManager;
-
-    function getApiClient(serverId) {
-        if (connectionManager) {
-            return Promise.resolve(connectionManager.getApiClient(serverId));
-        }
-        return Promise.reject();
-    }
-
-    function executeAction(action, data, serverId) {
-        return getApiClient(serverId).then(function (apiClient) {
-            switch (action) {
-                case 'cancel-install':
-                    return apiClient.cancelPackageInstallation(data.id);
-                case 'restart':
-                    return apiClient.restartServer();
-                default:
-                    clients.openWindow('/');
-                    return Promise.resolve();
-            }
-        });
-    }
-
-    /* eslint-disable-next-line no-restricted-globals -- self is valid in a serviceworker environment */
-    self.addEventListener('notificationclick', function (event) {
-        const notification = event.notification;
-        notification.close();
-
-        const data = notification.data;
-        const serverId = data.serverId;
-        const action = event.action;
-
-        if (!action) {
-            clients.openWindow('/');
-            event.waitUntil(Promise.resolve());
-            return;
-        }
-
-        event.waitUntil(executeAction(action, data, serverId));
-    }, false);
-})();

src/scripts/site.js

@@ -225,7 +225,11 @@ function registerServiceWorker() {
     /* eslint-disable compat/compat */
     if (navigator.serviceWorker && window.appMode !== 'cordova' && window.appMode !== 'android') {
         try {
-            navigator.serviceWorker.register('serviceworker.js');
+            navigator.serviceWorker.register('/serviceworker.js').then(() =>
+                console.log('serviceWorker registered')
+            ).catch(error =>
+                console.log('error registering serviceWorker: ' + error)
+            );
         } catch (err) {
             console.error('error registering serviceWorker: ' + err);
         }

src/serviceworker.js

@@ -1,2 +1,48 @@
 /* eslint-env serviceworker */
-importScripts('components/serviceworker/notifications.js');
+
+/* eslint-disable-next-line import/namespace,import/named */
+import { skipWaiting, clientsClaim } from 'workbox-core';
+
+skipWaiting();
+clientsClaim();
+
+function getApiClient(serverId) {
+    return Promise.resolve(window.connectionManager.getApiClient(serverId));
+}
+
+function executeAction(action, data, serverId) {
+    return getApiClient(serverId).then(function (apiClient) {
+        switch (action) {
+            case 'cancel-install':
+                return apiClient.cancelPackageInstallation(data.id);
+            case 'restart':
+                return apiClient.restartServer();
+            default:
+                clients.openWindow('/');
+                return Promise.resolve();
+        }
+    });
+}
+
+/* eslint-disable-next-line no-restricted-globals -- self is valid in a serviceworker environment */
+self.addEventListener('notificationclick', function (event) {
+    const notification = event.notification;
+    notification.close();
+
+    const data = notification.data;
+    const serverId = data.serverId;
+    const action = event.action;
+
+    if (!action) {
+        clients.openWindow('/');
+        event.waitUntil(Promise.resolve());
+        return;
+    }
+
+    event.waitUntil(executeAction(action, data, serverId));
+}, false);
+
+// this is needed by the webpack Workbox plugin
+// this plugin is not fully supported in webpack v5. pecaching is disabled until version 6 of this plugin is released
+/* eslint-disable-next-line no-restricted-globals,no-undef */
+//workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);

webpack.common.js

@@ -2,6 +2,7 @@ const path = require('path');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
 const packageConfig = require('./package.json');
+const WorkboxPlugin = require('workbox-webpack-plugin');
 
 module.exports = {
     context: path.resolve(__dirname, 'src'),
@@ -32,6 +33,10 @@ module.exports = {
                     }
                 }
             ]
+        }),
+        new WorkboxPlugin.InjectManifest({
+            swSrc: path.resolve(__dirname, 'src/serviceworker.js'),
+            swDest: 'serviceworker.js'
         })
     ],
     output: {