feat(pwa): add install prompt banner and register in all POS templates

- pwa-install.js: captures beforeinstallprompt, shows dismissible banner with 7-day localStorage cooldown, handles appinstalled - Registered in 12 POS templates alongside existing service worker
2026-04-29 06:30:38 +00:00
parent 4b3b0f8313
commit 3b8224d15e
13 changed files with 142 additions and 0 deletions
--- a/pos/static/js/pwa-install.js
+++ b/pos/static/js/pwa-install.js
@@ -0,0 +1,101 @@
+/**
+ * Nexus POS — PWA Install Prompt
+ * Captures beforeinstallprompt and shows a dismissible banner.
+ */
+(function () {
+  'use strict';
+
+  const STORAGE_KEY = 'nexus_pwa_install_dismissed';
+  let deferredPrompt = null;
+
+  function createBanner() {
+    if (document.getElementById('pwa-install-banner')) return;
+
+    const banner = document.createElement('div');
+    banner.id = 'pwa-install-banner';
+    banner.innerHTML = `
+      <span>📲 Instala Nexus POS para acceso rápido y modo offline.</span>
+      <button id="pwa-install-btn">Instalar</button>
+      <button id="pwa-dismiss-btn" aria-label="Cerrar">&times;</button>
+    `;
+    document.body.appendChild(banner);
+
+    const style = document.createElement('style');
+    style.textContent = `
+      #pwa-install-banner {
+        position: fixed;
+        bottom: 0; left: 0; right: 0;
+        background: var(--color-surface, #1a1a1a);
+        color: var(--color-text, #eee);
+        border-top: 1px solid var(--color-border, #333);
+        padding: 12px 16px;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        font-size: 14px;
+        z-index: 9999;
+        box-shadow: 0 -4px 12px rgba(0,0,0,0.3);
+      }
+      #pwa-install-banner span { flex: 1; }
+      #pwa-install-btn {
+        background: var(--color-primary, #F5A623);
+        color: #000;
+        border: none;
+        padding: 8px 16px;
+        border-radius: 6px;
+        font-weight: 600;
+        cursor: pointer;
+      }
+      #pwa-dismiss-btn {
+        background: none;
+        border: none;
+        color: var(--color-text-muted, #888);
+        font-size: 20px;
+        cursor: pointer;
+        line-height: 1;
+      }
+    `;
+    document.head.appendChild(style);
+
+    document.getElementById('pwa-install-btn').addEventListener('click', function () {
+      if (!deferredPrompt) return;
+      deferredPrompt.prompt();
+      deferredPrompt.userChoice.then(function (choice) {
+        if (choice.outcome === 'accepted') {
+          console.log('[PWA] User accepted install');
+        }
+        deferredPrompt = null;
+        banner.remove();
+      });
+    });
+
+    document.getElementById('pwa-dismiss-btn').addEventListener('click', function () {
+      localStorage.setItem(STORAGE_KEY, Date.now().toString());
+      banner.remove();
+    });
+  }
+
+  window.addEventListener('beforeinstallprompt', function (e) {
+    e.preventDefault();
+    deferredPrompt = e;
+
+    const dismissed = localStorage.getItem(STORAGE_KEY);
+    if (dismissed && (Date.now() - parseInt(dismissed)) < 7 * 24 * 60 * 60 * 1000) {
+      return; // dismissed within 7 days
+    }
+
+    // Wait for DOM to be ready
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', createBanner);
+    } else {
+      createBanner();
+    }
+  });
+
+  window.addEventListener('appinstalled', function () {
+    console.log('[PWA] App installed');
+    deferredPrompt = null;
+    const b = document.getElementById('pwa-install-banner');
+    if (b) b.remove();
+  });
+})();