fix: support service worker toggle in prod and dev

src/components/settings/CacheSettings.tsx

@@ -285,7 +285,7 @@ export function CacheSettings() {
     try {
       const success = await setDevModeEnabled(checked);
       if (!success) {
-        throw new Error("Failed to toggle service worker in development");
+        throw new Error("Failed to toggle service worker");
       }
       toast({
         title: t("settings.title"),

src/contexts/ServiceWorkerContext.tsx

@@ -55,7 +55,7 @@ const ServiceWorkerContext = createContext<ServiceWorkerContextValue | null>(nul
 export function ServiceWorkerProvider({ children }: { children: ReactNode }) {
   const [isSupported, setIsSupported] = useState(false);
   const [isReady, setIsReady] = useState(false);
-  const [isDevModeEnabled, setIsDevModeEnabled] = useState(process.env.NODE_ENV !== "development");
+  const [isDevModeEnabled, setIsDevModeEnabled] = useState(() => isServiceWorkerEnabledInDev());
   const [version, setVersion] = useState<string | null>(null);
   const [hasNewVersion, setHasNewVersion] = useState(false);
   const [cacheUpdates, setCacheUpdates] = useState<CacheUpdate[]>([]);
@@ -185,9 +185,9 @@ export function ServiceWorkerProvider({ children }: { children: ReactNode }) {
       return;
     }
 
-    if (process.env.NODE_ENV === "development" && !isServiceWorkerEnabledInDev()) {
+    if (!isServiceWorkerEnabledInDev()) {
       setIsDevModeEnabled(false);
-      // Browser still supports SW, it is only disabled by preference in dev
+      // Browser still supports SW, it is only disabled by preference
       setIsSupported(true);
       setIsReady(false);
       setVersion(null);
@@ -199,9 +199,7 @@ export function ServiceWorkerProvider({ children }: { children: ReactNode }) {
       return;
     }
 
-    if (process.env.NODE_ENV === "development") {
+    setIsDevModeEnabled(true);
-      setIsDevModeEnabled(true);
-    }
 
     setIsSupported(true);
 
@@ -368,10 +366,6 @@ export function ServiceWorkerProvider({ children }: { children: ReactNode }) {
   }, []);
 
   const setDevModeEnabled = useCallback(async (enabled: boolean): Promise<boolean> => {
-    if (process.env.NODE_ENV !== "development") {
-      return true;
-    }
-
     try {
       setServiceWorkerEnabledInDev(enabled);
       setIsDevModeEnabled(enabled);
@@ -387,7 +381,7 @@ export function ServiceWorkerProvider({ children }: { children: ReactNode }) {
       window.location.reload();
       return true;
     } catch (error) {
-      logger.error({ err: error }, "Failed to toggle service worker in development");
+      logger.error({ err: error }, "Failed to toggle service worker");
       return false;
     }
   }, []);

src/i18n/messages/en/common.json

@@ -163,10 +163,10 @@
       "reinstall": "Reinstall Service Worker",
       "reinstallError": "Error reinstalling Service Worker",
       "devServiceWorker": {
-        "label": "Service Worker in development",
+        "label": "Service Worker",
-        "description": "Enable Service Worker in dev mode to test cache/offline behavior. A reload is applied.",
+        "description": "Enable or disable the Service Worker. Defaults: disabled in dev, enabled in prod. A reload is applied.",
-        "saved": "Dev Service Worker preference updated",
+        "saved": "Service Worker preference updated",
-        "error": "Failed to update dev Service Worker preference"
+        "error": "Failed to update Service Worker preference"
       },
       "entry": "entry",
       "entries": "entries",

src/i18n/messages/fr/common.json

@@ -163,10 +163,10 @@
       "reinstall": "Réinstaller le Service Worker",
       "reinstallError": "Erreur lors de la réinstallation du Service Worker",
       "devServiceWorker": {
-        "label": "Service Worker en développement",
+        "label": "Service Worker",
-        "description": "Active le Service Worker en mode dev pour tester le cache/hors-ligne. Un rechargement est appliqué.",
+        "description": "Active ou désactive le Service Worker. Par défaut : désactivé en dev, activé en prod. Un rechargement est appliqué.",
-        "saved": "Préférence Service Worker dev mise à jour",
+        "saved": "Préférence Service Worker mise à jour",
-        "error": "Impossible de mettre à jour la préférence Service Worker dev"
+        "error": "Impossible de mettre à jour la préférence Service Worker"
       },
       "entry": "entrée",
       "entries": "entrées",

src/lib/registerSW.ts

@@ -6,17 +6,27 @@ interface ServiceWorkerRegistrationOptions {
   onError?: (error: Error) => void;
 }
 
-const DEV_SW_ENABLED_STORAGE_KEY = "stripstream:sw-dev-enabled";
+const SW_ENABLED_STORAGE_KEY = "stripstream:sw-enabled";
+const LEGACY_DEV_SW_ENABLED_STORAGE_KEY = "stripstream:sw-dev-enabled";
 
 export const isServiceWorkerEnabledInDev = (): boolean => {
   if (typeof window === "undefined") return false;
-  if (process.env.NODE_ENV !== "development") return true;
+
-  return window.localStorage.getItem(DEV_SW_ENABLED_STORAGE_KEY) === "true";
+  const storedValue = window.localStorage.getItem(SW_ENABLED_STORAGE_KEY);
+  if (storedValue === "true") return true;
+  if (storedValue === "false") return false;
+
+  const legacyValue = window.localStorage.getItem(LEGACY_DEV_SW_ENABLED_STORAGE_KEY);
+  if (legacyValue === "true") return true;
+  if (legacyValue === "false") return false;
+
+  return process.env.NODE_ENV !== "development";
 };
 
 export const setServiceWorkerEnabledInDev = (enabled: boolean): void => {
-  if (typeof window === "undefined" || process.env.NODE_ENV !== "development") return;
+  if (typeof window === "undefined") return;
-  window.localStorage.setItem(DEV_SW_ENABLED_STORAGE_KEY, enabled ? "true" : "false");
+  window.localStorage.setItem(SW_ENABLED_STORAGE_KEY, enabled ? "true" : "false");
+  window.localStorage.removeItem(LEGACY_DEV_SW_ENABLED_STORAGE_KEY);
 };
 
 /**