Qué es una web como app
Es una función de los navegadores: cualquier web se puede agregar a la pantalla de inicio del celular y queda con su ícono, como cualquier otra app. Es gratis y no hace falta subir nada a Play Store ni a App Store.
No es una app de la tienda: es tu misma web, instalada. Sirve para que tus clientes la encuentren desde el ícono sin tener que acordarse del link.
Si la web es tuya, podés sumarle un archivo llamado manifest. Es un archivo JSON que le dice al navegador cómo se comporta la web instalada: qué nombre lleva, qué ícono usa y cómo se abre. Con eso, cuando la abren desde el ícono se ve a pantalla completa, sin la barra de direcciones.
Lo que necesitás
- Para instalar una web: un Android con Chrome o un iPhone con Safari.
- Para agregar el manifest: acceso al código de tu web y dos íconos, uno de 192x192 y otro de 512x512.
1 · Instalar cualquier web en el celular
| Dónde | Pasos |
|---|---|
| Android (Chrome) | Más (a la derecha de la barra de direcciones) → Instalar y crear acceso directo → Instalar |
| iPhone (Safari) | Compartir → Agregar a Inicio → activar Abrir como app web → Agregar |
En Android:
- Abrí la web en Chrome. Entrá a la página que querés guardar.
- Tocá Más. Está a la derecha de la barra de direcciones.
- Elegí la instalación. Tocá Instalar y crear acceso directo y después Instalar.
En iPhone:
- Abrí la web en Safari. Entrá a la página que querés guardar.
- Tocá Compartir. Después elegí Agregar a Inicio.
- Activá Abrir como app web. Con esa opción activada, tocá Agregar.
En los dos casos te queda el ícono en la pantalla de inicio.
2 · Si la web es tuya: agregarle el manifest
- Creá el archivo. En la raíz de tu web, creá un archivo
manifest.json. - Cargá lo mínimo. Tiene que llevar el nombre, los íconos y la dirección de inicio (el detalle está en la tabla de abajo).
- Pedí pantalla completa. Sumá
"display": "standalone"para que se vea como una app, sin la barra de direcciones. - Enlazalo en el HTML. Dentro del
<head>de tu página agregá<link rel="manifest" href="/manifest.json">. - Subí los cambios. Publicá la web con el archivo nuevo y volvé a instalarla en el celular con los pasos de la sección 1.
| Campo | Qué define |
|---|---|
name y short_name |
El nombre de la web instalada |
icons |
Los íconos: uno de 192x192 y otro de 512x512 |
start_url |
La dirección con la que abre, por ejemplo "/" |
display |
Cómo se abre: con "standalone" se ve sin la barra de direcciones |
3 · Si no sabés programar: pedíselo a tu IA
Copiá este mensaje y pegalo en la IA que uses para trabajar en tu web:
Agregale a mi web un manifest.json con nombre, short_name, íconos de 192 y 512 px, start_url "/" y display "standalone", y enlazalo en el head.
Después subí los cambios y probá la instalación en tu celular.
Qué no cubre esta guía
- Funcionar sin internet. El manifest solo no alcanza: eso necesita más trabajo (un service worker) y acá no está explicado.
- Notificaciones push y un cartel propio que invite a instalar. Se nombran en el video, pero se configuran aparte y esta guía no los explica.
Si algo falla
- Se abre con la barra del navegador. Revisá que el manifest tenga
"display": "standalone". En iPhone, fijate que Abrir como app web haya quedado activado antes de tocar Agregar. - El navegador no toma el manifest. Revisá que
<link rel="manifest" href="/manifest.json">esté dentro del<head>y que el archivo esté en la ruta que indica elhref. - El ícono o el nombre no son los tuyos. Revisá que el manifest tenga
name,short_namey los dos íconos, el de 192x192 y el de 512x512. - Cambiaste el manifest y en el celular sigue igual. Fijate que los cambios estén subidos y volvé a instalar la web desde el navegador.
- No abre sin conexión. Es lo esperado: la web instalada sigue necesitando internet, salvo que le sumes un service worker.
- No aparece en Play Store ni en App Store. Es lo esperado: es la web instalada desde el navegador, no una app de la tienda.