← Tu primera app
Lección 6 de 8 · 20 min

En el móvil, como una app de verdad

Publicar la app gratis en internet, instalarla en la pantalla de inicio del iPhone o del Android con su icono y comprobar que funciona sin conexión.

Generado con IA20 min

Por qué hay que publicarla

Para usarla en el móvil, la app tiene que estar en una dirección de internet. Publicarla no hace públicos tus datos: el archivo es el mismo para todos, pero los datos se guardan en el navegador de cada persona. Si alguien abre tu enlace, verá la app vacía.

Que parezca una app

Prompt para hacerla instalablePrepara mi app para instalarla en la pantalla de inicio del móvil: 1. Crea un archivo manifest.webmanifest con el nombre "[nombre]", nombre corto "[nombre corto]", color de tema [color] y modo "standalone". 2. Dime qué etiquetas añadir en el index.html para el manifiesto, el icono de Apple y el color de la barra. 3. Crea un icono sencillo en SVG con [idea del icono] y dime cómo pasarlo a PNG de 192 y 512 píxeles. 4. Añade un service worker mínimo para que la app abra sin conexión, y explícame en dos frases qué hace. No cambies nada más y no toques cómo se guardan los datos.

Al terminar, en tu carpeta mi-app tendrás el index.html, el manifiesto, los iconos y el service worker.

Publicarla gratis

  1. Crea una cuenta gratuita en Cloudflare y entra en Workers y Pages.
  2. Crea un proyecto de Pages con la opción de subir archivos (Upload assets) y arrastra la carpeta mi-app.
  3. En un minuto tendrás una dirección del tipo mi-app.pages.dev.
  4. Cada vez que cambies algo, sube de nuevo la carpeta en una implementación nueva.

Si hiciste el curso «Tu web en una tarde», es el mismo proceso de su lección 7. No necesitas comprar un dominio para una app personal.

Instalarla en el móvil

  • iPhone: abre la dirección en Safari, pulsa el botón de compartir y elige Añadir a pantalla de inicio.
  • Android: ábrela en Chrome, pulsa los tres puntos y elige Instalar app o Añadir a pantalla de inicio.

Desde ese momento se abre a pantalla completa, con su icono, como cualquier app. Ojo: los datos de la app instalada pueden ser distintos de los del navegador. Usa siempre la del icono.

Comprobación final

  • Pon el móvil en modo avión y abre la app: tiene que funcionar y guardar.
  • Cierra la app del todo, vuelve a abrirla y comprueba que los datos siguen ahí.
  • Haz una copia (lección 3) desde el móvil y guárdala en tu nube.
  • Borra los registros de prueba. A partir de hoy, todo lo que apuntes es de verdad.
Practica · unos 14 min

Ahora tú

Hazlo sobre tu propia web y marca cada paso. Se guarda solo.

0 de 5 tareas hechas

Texto generado con inteligencia artificial (Claude, de Anthropic) a partir de la experiencia de Esclusa en proyectos. Comprueba la información antes de tomar decisiones. Cómo usamos la IA

@esclusa.ia