Pruébalo de verdad: abre la demo en tu móvil con «Pantalla completa» e instálala. Te quedará el icono de la panadería en la pantalla de inicio.
← Código
Hablemos →
Tu web se instala como una app
Con dos archivos pequeños y dos líneas en tu página, tu web se instala en el móvil como una app: con su icono en la pantalla de inicio y a pantalla completa. Sin tiendas de aplicaciones y sin pagar a nadie.
PARA TU NEGOCIOUn restaurante, una peluquería, una tienda o un gimnasio con su propia app por 0 €: el cliente la tiene en la pantalla de inicio, al lado de WhatsApp, y vuelve con un toque.
// CÓMO FUNCIONA
- manifest.json es la «ficha» de tu app: el nombre, el icono, los colores y que se abra sin la barra del navegador (display: standalone).
- sw.js es un service worker: un pequeño ayudante que se queda instalado en el móvil. Con escuchar «fetch» basta para que el navegador ofrezca instalarla.
- En tu index.html enlazas el manifest y registras el service worker. Listo.
- El cliente ve «Instalar app» (Android y Chrome) o la añade desde Compartir (iPhone), y aparece en su pantalla de inicio con tu icono.
// EL CÓDIGO
// Junto a tu index.html. Cambia el nombre, los colores y los iconos por los tuyos.
{
"name": "Panadería Brisa",
"short_name": "Brisa",
"start_url": "./",
"scope": "./",
"display": "standalone",
"background_color": "#f6efe4",
"theme_color": "#3b2a1a",
"icons": [
{ "src": "icono-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "icono-512.png", "sizes": "512x512", "type": "image/png" }
]
}// Una línea. También junto a tu index.html.
self.addEventListener('fetch', () => {});// Lo único que añades a tu página.
<!-- 1) Dentro de <head>: dónde está la ficha de tu app -->
<link rel="manifest" href="manifest.json">
<link rel="apple-touch-icon" href="icono-192.png">
<!-- 2) Antes de </body>: activa el service worker -->
<script>
if ('serviceWorker' in navigator) navigator.serviceWorker.register('sw.js');
</script>// La web de ejemplo entera, con un botón propio de «Instalar».
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Panadería Brisa</title>
<meta name="theme-color" content="#3b2a1a">
<link rel="manifest" href="manifest.json">
<link rel="apple-touch-icon" href="icono-192.png">
<style>
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:#f6efe4;color:#3b2a1a;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;display:flex;flex-direction:column}
header{display:flex;align-items:center;gap:12px;padding:max(44px,env(safe-area-inset-top)) 22px 14px}
header img{width:42px;height:42px;border-radius:11px}
header b{font:700 20px Georgia,serif}
main{flex:1;padding:8px 22px 28px;max-width:560px;width:100%;margin:0 auto}
h1{font:700 clamp(34px,9vw,52px)/1.02 Georgia,serif;margin:14px 0 10px}
p{margin:0 0 20px;color:#6b5440;font-size:17px;line-height:1.45}
.pan{height:200px;border-radius:22px;background:linear-gradient(135deg,#e9c891,#c8904e);display:grid;place-items:center;font-size:96px;margin-bottom:22px}
button{width:100%;font:700 18px system-ui,sans-serif;padding:17px;border-radius:40px;border:0;cursor:pointer}
#instalar{background:#3b2a1a;color:#fff}
#instalar[hidden]{display:none}
.aviso{margin-top:14px;padding:14px 16px;border-radius:14px;background:#fff;font-size:15px;color:#6b5440;line-height:1.45}
.aviso b{color:#3b2a1a}
.app-ya{background:#e8f7ee;color:#1d5a34}
</style>
</head>
<body>
<header><img src="icono-192.png" alt=""><b>Brisa</b></header>
<main>
<h1>Panadería Brisa</h1>
<p>Pan de masa madre, cada mañana. Esta web se instala en tu móvil como una app.</p>
<div class="pan" aria-hidden="true">🥖</div>
<button id="instalar" hidden>📲 Instalar la app</button>
<div class="aviso" id="aviso"><b>¿Cómo se instala?</b><br>Android y Chrome: menú ⋮ → «Instalar app».<br>iPhone (Safari): Compartir → «Añadir a pantalla de inicio».</div>
</main>
<script>
// El navegador necesita el service worker registrado para ofrecer «Instalar»
if ('serviceWorker' in navigator) navigator.serviceWorker.register('sw.js');
// Extra (opcional): un botón propio de «Instalar» donde el navegador lo permite (Chrome, Edge, Android)
let aviso;
addEventListener('beforeinstallprompt', (e) => { e.preventDefault(); aviso = e; instalar.hidden = false; });
instalar.addEventListener('click', async () => { if (!aviso) return; aviso.prompt(); await aviso.userChoice; aviso = null; instalar.hidden = true; });
// Abierta como app (desde la pantalla de inicio): se nota porque no hay barra del navegador
if (matchMedia('(display-mode: standalone)').matches || navigator.standalone) {
const a = document.getElementById('aviso');
a.className = 'aviso app-ya'; a.innerHTML = '<b>✔ Estás dentro de la app.</b><br>Sin barra del navegador, con su propio icono.';
}
</script>
</body>
</html>- La web tiene que ir con HTTPS (cualquier hosting actual lo da).
- Dos iconos PNG: 192×192 y 512×512 píxeles.
- Comprobado en Chrome: 0 errores de instalación.
¿Lo quieres en tu web y no te ves con fuerzas?
En AEWorks lo montamos por ti, junto con lo que necesite tu negocio.