From fdc9da7f8f8f6f8bcc6b0f5cce40047209064198 Mon Sep 17 00:00:00 2001 From: Julien Froidefond Date: Sun, 1 Mar 2026 21:41:33 +0100 Subject: [PATCH] fix: support service worker toggle in prod and dev --- src/components/settings/CacheSettings.tsx | 2 +- src/contexts/ServiceWorkerContext.tsx | 16 +++++----------- src/i18n/messages/en/common.json | 8 ++++---- src/i18n/messages/fr/common.json | 8 ++++---- src/lib/registerSW.ts | 20 +++++++++++++++----- 5 files changed, 29 insertions(+), 25 deletions(-) diff --git a/src/components/settings/CacheSettings.tsx b/src/components/settings/CacheSettings.tsx index 466bdba..8d1233e 100644 --- a/src/components/settings/CacheSettings.tsx +++ b/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"), diff --git a/src/contexts/ServiceWorkerContext.tsx b/src/contexts/ServiceWorkerContext.tsx index 0a9cf5f..fc8ba0b 100644 --- a/src/contexts/ServiceWorkerContext.tsx +++ b/src/contexts/ServiceWorkerContext.tsx @@ -55,7 +55,7 @@ const ServiceWorkerContext = createContext(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(null); const [hasNewVersion, setHasNewVersion] = useState(false); const [cacheUpdates, setCacheUpdates] = useState([]); @@ -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 => { - 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; } }, []); diff --git a/src/i18n/messages/en/common.json b/src/i18n/messages/en/common.json index 95c84b5..83139f1 100644 --- a/src/i18n/messages/en/common.json +++ b/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", - "description": "Enable Service Worker in dev mode to test cache/offline behavior. A reload is applied.", - "saved": "Dev Service Worker preference updated", - "error": "Failed to update dev Service Worker preference" + "label": "Service Worker", + "description": "Enable or disable the Service Worker. Defaults: disabled in dev, enabled in prod. A reload is applied.", + "saved": "Service Worker preference updated", + "error": "Failed to update Service Worker preference" }, "entry": "entry", "entries": "entries", diff --git a/src/i18n/messages/fr/common.json b/src/i18n/messages/fr/common.json index 16b6479..f144651 100644 --- a/src/i18n/messages/fr/common.json +++ b/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", - "description": "Active le Service Worker en mode dev pour tester le cache/hors-ligne. Un rechargement est appliqué.", - "saved": "Préférence Service Worker dev mise à jour", - "error": "Impossible de mettre à jour la préférence Service Worker dev" + "label": "Service Worker", + "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 mise à jour", + "error": "Impossible de mettre à jour la préférence Service Worker" }, "entry": "entrée", "entries": "entrées", diff --git a/src/lib/registerSW.ts b/src/lib/registerSW.ts index 1832883..335a902 100644 --- a/src/lib/registerSW.ts +++ b/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; - window.localStorage.setItem(DEV_SW_ENABLED_STORAGE_KEY, enabled ? "true" : "false"); + if (typeof window === "undefined") return; + window.localStorage.setItem(SW_ENABLED_STORAGE_KEY, enabled ? "true" : "false"); + window.localStorage.removeItem(LEGACY_DEV_SW_ENABLED_STORAGE_KEY); }; /**