PWA : Transformez Votre Site en App Mobile

// sw.js - Service Worker
const CACHE_NAME = 'app-cache-v1';
const urlsToCache = [
  '/',
  '/styles/main.css',
  '/scripts/app.js',
  '/manifest.json',
];

// INSTALL : Cache initial
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache))
      .then(() => self.skipWaiting()) // Active immédiatement
  );
});

// ACTIVATE : Nettoyer ancien cache
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames
          .filter(name => name !== CACHE_NAME)
          .map(name => caches.delete(name))
      );
    }).then(() => self.clients.claim())
  );
});

// FETCH : Stratégie Cache-First
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // Retourne cache si dispo, sinon fetch réseau
        return response || fetch(event.request);
      })
  );
});

{
  "name": "Casablanca Bourse - Espace Investisseur",
  "short_name": "CB Bourse",
  "description": "Plateforme de trading en temps réel",
  "start_url": "/account/login",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1e40af",
  "orientation": "portrait-primary",
  "icons": [
    {
      "src": "/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "categories": ["finance", "business"],
  "shortcuts": [
    {
      "name": "Portfolio",
      "url": "/portfolio",
      "description": "Voir mon portefeuille",
      "icons": [{ "src": "/icons/portfolio.png", "sizes": "96x96" }]
    },
    {
      "name": "Cotations",
      "url": "/quotes",
      "description": "Cotations temps réel"
    }
  ]
}

// Client: Demande permission + souscription
async function subscribeToPush() {
  const registration = await navigator.serviceWorker.ready;
  
  const subscription = await registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: 'VAPID_PUBLIC_KEY'
  });

  // Envoyer subscription au serveur
  await fetch('/api/push/subscribe', {
    method: 'POST',
    body: JSON.stringify(subscription),
    headers: { 'Content-Type': 'application/json' }
  });
}

// Service Worker: Réception push
self.addEventListener('push', event => {
  const data = event.data.json();
  
  const options = {
    body: data.body,
    icon: '/icons/icon-192x192.png',
    badge: '/icons/badge-72x72.png',
    vibrate: [200, 100, 200],
    data: { url: data.url },
    actions: [
      { action: 'open', title: 'Ouvrir', icon: '/icons/check.png' },
      { action: 'close', title: 'Fermer', icon: '/icons/cross.png' }
    ]
  };

  event.waitUntil(
    self.registration.showNotification(data.title, options)
  );
});

// Click notification → ouvrir app
self.addEventListener('notificationclick', event => {
  event.notification.close();
  
  if (event.action === 'open') {
    clients.openWindow(event.notification.data.url);
  }
});