compatible pwa

2026-03-27 01:24:59 +01:00
parent d98c1f24b3
commit 30aeeef94d
7 changed files with 154 additions and 8 deletions
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/icon-192.png
+++ b/public/icon-192.png
--- a/public/icon-512.png
+++ b/public/icon-512.png
--- a/public/index.html
+++ b/public/index.html
@@ -3,7 +3,11 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Soundboard Pro Studio - 1080p</title>
+    <title>Soundboard A5L</title>
+    <link rel="manifest" href="manifest.json">
+    <meta name="theme-color" content="#00f2ff">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <style>
        :root { 
            --bg: #050505; 
@@ -113,7 +117,12 @@
 <body>

 <header>
+  <div style="display: flex; gap: 10px; align-items: center;">
      <button class="stop-all" onclick="stopAll()">🛑 STOP ALL</button>
+      <button id="installBtn" style="display:none; padding: 12px 20px; background: var(--accent); color: black; border: none; border-radius: 4px; font-weight: bold; cursor: pointer;">
+          📥 INSTALLER SOUNDBOARD
+      </button>
+  </div>
  <button onclick="toggleEditMode()" id="toggleBtn" style="padding: 12px 30px; border-radius: 4px; font-weight: bold;">MODE ÉDITION</button>
 </header>

@@ -149,6 +158,38 @@
    let editingIndex = null;
    let tempFileData = null;

+    let deferredPrompt;
+    const installBtn = document.getElementById('installBtn');
+
+    window.addEventListener('beforeinstallprompt', (e) => {
+    // Empêche Chrome d'afficher sa propre mini-barre
+    e.preventDefault();
+    // Stocke l'événement pour l'utiliser plus tard
+    deferredPrompt = e;
+    // Affiche votre bouton personnalisé
+    installBtn.style.display = 'block';
+
+    installBtn.addEventListener('click', async () => {
+        if (deferredPrompt) {
+        // Montre la fenêtre d'installation native
+        deferredPrompt.prompt();
+        // Attend la réponse de l'utilisateur
+        const { outcome } = await deferredPrompt.userChoice;
+        console.log(`L'utilisateur a répondu : ${outcome}`);
+        // On nettoie
+        deferredPrompt = null;
+        installBtn.style.display = 'none';
+        }
+    });
+    });
+
+    // Cache le bouton si l'app est déjà installée
+    window.addEventListener('appinstalled', () => {
+    installBtn.style.display = 'none';
+    deferredPrompt = null;
+    console.log('PWA installée avec succès !');
+    });
+
    // Données pour 64 boutons (Grille 8x8)
    let btnData = JSON.parse(localStorage.getItem('sb_studio_data')) || Array(64).fill(null).map((_, i) => ({
        id: i, name: "", file: null, loop: false, volume: 1
@@ -300,8 +341,24 @@
        init();
    }

+    // Désactive le menu contextuel (clic droit) sur toute la page
+    window.oncontextmenu = function(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        return false;
+    };
+
    function closeEdit() { document.getElementById('editOverlay').style.display = 'none'; }
    init();
 </script>
+
+<script>
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('sw.js')
+      .then(() => console.log("Service Worker Enregistré"));
+  }
+</script>
+
+
 </body>
 </html>
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "name": "Soundboard A5L",
+  "short_name": "Soundboard",
+  "description": "Studio de sons 64 touches pour écran tactile",
+  "start_url": "index.html",
+  "display": "fullscreen",
+  "display_override": ["window-controls-overlay"],
+  "orientation": "landscape",
+  "background_color": "#050505",
+  "theme_color": "#00f2ff",
+  "icons": [
+    {
+      "src": "icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    }
+  ]
+}
--- a/public/readme.md
+++ b/public/readme.md
@@ -1,7 +1,22 @@
+# Soundboard par A5L
+
+
+## Fonctionnalités
+
+* Edition de 64 boutons poru diffuser des sons simultané
+* Stockage du son en interne du navigateur
+* Arrêt de toutes les pistes avec un bouton STOP ALL
+* Progressif Web App
+
+
+## Fonctionnalités à venir
+
+* Authentification pour stocker les sons sur le serveur
+* Authentification pour récuperer les sons depuis le serveur
+* Utilisation d'IndexedDB pour stocker les son
+* Partager des sons pour que d'autres puissent les déployer dans leur soundboard
+* Rechercher des sons dans sa médiathèque ou des sons partagés pour une diffusion One Shot
+* Ajouter des sons partagés par d'autres utilisateurs
+

 Vous pouvez trouver des sons sur https://boardsounds.com/fr
-
-Utilisation d'IndexedDB pour stocker les son
-
-Authentification pour stocker les sons sur le serveur
-
--- a/public/sw.js
+++ b/public/sw.js
@@ -0,0 +1,49 @@
+const CACHE_NAME = 'sb-v1.1'; // Change ce numéro pour forcer une mise à jour globale
+const ASSETS = [
+  './', // Racine
+  './index.html',
+  './manifest.json',
+  './icon-192.png',
+  './icon-512.png'
+];
+
+// Installation : Mise en cache des ressources critiques
+self.addEventListener('install', (e) => {
+  self.skipWaiting(); // Force le nouveau SW à prendre le contrôle immédiatement
+  e.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => {
+      console.log('SW: Mise en cache des ressources');
+      return cache.addAll(ASSETS);
+    })
+  );
+});
+
+// Activation : Nettoyage des anciens caches
+self.addEventListener('activate', (e) => {
+  e.waitUntil(
+    caches.keys().then((keyList) => {
+      return Promise.all(keyList.map((key) => {
+        if (key !== CACHE_NAME) {
+          console.log('SW: Suppression de l\'ancien cache', key);
+          return caches.delete(key);
+        }
+      }));
+    })
+  );
+});
+
+// Stratégie : Cache First, Network Fallback
+self.addEventListener('fetch', (e) => {
+  e.respondWith(
+    caches.match(e.request).then((response) => {
+      // Retourne la réponse du cache si elle existe, sinon fait la requête réseau
+      return response || fetch(e.request).then((networkResponse) => {
+        // Optionnel : tu pourrais mettre en cache dynamiquement les nouveaux fichiers ici
+        return networkResponse;
+      });
+    }).catch(() => {
+      // Si tout échoue (offline et pas en cache), tu peux retourner une page d'erreur
+      console.log('SW: Ressource non trouvée');
+    })
+  );
+});