first commit

public/ICONS_README.md

@@ -0,0 +1,14 @@
+# Icônes PWA requises
+
+Pour que la PWA fonctionne correctement, vous devez ajouter les icônes suivantes dans le dossier `public/` :
+
+- `icon-192x192.png` : Icône 192x192 pixels pour Android
+- `icon-512x512.png` : Icône 512x512 pixels pour Android et iOS
+
+Ces icônes doivent être au format PNG et suivre les guidelines PWA :
+- Fond transparent ou couleur de thème (#0E7490)
+- Design simple et reconnaissable même à petite taille
+- Format carré avec contenu centré
+
+Vous pouvez utiliser un outil comme [PWA Asset Generator](https://github.com/onderceylan/pwa-asset-generator) pour générer toutes les tailles nécessaires à partir d'une seule image source.
+

public/favicon.ico

@@ -0,0 +1 @@
+placeholder

public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "name": "Compagnon du lagon - Pension Marama",
+  "short_name": "Pension Marama",
+  "description": "Votre guide numérique pour votre séjour à Fakarava",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#FAFAFA",
+  "theme_color": "#0E7490",
+  "orientation": "portrait",
+  "icons": [
+    {
+      "src": "/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ]
+}
+

public/sw.js

@@ -0,0 +1,147 @@
+const CACHE_NAME = "compagnon-lagon-v1";
+const urlsToCache = [
+  "/",
+  "/accueil",
+  "/explorer",
+  "/mana-tracker",
+  "/infos",
+  "/manifest.json",
+];
+
+const API_CACHE_NAME = "compagnon-lagon-api-v1";
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => {
+      return cache.addAll(urlsToCache);
+    })
+  );
+});
+
+self.addEventListener("fetch", (event) => {
+  const { request } = event;
+  const url = new URL(request.url);
+
+  // Cache strategy pour les API routes
+  if (url.pathname.startsWith("/api/")) {
+    event.respondWith(
+      caches.open(API_CACHE_NAME).then((cache) => {
+        return cache.match(request).then((cachedResponse) => {
+          if (cachedResponse) {
+            // Retourner le cache et mettre à jour en arrière-plan
+            fetch(request)
+              .then((response) => {
+                if (response && response.status === 200) {
+                  cache.put(request, response.clone());
+                }
+              })
+              .catch(() => {});
+            return cachedResponse;
+          }
+          // Pas de cache, faire la requête
+          return fetch(request)
+            .then((response) => {
+              if (response && response.status === 200) {
+                cache.put(request, response.clone());
+              }
+              return response;
+            })
+            .catch(() => {
+              // En cas d'erreur réseau, retourner une réponse par défaut
+              return new Response(
+                JSON.stringify({ error: "Offline" }),
+                {
+                  status: 503,
+                  headers: { "Content-Type": "application/json" },
+                }
+              );
+            });
+        });
+      })
+    );
+    return;
+  }
+
+  // Cache strategy pour les pages statiques
+  event.respondWith(
+    caches.match(request).then((response) => {
+      if (response) {
+        return response;
+      }
+      return fetch(request)
+        .then((response) => {
+          if (!response || response.status !== 200 || response.type !== "basic") {
+            return response;
+          }
+          const responseToCache = response.clone();
+          caches.open(CACHE_NAME).then((cache) => {
+            cache.put(request, responseToCache);
+          });
+          return response;
+        })
+        .catch(() => {
+          // Retourner une page offline si disponible
+          return caches.match("/offline");
+        });
+    })
+  );
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches.keys().then((cacheNames) => {
+      return Promise.all(
+        cacheNames
+          .filter(
+            (cacheName) =>
+              cacheName !== CACHE_NAME && cacheName !== API_CACHE_NAME
+          )
+          .map((cacheName) => caches.delete(cacheName))
+      );
+    })
+  );
+});
+
+// Gestion des notifications push
+self.addEventListener("push", (event) => {
+  const data = event.data ? event.data.json() : {};
+  const title = data.title || "Compagnon du lagon - Pension Marama";
+  const options = {
+    body: data.message || "Nouvelle notification",
+    icon: "/icon-192x192.png",
+    badge: "/icon-192x192.png",
+    tag: data.id || "notification",
+    requireInteraction: data.important || false,
+    data: data,
+  };
+
+  event.waitUntil(self.registration.showNotification(title, options));
+});
+
+// Gestion du clic sur une notification
+self.addEventListener("notificationclick", (event) => {
+  event.notification.close();
+
+  const data = event.notification.data;
+  const urlToOpen = data.url || "/mana-tracker";
+
+  event.waitUntil(
+    clients
+      .matchAll({
+        type: "window",
+        includeUncontrolled: true,
+      })
+      .then((clientList) => {
+        for (let i = 0; i < clientList.length; i++) {
+          const client = clientList[i];
+          if (client.url === urlToOpen && "focus" in client) {
+            return client.focus();
+          }
+        }
+        if (clients.openWindow) {
+          return clients.openWindow(urlToOpen);
+        }
+      })
+  );
+});
+