From 1f6ebf18a3121474014b09d2d97c22832ec9f39a Mon Sep 17 00:00:00 2001
From: angel <sillyangel3@gmail.com>
Date: Mon, 11 Aug 2025 12:35:50 +0000
Subject: [PATCH] feat: Move service worker registration to a dedicated
 component for improved client-side handling

---
 app/components/RootLayoutClient.tsx | 31 +++++++++++++++++------------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/app/components/RootLayoutClient.tsx b/app/components/RootLayoutClient.tsx
index 6f1983e..7444607 100644
--- a/app/components/RootLayoutClient.tsx
+++ b/app/components/RootLayoutClient.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { useEffect } from "react";
 import { AudioPlayerProvider } from "../components/AudioPlayerContext";
 import { OfflineNavidromeProvider, useOfflineNavidrome } from "../components/OfflineNavidromeProvider";
 import { NavidromeConfigProvider } from "../components/NavidromeConfigContext";
@@ -15,18 +15,22 @@ import { LoginForm } from "./start-screen";
 import Image from "next/image";
 import PageTransition from "./PageTransition";
 
-// Service Worker registration - moved to useEffect to ensure it only runs client-side
-React.useEffect(() => {
-  if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.register('/sw.js')
-      .then((registration) => {
-        console.log('Service Worker registered successfully:', registration);
-      })
-      .catch((error) => {
-        console.error('Service Worker registration failed:', error);
-      });
-  }
-}, []);
+// ServiceWorkerRegistration component to handle registration
+function ServiceWorkerRegistration() {
+  useEffect(() => {
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.register('/sw.js')
+        .then((registration) => {
+          console.log('Service Worker registered successfully:', registration);
+        })
+        .catch((error) => {
+          console.error('Service Worker registration failed:', error);
+        });
+    }
+  }, []);
+  
+  return null;
+}
 
 function NavidromeErrorBoundary({ children }: { children: React.ReactNode }) {
   // For now, since we're switching to offline-first, we'll handle errors differently
@@ -100,6 +104,7 @@ export default function RootLayoutClient({ children }: { children: React.ReactNo
       <ThemeProvider>
         <DynamicViewportTheme />
         <ThemeColorHandler />
+        <ServiceWorkerRegistration />
         <NavidromeConfigProvider>
           <OfflineNavidromeProvider>
             <NavidromeErrorBoundary>