up

2026-01-26 00:46:27 -05:00
parent bb311bd043
commit 7f9bbdc4f7
3 changed files with 109 additions and 0 deletions
@@ -39,6 +39,11 @@ try {
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="./assets/css/styles.css?v=11" rel="stylesheet">
    <link href="./assets/css/diagnostic.css?v=10" rel="stylesheet">
+    <link rel="manifest" href="/manifest.json">
+    <meta name="theme-color" content="#10b981">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="default">
 </head>

 <body>
@@ -97,6 +102,11 @@ try {
                        <i class="fas fa-bell"></i>
                        <span id="notification-count" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" style="display:none;">0</span>
                    </button>
+                </div>
+
+                <!-- PWA install button (shown when beforeinstallprompt fires) -->
+                <div class="me-2 d-none d-md-inline" id="pwa-install-wrap">
+                    <button id="pwa-install-btn" class="btn btn-outline-primary" style="display:none">Instalar app</button>
                </div>                <button class="btn btn-primary me-2" onclick="refreshData()">
                    <i class="fas fa-sync-alt"></i> Actualizar
                </button>
@@ -1237,6 +1247,42 @@ try {
            openSidebar = function() { console.debug('[index] openSidebar()'); _openSidebar(); };
            closeSidebar = function() { console.debug('[index] closeSidebar()'); _closeSidebar(); };

+            // PWA: register service worker and handle install prompt
+            let deferredPrompt = null;
+            const pwaBtn = document.getElementById('pwa-install-btn');
+            const pwaWrap = document.getElementById('pwa-install-wrap');
+
+            window.addEventListener('beforeinstallprompt', (e) => {
+                e.preventDefault();
+                deferredPrompt = e;
+                if (pwaBtn) {
+                    pwaBtn.style.display = 'inline-block';
+                    if (pwaWrap) pwaWrap.classList.remove('d-none');
+                }
+            });
+
+            if (pwaBtn) {
+                pwaBtn.addEventListener('click', async () => {
+                    if (!deferredPrompt) return;
+                    deferredPrompt.prompt();
+                    const { outcome } = await deferredPrompt.userChoice;
+                    console.debug('PWA install result:', outcome);
+                    if (outcome === 'accepted') {
+                        pwaBtn.style.display = 'none';
+                    }
+                    deferredPrompt = null;
+                });
+            }
+
+            window.addEventListener('appinstalled', () => {
+                console.debug('PWA installed');
+                if (pwaBtn) pwaBtn.style.display = 'none';
+                try { if (NotificationManager && NotificationManager.showToast) NotificationManager.showToast({ message: 'App instalada correctamente' }); } catch(e){}
+            });
+
+            if ('serviceWorker' in navigator) {
+                navigator.serviceWorker.register('/service-worker.js').then(reg => console.debug('SW registered', reg)).catch(e => console.warn('SW registration failed', e));
+            }
            // Close sidebar when a nav item is selected (mobile UX improvement)
            document.querySelectorAll('.nav-link[data-tab]').forEach(link => {
                link.addEventListener('click', () => {
@@ -0,0 +1,20 @@
+{
+  "name": "WhatsApp Bot Manager",
+  "short_name": "WA Bot",
+  "start_url": "/index.php",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#10b981",
+  "icons": [
+    {
+      "src": "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='192' height='192'><rect width='100%' height='100%' fill='%2310b981'/><text x='50%' y='55%' font-family='Arial' font-size='72' text-anchor='middle' fill='white'>WB</text></svg>",
+      "sizes": "192x192",
+      "type": "image/svg+xml"
+    },
+    {
+      "src": "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='512' height='512'><rect width='100%' height='100%' fill='%2310b981'/><text x='50%' y='55%' font-family='Arial' font-size='200' text-anchor='middle' fill='white'>WB</text></svg>",
+      "sizes": "512x512",
+      "type": "image/svg+xml"
+    }
+  ]
+}
@@ -0,0 +1,43 @@
+const CACHE_NAME = 'whatsapp-static-v1';
+const OFFLINE_URL = '/index.php';
+const ASSETS_TO_CACHE = [
+  OFFLINE_URL,
+  '/assets/css/styles.css',
+  '/assets/js/app_simple.js',
+  '/manifest.json'
+];
+
+self.addEventListener('install', (event) => {
+  self.skipWaiting();
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => cache.addAll(ASSETS_TO_CACHE))
+  );
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then(keys => Promise.all(
+      keys.filter(k => k !== CACHE_NAME).map(k => caches.delete(k))
+    ))
+  );
+  self.clients.claim();
+});
+
+self.addEventListener('fetch', (event) => {
+  if (event.request.method !== 'GET') return;
+  event.respondWith(
+    caches.match(event.request).then(cached => {
+      if (cached) return cached;
+      return fetch(event.request).then(resp => {
+        // cache same-origin GET responses
+        try {
+          if (resp && resp.status === 200 && resp.type === 'basic') {
+            const clone = resp.clone();
+            caches.open(CACHE_NAME).then(cache => cache.put(event.request, clone));
+          }
+        } catch (e) {}
+        return resp;
+      }).catch(() => caches.match(OFFLINE_URL));
+    })
+  );
+});