diff --git a/internal/template/templates/common/layout.html b/internal/template/templates/common/layout.html
index 0a4dc1f6..f0eff8a7 100644
--- a/internal/template/templates/common/layout.html
+++ b/internal/template/templates/common/layout.html
@@ -49,9 +49,9 @@
     {{ end }}
 
     <script src="{{ route "javascript" "name" "app" "checksum" .app_js_checksum }}" type="module"></script>
-    <script src="{{ route "javascript" "name" "service-worker" "checksum" .sw_js_checksum }}" defer id="service-worker-script"></script>
 </head>
 <body
+    data-service-worker-url="{{ route "javascript" "name" "service-worker" "checksum" .sw_js_checksum }}"
     {{ if .csrf }}data-csrf-token="{{ .csrf }}"{{ end }}
     data-add-subscription-url="{{ route "addSubscription" }}"
     data-entries-status-url="{{ route "updateEntriesStatus" }}"
diff --git a/internal/ui/static/js/bootstrap.js b/internal/ui/static/js/bootstrap.js
index b7366a5d..8c6d69c5 100644
--- a/internal/ui/static/js/bootstrap.js
+++ b/internal/ui/static/js/bootstrap.js
@@ -125,10 +125,15 @@ if (logoElement) {
 
 onClick(".header nav li", (event) => onClickMainMenuListItem(event));
 
+// Register the service worker if supported.
 if ("serviceWorker" in navigator) {
-    const scriptElement = document.getElementById("service-worker-script");
-    if (scriptElement) {
-        navigator.serviceWorker.register(ttpolicy.createScriptURL(scriptElement.src));
+    const serviceWorkerURL = document.body.dataset.serviceWorkerUrl;
+    if (serviceWorkerURL) {
+        navigator.serviceWorker.register(ttpolicy.createScriptURL(serviceWorkerURL), {
+            type: "module"
+        }).catch((error) => {
+            console.error("Service Worker registration failed:", error);
+        });
     }
 }
 
