diff --git a/package.json b/package.json
index 33a2b20e58..6c8c698c80 100644
--- a/package.json
+++ b/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": {
diff --git a/src/components/serviceworker/notifications.js b/src/components/serviceworker/notifications.js
deleted file mode 100644
index 51623b56f7..0000000000
--- a/src/components/serviceworker/notifications.js
+++ /dev/null
@@ -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);
-})();
diff --git a/src/scripts/site.js b/src/scripts/site.js
index d4b4dab527..4df280bbae 100644
--- a/src/scripts/site.js
+++ b/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);
         }
diff --git a/src/serviceworker.js b/src/serviceworker.js
index 2210183148..49ae921b70 100644
--- a/src/serviceworker.js
+++ b/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);
diff --git a/webpack.common.js b/webpack.common.js
index db163219cd..c9263fa842 100644
--- a/webpack.common.js
+++ b/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: {
diff --git a/yarn.lock b/yarn.lock
index f07c654bad..9dab54e756 100644
Binary files a/yarn.lock and b/yarn.lock differ