feat: enhance service worker functionality with improved caching strategies, client communication, and service worker registration options

src/components/layout/ClientLayout.tsx

@@ -7,9 +7,9 @@ import { Sidebar } from "@/components/layout/Sidebar";
 import { InstallPWA } from "../ui/InstallPWA";
 import { Toaster } from "@/components/ui/toaster";
 import { usePathname } from "next/navigation";
-import { registerServiceWorker } from "@/lib/registerSW";
 import { NetworkStatus } from "../ui/NetworkStatus";
 import { usePreferences } from "@/contexts/PreferencesContext";
+import { ServiceWorkerProvider } from "@/contexts/ServiceWorkerContext";
 import type { KomgaLibrary, KomgaSeries } from "@/types/komga";
 import logger from "@/lib/logger";
 
@@ -135,10 +135,6 @@ export default function ClientLayout({
     };
   }, [isSidebarOpen]);
 
-  useEffect(() => {
-    // Enregistrer le service worker
-    registerServiceWorker();
-  }, []);
 
   // Ne pas afficher le header et la sidebar sur les routes publiques et le reader
   const isPublicRoute = publicRoutes.includes(pathname) || pathname.startsWith("/books/");
@@ -151,37 +147,39 @@ export default function ClientLayout({
 
   return (
     <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-      {/* Background fixe pour les images et gradients */}
-      {hasCustomBackground && <div className="fixed inset-0 -z-10" style={backgroundStyle} />}
-      <div
-        className={`relative min-h-screen ${hasCustomBackground ? "" : "bg-background"}`}
-        style={
-          hasCustomBackground
-            ? { backgroundColor: `rgba(var(--background-rgb, 255, 255, 255), ${contentOpacity})` }
-            : undefined
-        }
-      >
-        {!isPublicRoute && (
-          <Header
-            onToggleSidebar={handleToggleSidebar}
-            onRefreshBackground={fetchRandomBook}
-            showRefreshBackground={preferences.background.type === "komga-random"}
-          />
-        )}
-        {!isPublicRoute && (
-          <Sidebar
-            isOpen={isSidebarOpen}
-            onClose={handleCloseSidebar}
-            initialLibraries={initialLibraries}
-            initialFavorites={initialFavorites}
-            userIsAdmin={userIsAdmin}
-          />
-        )}
-        <main className={!isPublicRoute ? "pt-safe" : ""}>{children}</main>
-        <InstallPWA />
-        <Toaster />
-        <NetworkStatus />
-      </div>
+      <ServiceWorkerProvider>
+        {/* Background fixe pour les images et gradients */}
+        {hasCustomBackground && <div className="fixed inset-0 -z-10" style={backgroundStyle} />}
+        <div
+          className={`relative min-h-screen ${hasCustomBackground ? "" : "bg-background"}`}
+          style={
+            hasCustomBackground
+              ? { backgroundColor: `rgba(var(--background-rgb, 255, 255, 255), ${contentOpacity})` }
+              : undefined
+          }
+        >
+          {!isPublicRoute && (
+            <Header
+              onToggleSidebar={handleToggleSidebar}
+              onRefreshBackground={fetchRandomBook}
+              showRefreshBackground={preferences.background.type === "komga-random"}
+            />
+          )}
+          {!isPublicRoute && (
+            <Sidebar
+              isOpen={isSidebarOpen}
+              onClose={handleCloseSidebar}
+              initialLibraries={initialLibraries}
+              initialFavorites={initialFavorites}
+              userIsAdmin={userIsAdmin}
+            />
+          )}
+          <main className={!isPublicRoute ? "pt-safe" : ""}>{children}</main>
+          <InstallPWA />
+          <Toaster />
+          <NetworkStatus />
+        </div>
+      </ServiceWorkerProvider>
     </ThemeProvider>
   );
 }

src/components/settings/CacheSettings.tsx

@@ -0,0 +1,393 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { useTranslate } from "@/hooks/useTranslate";
+import { useToast } from "@/components/ui/use-toast";
+import { useServiceWorker } from "@/contexts/ServiceWorkerContext";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Progress } from "@/components/ui/progress";
+import { Badge } from "@/components/ui/badge";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Database,
+  Trash2,
+  RefreshCw,
+  HardDrive,
+  Image,
+  FileJson,
+  BookOpen,
+  CheckCircle2,
+  XCircle,
+  Loader2,
+  ChevronDown,
+  ChevronRight,
+} from "lucide-react";
+
+interface CacheStats {
+  static: { size: number; entries: number };
+  api: { size: number; entries: number };
+  images: { size: number; entries: number };
+  books: { size: number; entries: number };
+  total: number;
+}
+
+interface CacheEntry {
+  url: string;
+  size: number;
+}
+
+type CacheType = "static" | "api" | "images" | "books";
+
+function formatBytes(bytes: number): string {
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+}
+
+function extractPathFromUrl(url: string): string {
+  try {
+    const urlObj = new URL(url);
+    return urlObj.pathname + urlObj.search;
+  } catch {
+    return url;
+  }
+}
+
+interface CacheItemProps {
+  icon: React.ReactNode;
+  label: string;
+  size: number;
+  entries: number;
+  cacheType: CacheType;
+  onClear?: () => void;
+  isClearing?: boolean;
+  description?: string;
+  onLoadEntries: (cacheType: CacheType) => Promise<CacheEntry[] | null>;
+}
+
+function CacheItem({
+  icon,
+  label,
+  size,
+  entries,
+  cacheType,
+  onClear,
+  isClearing,
+  description,
+  onLoadEntries,
+}: CacheItemProps) {
+  const { t } = useTranslate();
+  const [isOpen, setIsOpen] = useState(false);
+  const [cacheEntries, setCacheEntries] = useState<CacheEntry[] | null>(null);
+  const [isLoadingEntries, setIsLoadingEntries] = useState(false);
+
+  const handleToggle = async (open: boolean) => {
+    setIsOpen(open);
+    if (open && !cacheEntries && !isLoadingEntries) {
+      setIsLoadingEntries(true);
+      const loadedEntries = await onLoadEntries(cacheType);
+      setCacheEntries(loadedEntries);
+      setIsLoadingEntries(false);
+    }
+  };
+
+  return (
+    <Collapsible open={isOpen} onOpenChange={handleToggle}>
+      <div className="border-b last:border-b-0">
+        <div className="flex items-center justify-between py-3 px-1">
+          <CollapsibleTrigger asChild disabled={entries === 0}>
+            <button
+              className="flex items-center gap-3 flex-1 hover:bg-muted/50 rounded-lg transition-colors text-left py-1 px-2 -ml-2"
+              disabled={entries === 0}
+            >
+              <div className="p-2 rounded-lg bg-muted">{icon}</div>
+              <div className="flex-1">
+                <p className="font-medium">{label}</p>
+                {description && <p className="text-xs text-muted-foreground">{description}</p>}
+              </div>
+              {entries > 0 && (
+                <div className="w-5">
+                  {isOpen ? (
+                    <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                  ) : (
+                    <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                  )}
+                </div>
+              )}
+            </button>
+          </CollapsibleTrigger>
+          <div className="flex items-center gap-4 ml-2">
+            <div className="text-right">
+              <p className="font-mono text-sm">{formatBytes(size)}</p>
+              <p className="text-xs text-muted-foreground">
+                {entries} {entries === 1 ? t("settings.cache.entry") : t("settings.cache.entries")}
+              </p>
+            </div>
+            {onClear && (
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={onClear}
+                disabled={isClearing || entries === 0}
+                className="h-8 w-8"
+              >
+                {isClearing ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <Trash2 className="h-4 w-4" />
+                )}
+              </Button>
+            )}
+          </div>
+        </div>
+        <CollapsibleContent>
+          <div className="pb-3 pl-12 pr-1">
+            {isLoadingEntries ? (
+              <div className="flex items-center justify-center py-4">
+                <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                <span className="ml-2 text-sm text-muted-foreground">
+                  {t("settings.cache.loadingEntries")}
+                </span>
+              </div>
+            ) : cacheEntries ? (
+              <ScrollArea className="h-[200px] rounded-md border">
+                <div className="p-2 space-y-1">
+                  {cacheEntries.map((entry, index) => (
+                    <div
+                      key={index}
+                      className="flex items-center justify-between py-1.5 px-2 text-xs hover:bg-muted/50 rounded"
+                    >
+                      <span className="font-mono truncate flex-1 mr-2" title={entry.url}>
+                        {extractPathFromUrl(entry.url)}
+                      </span>
+                      <span className="font-mono text-muted-foreground whitespace-nowrap">
+                        {formatBytes(entry.size)}
+                      </span>
+                    </div>
+                  ))}
+                  {cacheEntries.length === 0 && (
+                    <p className="text-center text-muted-foreground py-4">
+                      {t("settings.cache.noEntries")}
+                    </p>
+                  )}
+                </div>
+              </ScrollArea>
+            ) : (
+              <p className="text-center text-muted-foreground py-4">
+                {t("settings.cache.loadError")}
+              </p>
+            )}
+          </div>
+        </CollapsibleContent>
+      </div>
+    </Collapsible>
+  );
+}
+
+export function CacheSettings() {
+  const { t } = useTranslate();
+  const { toast } = useToast();
+  const { isSupported, isReady, version, getCacheStats, getCacheEntries, clearCache } =
+    useServiceWorker();
+
+  const [stats, setStats] = useState<CacheStats | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [clearingCache, setClearingCache] = useState<string | null>(null);
+
+  const loadStats = useCallback(async () => {
+    if (!isReady) return;
+
+    setIsLoading(true);
+    try {
+      const cacheStats = await getCacheStats();
+      setStats(cacheStats);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [isReady, getCacheStats]);
+
+  useEffect(() => {
+    loadStats();
+  }, [loadStats]);
+
+  const handleClearCache = async (cacheType: "all" | "static" | "api" | "images") => {
+    setClearingCache(cacheType);
+    try {
+      const success = await clearCache(cacheType);
+      if (success) {
+        toast({
+          title: t("settings.cache.cleared"),
+          description: t("settings.cache.clearedDesc"),
+        });
+        await loadStats();
+      } else {
+        toast({
+          variant: "destructive",
+          title: t("settings.error.title"),
+          description: t("settings.cache.clearError"),
+        });
+      }
+    } finally {
+      setClearingCache(null);
+    }
+  };
+
+  const handleLoadEntries = useCallback(
+    async (cacheType: CacheType): Promise<CacheEntry[] | null> => {
+      return getCacheEntries(cacheType);
+    },
+    [getCacheEntries]
+  );
+
+  // Calculer le pourcentage du cache utilisé (basé sur 100MB limite images)
+  const maxCacheSize = 100 * 1024 * 1024; // 100MB
+  const usagePercent = stats ? Math.min((stats.images.size / maxCacheSize) * 100, 100) : 0;
+
+  if (!isSupported) {
+    return (
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Database className="h-5 w-5 text-muted-foreground" />
+            <CardTitle className="text-lg">{t("settings.cache.title")}</CardTitle>
+          </div>
+          <CardDescription>{t("settings.cache.notSupported")}</CardDescription>
+        </CardHeader>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Database className="h-5 w-5 text-primary" />
+            <CardTitle className="text-lg">{t("settings.cache.title")}</CardTitle>
+          </div>
+          <div className="flex items-center gap-2">
+            {isReady ? (
+              <Badge variant="outline" className="gap-1">
+                <CheckCircle2 className="h-3 w-3 text-green-500" />
+                {version || "Active"}
+              </Badge>
+            ) : (
+              <Badge variant="outline" className="gap-1">
+                <XCircle className="h-3 w-3 text-yellow-500" />
+                {t("settings.cache.initializing")}
+              </Badge>
+            )}
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={loadStats}
+              disabled={isLoading || !isReady}
+              className="h-8 w-8"
+            >
+              <RefreshCw className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`} />
+            </Button>
+          </div>
+        </div>
+        <CardDescription>{t("settings.cache.description")}</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        {/* Barre de progression globale */}
+        {stats && (
+          <div className="space-y-2">
+            <div className="flex items-center justify-between text-sm">
+              <span className="text-muted-foreground">{t("settings.cache.totalStorage")}</span>
+              <span className="font-mono font-medium">{formatBytes(stats.total)}</span>
+            </div>
+            <Progress value={usagePercent} className="h-2" />
+            <p className="text-xs text-muted-foreground text-right">
+              {t("settings.cache.imagesQuota", { used: Math.round(usagePercent) })}
+            </p>
+          </div>
+        )}
+
+        {/* Liste des caches */}
+        <div className="space-y-1">
+          {stats ? (
+            <>
+              <CacheItem
+                icon={<HardDrive className="h-4 w-4" />}
+                label={t("settings.cache.static")}
+                size={stats.static.size}
+                entries={stats.static.entries}
+                cacheType="static"
+                description={t("settings.cache.staticDesc")}
+                onClear={() => handleClearCache("static")}
+                isClearing={clearingCache === "static"}
+                onLoadEntries={handleLoadEntries}
+              />
+              <CacheItem
+                icon={<FileJson className="h-4 w-4" />}
+                label={t("settings.cache.api")}
+                size={stats.api.size}
+                entries={stats.api.entries}
+                cacheType="api"
+                description={t("settings.cache.apiDesc")}
+                onClear={() => handleClearCache("api")}
+                isClearing={clearingCache === "api"}
+                onLoadEntries={handleLoadEntries}
+              />
+              <CacheItem
+                icon={<Image className="h-4 w-4" />}
+                label={t("settings.cache.images")}
+                size={stats.images.size}
+                entries={stats.images.entries}
+                cacheType="images"
+                description={t("settings.cache.imagesDesc")}
+                onClear={() => handleClearCache("images")}
+                isClearing={clearingCache === "images"}
+                onLoadEntries={handleLoadEntries}
+              />
+              <CacheItem
+                icon={<BookOpen className="h-4 w-4" />}
+                label={t("settings.cache.books")}
+                size={stats.books.size}
+                entries={stats.books.entries}
+                cacheType="books"
+                description={t("settings.cache.booksDesc")}
+                onLoadEntries={handleLoadEntries}
+              />
+            </>
+          ) : isLoading ? (
+            <div className="flex items-center justify-center py-8">
+              <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+            </div>
+          ) : (
+            <p className="text-center text-muted-foreground py-8">
+              {t("settings.cache.unavailable")}
+            </p>
+          )}
+        </div>
+
+        {/* Bouton vider tout */}
+        {stats && stats.total > 0 && (
+          <Button
+            variant="destructive"
+            className="w-full gap-2"
+            onClick={() => handleClearCache("all")}
+            disabled={clearingCache !== null}
+          >
+            {clearingCache === "all" ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <Trash2 className="h-4 w-4" />
+            )}
+            {t("settings.cache.clearAll")}
+          </Button>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

src/components/settings/ClientSettings.tsx

@@ -6,6 +6,7 @@ import { DisplaySettings } from "./DisplaySettings";
 import { KomgaSettings } from "./KomgaSettings";
 import { BackgroundSettings } from "./BackgroundSettings";
 import { AdvancedSettings } from "./AdvancedSettings";
+import { CacheSettings } from "./CacheSettings";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import { Monitor, Network } from "lucide-react";
 
@@ -40,6 +41,7 @@ export function ClientSettings({ initialConfig }: ClientSettingsProps) {
         <TabsContent value="connection" className="mt-6 space-y-6">
           <KomgaSettings initialConfig={initialConfig} />
           <AdvancedSettings />
+          <CacheSettings />
         </TabsContent>
       </Tabs>
     </div>

src/components/ui/collapsible.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import * as React from "react";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
+

src/components/ui/scroll-area.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+
+import { cn } from "@/lib/utils";
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };
+

src/contexts/ServiceWorkerContext.tsx

@@ -0,0 +1,294 @@
+"use client";
+
+import { createContext, useContext, useEffect, useState, useCallback, useRef } from "react";
+import type { ReactNode } from "react";
+import { registerServiceWorker } from "@/lib/registerSW";
+import logger from "@/lib/logger";
+
+interface CacheStats {
+  static: { size: number; entries: number };
+  api: { size: number; entries: number };
+  images: { size: number; entries: number };
+  books: { size: number; entries: number };
+  total: number;
+}
+
+interface CacheEntry {
+  url: string;
+  size: number;
+}
+
+interface CacheUpdate {
+  url: string;
+  timestamp: number;
+}
+
+type CacheType = "all" | "static" | "api" | "images" | "rsc" | "books";
+
+interface ServiceWorkerContextValue {
+  isSupported: boolean;
+  isReady: boolean;
+  version: string | null;
+  hasNewVersion: boolean;
+  cacheUpdates: CacheUpdate[];
+  clearCacheUpdate: (url: string) => void;
+  clearAllCacheUpdates: () => void;
+  getCacheStats: () => Promise<CacheStats | null>;
+  getCacheEntries: (cacheType: CacheType) => Promise<CacheEntry[] | null>;
+  clearCache: (cacheType?: CacheType) => Promise<boolean>;
+  skipWaiting: () => void;
+  reloadForUpdate: () => void;
+}
+
+const ServiceWorkerContext = createContext<ServiceWorkerContextValue | null>(null);
+
+export function ServiceWorkerProvider({ children }: { children: ReactNode }) {
+  const [isSupported, setIsSupported] = useState(false);
+  const [isReady, setIsReady] = useState(false);
+  const [version, setVersion] = useState<string | null>(null);
+  const [hasNewVersion, setHasNewVersion] = useState(false);
+  const [cacheUpdates, setCacheUpdates] = useState<CacheUpdate[]>([]);
+  const pendingRequests = useRef<Map<string, (value: unknown) => void>>(new Map());
+  const waitingWorkerRef = useRef<ServiceWorker | null>(null);
+
+  // Handle messages from service worker
+  const handleMessage = useCallback((event: MessageEvent) => {
+    const { type, payload } = event.data || {};
+
+    switch (type) {
+      case "SW_ACTIVATED":
+        setIsReady(true);
+        setVersion(payload?.version || null);
+        break;
+
+      case "SW_VERSION":
+        setVersion(payload?.version || null);
+        break;
+
+      case "CACHE_UPDATED":
+        setCacheUpdates((prev) => {
+          // Avoid duplicates for the same URL within 1 second
+          const existing = prev.find(
+            (u) => u.url === payload.url && Date.now() - u.timestamp < 1000
+          );
+          if (existing) return prev;
+          return [...prev, { url: payload.url, timestamp: payload.timestamp }];
+        });
+        break;
+
+      case "CACHE_STATS":
+        const statsResolver = pendingRequests.current.get("CACHE_STATS");
+        if (statsResolver) {
+          statsResolver(payload);
+          pendingRequests.current.delete("CACHE_STATS");
+        }
+        break;
+
+      case "CACHE_STATS_ERROR":
+        const statsErrorResolver = pendingRequests.current.get("CACHE_STATS");
+        if (statsErrorResolver) {
+          statsErrorResolver(null);
+          pendingRequests.current.delete("CACHE_STATS");
+        }
+        break;
+
+      case "CACHE_CLEARED":
+        const clearResolver = pendingRequests.current.get("CACHE_CLEARED");
+        if (clearResolver) {
+          clearResolver(true);
+          pendingRequests.current.delete("CACHE_CLEARED");
+        }
+        break;
+
+      case "CACHE_CLEAR_ERROR":
+        const clearErrorResolver = pendingRequests.current.get("CACHE_CLEARED");
+        if (clearErrorResolver) {
+          clearErrorResolver(false);
+          pendingRequests.current.delete("CACHE_CLEARED");
+        }
+        break;
+
+      case "CACHE_ENTRIES":
+        const entriesResolver = pendingRequests.current.get("CACHE_ENTRIES");
+        if (entriesResolver) {
+          entriesResolver(payload.entries);
+          pendingRequests.current.delete("CACHE_ENTRIES");
+        }
+        break;
+
+      case "CACHE_ENTRIES_ERROR":
+        const entriesErrorResolver = pendingRequests.current.get("CACHE_ENTRIES");
+        if (entriesErrorResolver) {
+          entriesErrorResolver(null);
+          pendingRequests.current.delete("CACHE_ENTRIES");
+        }
+        break;
+    }
+  }, []);
+
+  // Initialize service worker communication
+  useEffect(() => {
+    if (typeof window === "undefined" || !("serviceWorker" in navigator)) {
+      setIsSupported(false);
+      return;
+    }
+
+    setIsSupported(true);
+
+    // Register service worker
+    registerServiceWorker({
+      onSuccess: (registration) => {
+        logger.info({ scope: registration.scope }, "Service worker registered");
+        setIsReady(true);
+        if (navigator.serviceWorker.controller) {
+          navigator.serviceWorker.controller.postMessage({ type: "GET_VERSION" });
+        }
+      },
+      onUpdate: (registration) => {
+        logger.info("New service worker version available");
+        setHasNewVersion(true);
+        waitingWorkerRef.current = registration.waiting;
+      },
+      onError: (error) => {
+        logger.error({ err: error }, "Service worker registration failed");
+      },
+    });
+
+    // Listen for messages
+    navigator.serviceWorker.addEventListener("message", handleMessage);
+
+    // Check if already controlled
+    if (navigator.serviceWorker.controller) {
+      setIsReady(true);
+      // Request version
+      navigator.serviceWorker.controller.postMessage({ type: "GET_VERSION" });
+    }
+
+    // Listen for controller changes
+    const handleControllerChange = () => {
+      setIsReady(true);
+      if (navigator.serviceWorker.controller) {
+        navigator.serviceWorker.controller.postMessage({ type: "GET_VERSION" });
+      }
+    };
+
+    navigator.serviceWorker.addEventListener("controllerchange", handleControllerChange);
+
+    return () => {
+      navigator.serviceWorker.removeEventListener("message", handleMessage);
+      navigator.serviceWorker.removeEventListener("controllerchange", handleControllerChange);
+    };
+  }, [handleMessage]);
+
+  const clearCacheUpdate = useCallback((url: string) => {
+    setCacheUpdates((prev) => prev.filter((u) => u.url !== url));
+  }, []);
+
+  const clearAllCacheUpdates = useCallback(() => {
+    setCacheUpdates([]);
+  }, []);
+
+  const getCacheStats = useCallback(async (): Promise<CacheStats | null> => {
+    if (!navigator.serviceWorker.controller) return null;
+
+    return new Promise((resolve) => {
+      pendingRequests.current.set("CACHE_STATS", resolve as (value: unknown) => void);
+      navigator.serviceWorker.controller!.postMessage({ type: "GET_CACHE_STATS" });
+
+      // Timeout after 5 seconds
+      setTimeout(() => {
+        if (pendingRequests.current.has("CACHE_STATS")) {
+          pendingRequests.current.delete("CACHE_STATS");
+          resolve(null);
+        }
+      }, 5000);
+    });
+  }, []);
+
+  const getCacheEntries = useCallback(
+    async (cacheType: CacheType): Promise<CacheEntry[] | null> => {
+      if (!navigator.serviceWorker.controller) return null;
+
+      return new Promise((resolve) => {
+        pendingRequests.current.set("CACHE_ENTRIES", resolve as (value: unknown) => void);
+        navigator.serviceWorker.controller!.postMessage({
+          type: "GET_CACHE_ENTRIES",
+          payload: { cacheType },
+        });
+
+        // Timeout after 10 seconds (can be slow for large caches)
+        setTimeout(() => {
+          if (pendingRequests.current.has("CACHE_ENTRIES")) {
+            pendingRequests.current.delete("CACHE_ENTRIES");
+            resolve(null);
+          }
+        }, 10000);
+      });
+    },
+    []
+  );
+
+  const clearCache = useCallback(async (cacheType: CacheType = "all"): Promise<boolean> => {
+    if (!navigator.serviceWorker.controller) return false;
+
+    return new Promise((resolve) => {
+      pendingRequests.current.set("CACHE_CLEARED", resolve as (value: unknown) => void);
+      navigator.serviceWorker.controller!.postMessage({
+        type: "CLEAR_CACHE",
+        payload: { cacheType },
+      });
+
+      // Timeout after 10 seconds
+      setTimeout(() => {
+        if (pendingRequests.current.has("CACHE_CLEARED")) {
+          pendingRequests.current.delete("CACHE_CLEARED");
+          resolve(false);
+        }
+      }, 10000);
+    });
+  }, []);
+
+  const skipWaiting = useCallback(() => {
+    if (navigator.serviceWorker.controller) {
+      navigator.serviceWorker.controller.postMessage({ type: "SKIP_WAITING" });
+    }
+  }, []);
+
+  const reloadForUpdate = useCallback(() => {
+    if (waitingWorkerRef.current) {
+      waitingWorkerRef.current.postMessage({ type: "SKIP_WAITING" });
+      setHasNewVersion(false);
+      // Reload will happen automatically when new SW takes control
+      window.location.reload();
+    }
+  }, []);
+
+  return (
+    <ServiceWorkerContext.Provider
+      value={{
+        isSupported,
+        isReady,
+        version,
+        hasNewVersion,
+        cacheUpdates,
+        clearCacheUpdate,
+        clearAllCacheUpdates,
+        getCacheStats,
+        getCacheEntries,
+        clearCache,
+        skipWaiting,
+        reloadForUpdate,
+      }}
+    >
+      {children}
+    </ServiceWorkerContext.Provider>
+  );
+}
+
+export function useServiceWorker() {
+  const context = useContext(ServiceWorkerContext);
+  if (!context) {
+    throw new Error("useServiceWorker must be used within a ServiceWorkerProvider");
+  }
+  return context;
+}

src/hooks/useCacheUpdate.ts

@@ -0,0 +1,98 @@
+"use client";
+
+import { useMemo, useCallback } from "react";
+import { useServiceWorker } from "@/contexts/ServiceWorkerContext";
+
+interface UseCacheUpdateOptions {
+  /** Match exact URL or use pattern matching */
+  exact?: boolean;
+}
+
+interface UseCacheUpdateResult {
+  /** Whether there's a pending update for this URL pattern */
+  hasUpdate: boolean;
+  /** Timestamp of the last update */
+  lastUpdateTime: number | null;
+  /** Clear the update notification for this URL */
+  clearUpdate: () => void;
+  /** All matching updates */
+  updates: Array<{ url: string; timestamp: number }>;
+}
+
+/**
+ * Hook to listen for cache updates from the service worker
+ *
+ * @param urlPattern - URL or pattern to match against cache updates
+ * @param options - Options for matching behavior
+ *
+ * @example
+ * // Match exact URL
+ * const { hasUpdate, clearUpdate } = useCacheUpdate('/api/komga/home', { exact: true });
+ *
+ * @example
+ * // Match URL pattern (contains)
+ * const { hasUpdate, clearUpdate } = useCacheUpdate('/api/komga/series');
+ *
+ * @example
+ * // Use in component
+ * useEffect(() => {
+ *   if (hasUpdate) {
+ *     refetch();
+ *     clearUpdate();
+ *   }
+ * }, [hasUpdate, refetch, clearUpdate]);
+ */
+export function useCacheUpdate(
+  urlPattern: string,
+  options: UseCacheUpdateOptions = {}
+): UseCacheUpdateResult {
+  const { exact = false } = options;
+  const { cacheUpdates, clearCacheUpdate } = useServiceWorker();
+
+  const matchingUpdates = useMemo(() => {
+    return cacheUpdates.filter((update) => {
+      if (exact) {
+        return update.url === urlPattern || update.url.endsWith(urlPattern);
+      }
+      return update.url.includes(urlPattern);
+    });
+  }, [cacheUpdates, urlPattern, exact]);
+
+  const hasUpdate = matchingUpdates.length > 0;
+
+  const lastUpdateTime = useMemo(() => {
+    if (matchingUpdates.length === 0) return null;
+    return Math.max(...matchingUpdates.map((u) => u.timestamp));
+  }, [matchingUpdates]);
+
+  const clearUpdate = useCallback(() => {
+    matchingUpdates.forEach((update) => {
+      clearCacheUpdate(update.url);
+    });
+  }, [matchingUpdates, clearCacheUpdate]);
+
+  return {
+    hasUpdate,
+    lastUpdateTime,
+    clearUpdate,
+    updates: matchingUpdates,
+  };
+}
+
+/**
+ * Hook to check if any cache update is available
+ * Useful for showing a global "refresh available" indicator
+ */
+export function useAnyCacheUpdate(): {
+  hasAnyUpdate: boolean;
+  updateCount: number;
+  clearAll: () => void;
+} {
+  const { cacheUpdates, clearAllCacheUpdates } = useServiceWorker();
+
+  return {
+    hasAnyUpdate: cacheUpdates.length > 0,
+    updateCount: cacheUpdates.length,
+    clearAll: clearAllCacheUpdates,
+  };
+}

src/i18n/messages/en/common.json

@@ -136,6 +136,32 @@
         "title": "Error saving configuration",
         "message": "An error occurred while saving the configuration"
       }
+    },
+    "cache": {
+      "title": "Cache & Storage",
+      "description": "Manage local cache for optimal offline experience.",
+      "notSupported": "Offline cache is not supported by your browser.",
+      "initializing": "Initializing...",
+      "totalStorage": "Total storage",
+      "imagesQuota": "{used}% of images quota used",
+      "static": "Static resources",
+      "staticDesc": "Next.js scripts, styles and assets",
+      "api": "API data",
+      "apiDesc": "Series, books and library metadata",
+      "images": "Images",
+      "imagesDesc": "Covers and thumbnails (100 MB limit)",
+      "books": "Offline books",
+      "booksDesc": "Manually downloaded pages",
+      "clearAll": "Clear all cache",
+      "cleared": "Cache cleared",
+      "clearedDesc": "Cache has been cleared successfully",
+      "clearError": "Error clearing cache",
+      "unavailable": "Cache statistics unavailable",
+      "entry": "entry",
+      "entries": "entries",
+      "loadingEntries": "Loading entries...",
+      "noEntries": "No entries in this cache",
+      "loadError": "Error loading entries"
     }
   },
   "library": {

src/i18n/messages/fr/common.json

@@ -136,6 +136,32 @@
         "title": "Erreur lors de la sauvegarde de la configuration",
         "message": "Une erreur est survenue lors de la sauvegarde de la configuration"
       }
+    },
+    "cache": {
+      "title": "Cache et stockage",
+      "description": "Gérez le cache local pour une expérience hors-ligne optimale.",
+      "notSupported": "Le cache hors-ligne n'est pas supporté par votre navigateur.",
+      "initializing": "Initialisation...",
+      "totalStorage": "Stockage total",
+      "imagesQuota": "{used}% du quota images utilisé",
+      "static": "Ressources statiques",
+      "staticDesc": "Scripts, styles et assets Next.js",
+      "api": "Données API",
+      "apiDesc": "Métadonnées des séries, livres et bibliothèques",
+      "images": "Images",
+      "imagesDesc": "Couvertures et vignettes (limite 100 Mo)",
+      "books": "Livres hors-ligne",
+      "booksDesc": "Pages téléchargées manuellement",
+      "clearAll": "Vider tout le cache",
+      "cleared": "Cache vidé",
+      "clearedDesc": "Le cache a été vidé avec succès",
+      "clearError": "Erreur lors du vidage du cache",
+      "unavailable": "Statistiques du cache non disponibles",
+      "entry": "entrée",
+      "entries": "entrées",
+      "loadingEntries": "Chargement des entrées...",
+      "noEntries": "Aucune entrée dans ce cache",
+      "loadError": "Erreur lors du chargement des entrées"
     }
   },
   "library": {

src/lib/registerSW.ts

@@ -1,14 +1,137 @@
 import logger from "@/lib/logger";
 
-export const registerServiceWorker = async () => {
+interface ServiceWorkerRegistrationOptions {
+  onUpdate?: (registration: ServiceWorkerRegistration) => void;
+  onSuccess?: (registration: ServiceWorkerRegistration) => void;
+  onError?: (error: Error) => void;
+}
+
+/**
+ * Register the service worker with optional callbacks for update and success events
+ */
+export const registerServiceWorker = async (
+  options: ServiceWorkerRegistrationOptions = {}
+): Promise<ServiceWorkerRegistration | null> => {
   if (typeof window === "undefined" || !("serviceWorker" in navigator)) {
-    return;
+    return null;
+  }
+
+  const { onUpdate, onSuccess, onError } = options;
+
+  try {
+    const registration = await navigator.serviceWorker.register("/sw.js", {
+      scope: "/",
+    });
+
+    // Check for updates immediately
+    registration.update().catch(() => {
+      // Ignore update check errors
+    });
+
+    // Handle updates
+    registration.addEventListener("updatefound", () => {
+      const newWorker = registration.installing;
+
+      if (!newWorker) return;
+
+      newWorker.addEventListener("statechange", () => {
+        if (newWorker.state === "installed") {
+          if (navigator.serviceWorker.controller) {
+            // New service worker available
+            logger.info("New service worker available");
+            onUpdate?.(registration);
+          } else {
+            // First install
+            logger.info("Service worker installed for the first time");
+            onSuccess?.(registration);
+          }
+        }
+      });
+    });
+
+    // If already active, call success
+    if (registration.active) {
+      onSuccess?.(registration);
+    }
+
+    return registration;
+  } catch (error) {
+    const err = error instanceof Error ? error : new Error(String(error));
+    logger.error({ err }, "Service Worker registration failed");
+    onError?.(err);
+    return null;
+  }
+};
+
+/**
+ * Unregister all service workers
+ */
+export const unregisterServiceWorker = async (): Promise<boolean> => {
+  if (typeof window === "undefined" || !("serviceWorker" in navigator)) {
+    return false;
   }
 
   try {
-    await navigator.serviceWorker.register("/sw.js");
-    // logger.info("Service Worker registered with scope:", registration.scope);
+    const registrations = await navigator.serviceWorker.getRegistrations();
+    await Promise.all(registrations.map((reg) => reg.unregister()));
+    logger.info("All service workers unregistered");
+    return true;
   } catch (error) {
-    logger.error({ err: error }, "Service Worker registration failed:");
+    logger.error({ err: error }, "Failed to unregister service workers");
+    return false;
+  }
+};
+
+/**
+ * Send a message to the active service worker
+ */
+export const sendMessageToSW = <T = unknown>(message: unknown): Promise<T | null> => {
+  return new Promise((resolve) => {
+    if (!navigator.serviceWorker.controller) {
+      resolve(null);
+      return;
+    }
+
+    const messageChannel = new MessageChannel();
+
+    messageChannel.port1.onmessage = (event) => {
+      resolve(event.data as T);
+    };
+
+    navigator.serviceWorker.controller.postMessage(message, [messageChannel.port2]);
+
+    // Timeout after 5 seconds
+    setTimeout(() => {
+      resolve(null);
+    }, 5000);
+  });
+};
+
+/**
+ * Check if the app is running as a PWA (standalone mode)
+ */
+export const isPWA = (): boolean => {
+  if (typeof window === "undefined") return false;
+
+  return (
+    window.matchMedia("(display-mode: standalone)").matches ||
+    // iOS Safari
+    ("standalone" in window.navigator &&
+      (window.navigator as { standalone?: boolean }).standalone === true)
+  );
+};
+
+/**
+ * Get the current service worker registration
+ */
+export const getServiceWorkerRegistration = async (): Promise<ServiceWorkerRegistration | null> => {
+  if (typeof window === "undefined" || !("serviceWorker" in navigator)) {
+    return null;
+  }
+
+  try {
+    return await navigator.serviceWorker.ready;
+  } catch {
+    return null;
   }
 };