feat(v0.12.5): PWA enhancements — offline audio, responsive hooks, icons

- Service Worker: audio caching strategy for offline playback (cache-first)
- Service Worker: CACHE_AUDIO message for explicit track caching
- useMediaQuery hook with useIsMobile/useIsTablet/useIsDesktop helpers
- PWAUpdateBanner and OfflineBanner components (previously stubs)
- Missing notification icons: badge-72x72, checkmark, xmark

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

apps/web/public/sw.js

@@ -79,11 +79,16 @@ self.addEventListener('fetch', (event) => {
 // Handle different types of requests with appropriate strategies
 async function handleRequest(request) {
   try {
+    // Strategy 0: Cache First for audio files (offline playback)
+    if (isAudioRequest(request.url)) {
+      return await cacheAudio(request);
+    }
+
     // Strategy 1: Cache First for static assets
     if (isStaticAsset(request.url)) {
       return await cacheFirst(request, STATIC_CACHE_NAME);
     }
-    
+
     // Strategy 2: Network First for API requests
     if (isApiRequest(request.url)) {
       return await networkFirst(request, DYNAMIC_CACHE_NAME);
@@ -236,6 +241,41 @@ async function getOfflinePage() {
   });
 }
 
+// v0.12.5: Audio file caching for offline playback
+const AUDIO_CACHE_NAME = `veza-audio-${CACHE_VERSION}`;
+
+function isAudioRequest(url) {
+  const path = new URL(url).pathname;
+  return /\.(mp3|m4a|ogg|wav|flac|aac|opus)(\?.*)?$/.test(path) ||
+    path.includes('/audio/') ||
+    path.includes('/hls/');
+}
+
+// Cache audio with cache-first strategy (audio files are immutable)
+async function cacheAudio(request) {
+  const cached = await caches.match(request);
+  if (cached) {
+    return cached;
+  }
+
+  try {
+    const response = await fetch(request);
+    if (response.ok) {
+      const cache = await caches.open(AUDIO_CACHE_NAME);
+      cache.put(request, response.clone());
+    }
+    return response;
+  } catch (error) {
+    // Return cached version if available (offline playback)
+    const cachedFallback = await caches.match(request);
+    if (cachedFallback) {
+      console.log('[SW] Serving cached audio (offline)');
+      return cachedFallback;
+    }
+    throw error;
+  }
+}
+
 // Helper functions - only cache images, fonts, ico (never js/css)
 function isStaticAsset(url) {
   const path = new URL(url).pathname;
@@ -280,7 +320,21 @@ self.addEventListener('message', (event) => {
         });
       });
       break;
-      
+
+    // v0.12.5: Cache a specific audio URL for offline playback
+    case 'CACHE_AUDIO':
+      if (event.data.url) {
+        caches.open(AUDIO_CACHE_NAME).then(async (cache) => {
+          try {
+            await cache.add(event.data.url);
+            event.ports[0]?.postMessage({ type: 'AUDIO_CACHED', payload: { success: true, url: event.data.url } });
+          } catch (err) {
+            event.ports[0]?.postMessage({ type: 'AUDIO_CACHED', payload: { success: false, error: err.message } });
+          }
+        });
+      }
+      break;
+
     default:
       console.log('[SW] Unknown message type:', type);
   }

apps/web/src/components/pwa/PWAInstallBanner.tsx

@@ -5,7 +5,7 @@
 
 import { Download, Smartphone } from 'lucide-react';
 import { Button } from '@/components/ui/button';
-import { usePWAInstallBanner } from '@/hooks/usePWA';
+import { usePWAInstallBanner, usePWA as usePWAHook } from '@/hooks/usePWA';
 import { useTranslation } from 'react-i18next';
 import { cn } from '@/lib/utils';
 
@@ -72,23 +72,59 @@ export function PWAInstallBanner() {
 }
 
 /**
- * PWA Update Banner Component
- * Shows a banner when app update is available
+ * v0.12.5: PWA Update Banner Component
+ * Shows a non-intrusive notification when a new version is ready.
  */
 export function PWAUpdateBanner() {
-  // This would need to be implemented with the PWA hook
-  // For now, returning null as it requires more complex state management
+  const { canUpdate, update, isUpdating } = usePWAHook();
 
-  return null;
+  if (!canUpdate) return null;
+
+  return (
+    <div
+      role="alert"
+      aria-label="Mise à jour disponible"
+      className="fixed top-4 left-4 right-4 z-50 mx-auto max-w-md sumi-glass rounded-xl border border-primary/30 p-3 shadow-lg"
+    >
+      <div className="flex items-center gap-3">
+        <div className="w-6 h-6 rounded-md bg-primary/10 flex items-center justify-center">
+          <Download className="h-3.5 w-3.5 text-primary" aria-hidden="true" />
+        </div>
+        <p className="flex-1 text-xs font-mono text-foreground uppercase tracking-wider">
+          SYSTEM_UPDATE_AVAILABLE
+        </p>
+        <Button
+          variant="glass"
+          size="sm"
+          onClick={update}
+          disabled={isUpdating}
+          className="h-7 text-[10px] font-black font-mono tracking-widest bg-primary hover:opacity-90"
+        >
+          {isUpdating ? 'UPDATING...' : 'APPLY_UPDATE'}
+        </Button>
+      </div>
+    </div>
+  );
 }
 
 /**
- * Offline Banner Component
- * Shows when the app is offline
+ * v0.12.5: Offline Banner Component
+ * Shows a minimal banner when the app is offline.
  */
 export function OfflineBanner() {
-  // This would integrate with the offline detection hook
-  // For now, returning null as it requires more complex state management
+  const { isOffline } = usePWAHook();
 
-  return null;
+  if (!isOffline) return null;
+
+  return (
+    <div
+      role="status"
+      aria-label="Mode hors ligne"
+      className="fixed top-0 left-0 right-0 z-[60] bg-amber-500/90 px-4 py-1 text-center"
+    >
+      <p className="text-[10px] font-mono font-bold text-black uppercase tracking-widest">
+        OFFLINE_MODE — CACHED_DATA_ONLY
+      </p>
+    </div>
+  );
 }

apps/web/src/hooks/useMediaQuery.ts

@@ -0,0 +1,42 @@
+/**
+ * v0.12.5: Responsive media query hook
+ * Provides programmatic access to Tailwind breakpoints
+ */
+
+import { useState, useEffect } from 'react';
+
+/**
+ * Hook that tracks a CSS media query match state.
+ * @param query - CSS media query string (e.g. "(min-width: 1024px)")
+ * @returns boolean indicating if the query matches
+ */
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(() => {
+    if (typeof window === 'undefined') return false;
+    return window.matchMedia(query).matches;
+  });
+
+  useEffect(() => {
+    const mql = window.matchMedia(query);
+    setMatches(mql.matches);
+
+    const handler = (e: MediaQueryListEvent) => setMatches(e.matches);
+    mql.addEventListener('change', handler);
+    return () => mql.removeEventListener('change', handler);
+  }, [query]);
+
+  return matches;
+}
+
+/** Tailwind breakpoint hooks */
+export function useIsMobile(): boolean {
+  return !useMediaQuery('(min-width: 640px)');
+}
+
+export function useIsTablet(): boolean {
+  return useMediaQuery('(min-width: 640px)') && !useMediaQuery('(min-width: 1024px)');
+}
+
+export function useIsDesktop(): boolean {
+  return useMediaQuery('(min-width: 1024px)');
+}