Descarga los archivos técnicos

Descargar manifest.json Descargar sw.js

Código del Botón (HTML/JS)

<button id="pwaBtn" style="display:none; background:#00d2ff; color:white; padding:15px 25px; border-radius:12px; border:none; font-weight:bold; cursor:pointer; font-family:sans-serif; box-shadow: 0 4px 10px rgba(0,0,0,0.1);">
   INSTALAR APP
</button>

<script>
    let deferredPrompt;
    const pwaBtn = document.getElementById("pwaBtn");

    if("serviceWorker" in navigator){ 
        window.addEventListener("load", () => {
            navigator.serviceWorker.register("sw.js").catch(err => {
                pwaBtn.setAttribute("data-incognito", "true");
            });
        });
    }
    
    let link = document.createElement("link"); 
    link.rel = "manifest"; 
    link.href = "manifest.json"; 
    document.head.appendChild(link);

    window.addEventListener("beforeinstallprompt", (e) => {
        e.preventDefault(); 
        deferredPrompt = e;
        pwaBtn.style.display = "block";
    });

    window.addEventListener("load", () => {
        const isStandalone = window.matchMedia("(display-mode: standalone)").matches;
        if (!isStandalone) {
            setTimeout(() => {
                if (!deferredPrompt) { pwaBtn.style.display = "block"; }
            }, 3000);
        }
    });

    pwaBtn.addEventListener("click", async () => {
        if (pwaBtn.getAttribute("data-incognito") === "true") {
            alert("⚠️ Estás en modo Incógnito.\n\nLos navegadores bloquean la instalación de Apps en este modo. Para instalarla, abre la web en una pestaña normal.");
            return;
        }

        if(deferredPrompt){
            deferredPrompt.prompt();
            const { outcome } = await deferredPrompt.userChoice;
            if(outcome === "accepted") {
                deferredPrompt = null;
                pwaBtn.style.display = "none";
            }
        } else {
            alert("Para instalar: \n- En Chrome/Edge: Busca el icono de instalar en la barra.\n- En Firefox: Usa el icono de la casa (+).\n- En iOS: Añadir a pantalla de inicio.");
        }
    });
</script>

Guía de Usuario

📄 Descargar Guía de Instalación (PDF)
⚠️ Requisitos para que el botón aparezca:
  1. Sube manifest.json y sw.js a la raíz (public_html).
  2. Tu web DEBE tener certificado SSL (HTTPS).
  3. Sube tu logo cuadrado de 512x512px como icon.png a la raíz.
  4. Sube las capturas: screenshot-desktop.png (1280x720) y screenshot-mobile.png (750x1334).
  5. Pega el código copiado arriba antes de </body>.