Como Construir una Aplicacion PWA Local: Convierte un Sitio Web en una "Aplicacion Real"

1 Que Son las PWA y el Desarrollo PWA

En este tutorial, completaremos un ciclo completo: desde un proyecto web ordinario hasta una "aplicacion real" que puede instalarse en el escritorio y la pantalla de inicio del telefono y que funciona incluso sin conexion. Tu mismo convertiras una aplicacion React en una PWA, la desplegaras en linea y la instalaras en tu telefono para pruebas.

Lo que vamos a construir es una aplicacion Granja de Tomates - una PWA que combina perfectamente la tecnica Pomodoro con un juego de granja. Ganas puntos a traves de 25 minutos de trabajo enfocado, luego usas esos puntos para comprar semillas y plantar cultivos. A medida que aumenta tu nivel, desbloqueas mas tierras de cultivo y mejores semillas. Lo mas importante, sigue funcionando incluso sin internet, y todos los datos se almacenan localmente.

Para este tutorial, debes tener al menos:

• Una computadora (Windows o Mac)
• Un entorno Node.js (version 18.0 o superior)
• Tu asistente de programacion con IA (Cursor / Trae / Claude Code, etc.)
• Un telefono (para probar la instalacion movil)

1.1 Definicion de PWA

PWA (Progressive Web App) es un tipo especial de sitio web. A traves de la tecnologia Service Worker, gana la capacidad de "almacenarse en cache y tomar control de si mismo."

Por que los sitios web ordinarios no pueden funcionar sin conexion, pero las PWA si

Un sitio web ordinario necesita descargar archivos HTML, CSS y JS del servidor cada vez que se abre, por lo que si la red esta caida, simplemente no puede cargar. Una PWA, por otro lado, usa un Service Worker (un script JS ejecutandose en segundo plano del navegador) para almacenar estos archivos localmente en la primera visita. Despues de eso, incluso si la red se desconecta, el Service Worker puede leer archivos directamente del cache local y mostrar la pagina normalmente.

Una analogia simple: un sitio web ordinario es como pedir prestado un libro de la biblioteca cada vez (debes tener internet), mientras que una PWA es como comprar el libro y ponerlo en tu propia estanteria (despues de la primera descarga, aun puedes leerlo sin conexion).

PWA vs Sitio Web Ordinario vs Aplicacion Nativa

Caracteristica	Sitio Web Ordinario	PWA	Aplicacion Nativa
Instalacion	No necesaria	Opcional (agregar a pantalla de inicio)	Debe descargarse de la tienda de aplicaciones
Uso sin conexion	❌ No	✅ Si (despues del almacenamiento en cache)	✅ Si
Metodo de actualizacion	Refresco automatico	Actualizacion automatica / en segundo plano	Actualizacion manual del usuario
Tamano	Ninguno	De unos pocos cientos de KB a unos pocos MB	Decenas de MB o mas
Costo de desarrollo	Bajo	Bajo (una base de codigo)	Alto (iOS / Android separados)

Resumen en una oracion: una PWA es "una pagina web que puede almacenar sus propios archivos" - tiene la ligereza de un sitio web (sin instalacion requerida, actualizacion automatica) y la experiencia de una aplicacion nativa (soporte sin conexion, instalable en escritorio/pantalla de inicio).

1.2 Por Que Elegir PWA?

En la era del Vibe Coding, PWA es una de las soluciones "multiplataforma" mas rentables:

Dimension de Comparacion	Aplicacion Nativa	PWA
Costo de desarrollo	Debe desarrollarse iOS / Android / escritorio por separado	Una base de codigo para todas las plataformas
Instalacion	Debe ir a la tienda de aplicaciones	Instalar directamente en el navegador, instantaneo
Metodo de actualizacion	Los usuarios deben actualizar manualmente	Actualizaciones automaticas, invisibles para el usuario
Tamano del paquete	A menudo decenas de MB	Generalmente solo unos pocos cientos de KB
Soporte sin conexion	Integrado naturalmente	Soportado a traves de Service Worker
Mejores escenarios	Necesidad de acceso profundo al hardware (AR / Bluetooth, etc.)	Visualizacion de contenido, herramientas, aplicaciones ligeras

Resumen en una oracion: si tu aplicacion no necesita AR a traves de la camara o acceso a hardware Bluetooth, PWA es casi la opcion mas facil.

1.5 Hoja de Ruta del Tutorial

Para hacer el proceso de aprendizaje menos aburrido, este tutorial gira en torno a un caso divertido y practico - Granja de Tomates. Es un juego de granja Pomodoro que combina trabajo enfocado con recompensas gamificadas. Junto con el modo Vibe Coding de los asistentes de programacion con IA, dividiremos el proceso desde cero hasta la instalacion en el telefono en una ruta reutilizable:

1. Construir comprension y entorno: entender que es PWA, instalar Node.js y un asistente de programacion con IA, y asegurar que la cadena de herramientas funcione sin problemas.
2. Construir el esqueleto del proyecto: crear un proyecto React + TypeScript que pueda ejecutarse localmente.
3. Desarrollo iterativo con IA: a traves de conversacion con la IA, construir la cuenta atras Pomodoro, el sistema de granja, el sistema de niveles, el renderizado SVG de cultivos y mas.
4. Configuracion PWA y pruebas sin conexion: agregar Service Worker y Manifest, luego verificar el soporte sin conexion.
5. Despliegue e instalacion en el telefono: desplegar en Vercel para obtener una URL HTTPS, luego instalar y usar en un telefono.

Esta seccion solo da el panorama general, sin expandir los comandos exactos. Por ahora, solo recuerda la linea principal: Configuracion de entorno -> Construccion de esqueleto -> Descripcion y generacion con IA -> Configuracion PWA -> Entrega de despliegue. En los proximos capitulos, caminaremos a traves de cada paso contigo.

2 Configuracion del Entorno de Desarrollo

2.1 Herramientas Utilizadas en Este Tutorial

Durante todo el proceso de desarrollo usamos tres herramientas juntas, y ellas toman los roles de "diseno," "construccion" y "aceptacion."

• Asistente de programacion con IA (Cursor / Trae / Claude Code): este es tu companero de programacion con IA. En el modo Vibe Coding, ya no necesitamos escribir codigo linea por linea. En su lugar, principalmente le decimos a la IA en lenguaje natural que funcionalidad queremos, y ella maneja la generacion y modificacion de codigo.
• Node.js + Vite: estas son la fabrica de construccion del proyecto. Node.js proporciona el entorno de ejecucion JavaScript, y Vite es una herramienta de construccion frontend de proxima generacion con velocidad extremadamente rapida, especialmente adecuada para construir PWAs.
• Un telefono: este actua como el dispositivo de prueba para verificar el resultado de la ejecucion. Puedes acceder directamente a la PWA desplegada en el navegador de tu telefono y probar la instalacion real y la funcionalidad sin conexion.

2.2 Instalar Node.js

Node.js es el entorno basico para el desarrollo PWA. Visita el sitio web oficial https://nodejs.org y descarga la version LTS (Soporte a Largo Plazo) (este tutorial esta basado en Node.js 18.x o superior).

Despues de la descarga, instalalo como software ordinario haciendo doble clic en el instalador y manteniendo las opciones predeterminadas.

Despues de la instalacion, abre la terminal (CMD / PowerShell en Windows, Terminal en Mac) y ejecuta:

node --version
npm --version

Si ves salidas de version como v18.17.0 y 9.6.7, significa que la instalacion fue exitosa.

2.3 Instalar el Asistente de Programacion con IA

El asistente de programacion con IA es el campo de batalla principal de Vibe Coding. Puedes simplemente entenderlo como un "editor con una super IA incorporada."

Opciones recomendadas:

• Trae: visita https://www.trae.cn y descarga la version correspondiente para tu sistema operativo
• Cursor: visita https://cursor.sh e instalalo
• Claude Code: si ya estas usando Claude, puedes usar Claude Code directamente

El proceso de instalacion es muy simple, igual que instalar software normal. Despues de preparar esta herramienta, en la practica posterior ya no necesitaremos mirar ventanas de codigo aburridas. En su lugar, abriremos el proyecto aqui y usaremos lenguaje natural en el cuadro de chat para pedirle a la IA que escriba codigo y corrija errores.

2.4 Crear un Nuevo Proyecto

Abre tu asistente de programacion con IA e ingresa el siguiente Prompt en el cuadro de chat:

Por favor ayudame a crear un proyecto React llamado tomato-farm-pwa para construir una aplicacion de Granja de Tomates.
Necesita soportar TypeScript, y tambien incluir funcionalidad PWA (del tipo que se puede instalar en la pantalla de inicio del telefono).

La IA realizara automaticamente los siguientes pasos:

Paso 1: Crear el proyecto

npm create vite@latest tomato-farm-pwa -- --template react-ts

Paso 2: Entrar al proyecto e instalar dependencias

cd tomato-farm-pwa
npm install

Paso 3: Instalar el plugin PWA

npm install vite-plugin-pwa -D

Despues de que la IA termine, la estructura de tu proyecto se vera aproximadamente asi:

tomato-farm-pwa/
├── public/              # Assets estaticos (iconos, materiales SVG van aqui)
├── src/
│   ├── App.tsx          # Componente principal
│   ├── main.tsx         # Archivo de entrada
│   └── App.css          # Estilos
├── index.html           # Entrada HTML
├── vite.config.ts       # Configuracion de Vite (la configuracion PWA va aqui)
├── package.json
└── tsconfig.json

2.5 Entender la Estructura del Proyecto

Despues de crear el proyecto, necesitamos entender el rol de varios archivos clave:

Archivo / Directorio	Proposito
src/App.tsx	Componente principal de la aplicacion, donde se escribe la logica de pagina central
src/main.tsx	Archivo de entrada de la aplicacion, responsable de montar la aplicacion React
vite.config.ts	Archivo de configuracion de Vite, donde se escribe la configuracion central de PWA
public/	Directorio de assets estaticos, donde van los iconos PWA y materiales SVG
index.html	Archivo de entrada HTML, generalmente no necesita modificacion

Como principiantes, principalmente necesitamos preocuparnos por tres partes:

• App.tsx: controla el comportamiento del programa y decide "que aparece en pantalla"
• vite.config.ts: configura el comportamiento PWA y decide "como se instala y almacena en cache la aplicacion"
• public/: almacena los iconos y assets de la aplicacion

2.6 Preparar los Iconos de la Aplicacion

PWA necesita iconos antes de poder instalarse. Como minimo, necesitamos dos imagenes PNG en tamanos 192x192 y 512x512.

Puedes pedirle a la IA que los genere:

Por favor ayudame a generar dos iconos de aplicacion con tamanos 192x192 y 512x512.
Usa un fondo de gradiente verde y dibuja un tomate rojo en el centro. Guardalos en la carpeta public.

O tambien puedes crear tus propios iconos con cualquier herramienta de diseno (Figma, Canva) y colocarlos en el directorio public/.

2.7 Configurar vite-plugin-pwa

Este es el paso mas critico. Abre vite.config.ts y pidele a la IA que configure el plugin PWA:

Por favor ayudame a cambiar vite.config.ts a una configuracion PWA para que la pagina web pueda instalarse en la pantalla de inicio del telefono:
- El nombre de la aplicacion es "Granja de Tomates", con tema verde
- Usa icon-192.png e icon-512.png del directorio public como iconos
- Habilita actualizaciones automaticas
- Almacena en cache todos los archivos js, css, html e imagenes para que la aplicacion pueda funcionar sin conexion

La IA generara una configuracion similar a esta:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [
    react(),
    VitePWA({
      registerType: 'autoUpdate',
      manifest: {
        name: 'Tomato Farm',
        short_name: 'Tomato Farm',
        description: 'Enfocate, planta y crece',
        theme_color: '#4CAF50',
        background_color: '#ffffff',
        display: 'standalone',
        icons: [
          {
            src: '/icon-192.png',
            sizes: '192x192',
            type: 'image/png'
          },
          {
            src: '/icon-512.png',
            sizes: '512x512',
            type: 'image/png'
          }
        ]
      },
      workbox: {
        globPatterns: ['**/*.{js,css,html,ico,png,svg}']
      }
    })
  ]
})

Explicacion de configuracion clave:

• registerType: 'autoUpdate': cuando publicas una nueva version, la aplicacion se actualizara automaticamente la proxima vez que los usuarios la abran, sin operacion manual.
• display: 'standalone': despues de la instalacion, se ejecuta en su propia ventana, sin barra de direccion del navegador, y se siente como una aplicacion nativa.
• workbox.globPatterns: le dice al Service Worker que tipos de archivos deben almacenarse en cache y seguir siendo accesibles sin conexion.

3 Construir la PWA Granja de Tomates

En los dos capitulos anteriores, ya entendimos que es una PWA y completamos la configuracion del entorno. A partir de esta seccion, dejamos de hablar solo en teoria y pasamos a la practica. Usaremos el modo Vibe Coding para construir desde cero una aplicacion divertida y practica - Granja de Tomates. Combina perfectamente la tecnica Pomodoro con incentivos gamificados y cubre los elementos centrales del desarrollo PWA: interaccion de UI (temporizador Pomodoro), almacenamiento de datos (puntos y cultivos) y capacidad sin conexion (almacenamiento en cache del Service Worker).

Ahora, enviemos la primera instruccion a la IA.

3.1 El Primer "Prompt Maestro": De Cero a Uno

En el modo Vibe Coding, no necesitamos seguir el enfoque tradicional de primero crear archivos de layout y luego escribir codigo de logica. Lo que necesitamos hacer es describir los requisitos claramente de una vez y dejar que la IA genere la primera version ejecutable.

Abre el directorio del proyecto que acabamos de crear en tu asistente de programacion con IA, e ingresa el siguiente Prompt:

Por favor ayudame a escribir la pagina principal para la aplicacion Granja de Tomates, con las siguientes funciones:

**Temporizador Pomodoro**
- Un temporizador de cuenta atras de 25 minutos con inicio, pausa y reinicio
- Mostrar tiempo restante y una barra de progreso
- Dar al usuario 10 puntos despues de completar una sesion de enfoque

**Sistema de Granja**
- 3 parcelas de tierra de cultivo, pero inicialmente solo la primera esta disponible; las posteriores se desbloquean despues de subir de nivel
- Una tienda para comprar semillas: zanahoria cuesta 5 puntos, tomate 10 puntos, maiz 15 puntos
- Despues de comprar semillas y plantarlas, los cultivos crecen lentamente, y cuando maduran pueden cosecharse para obtener puntos

**Sistema de Niveles**
- Nivel por puntos totales: 0-100 puntos = Agricultor Principiante, 100-300 = Agricultor Experto, mas de 300 = Maestro de la Granja
- Desbloquear nueva tierra y mejores semillas despues de subir de nivel

**Diseno de UI**
- Arriba muestra nivel, puntos y barra de progreso de mejora
- En el medio muestra la cuenta atras Pomodoro
- Abajo esta la cuadricula de tierras de cultivo
- En la parte inferior esta el boton de la tienda
- Usa un tema verde y haz que se vea fresco y lindo
- Debe adaptarse a pantallas de telefono

**Guardado de Datos**
- Todos los datos (puntos, nivel, estado de tierras de cultivo) deben guardarse, y actualizar la pagina no debe perderlos

Despues de enviarlo, veras que la IA comienza a razonar y analizar la estructura de tu proyecto. Unos segundos despues, generara directamente el codigo completo para App.tsx.

1. Desde su respuesta, podemos ver su logica de razonamiento y logica de interaccion
2. Podemos ver directamente que codigo cambio
3. Si no estamos satisfechos, podemos volver a la version anterior

3.2 Ejecutar y Vista Previa (Servidor de Desarrollo Local)

Ahora la IA ha completado la primera ronda de desarrollo, pero recuerda: lo que vemos en el asistente de programacion todavia son solo "planos" de codigo, no una aplicacion interactiva real. Necesitamos iniciar un servidor de desarrollo local para que podamos realmente ejecutar el codigo y ver el efecto real.

Ejecuta esto en la terminal de tu asistente de programacion con IA:

npm run dev

Despues de unos segundos, la terminal mostrara una salida como esta:

  VITE v5.0.0  listo en 300 ms

  ->  Local:   http://localhost:5173/
  ->  Network: use --host to exponer
  ->  presiona h + enter para mostrar ayuda

Abre http://localhost:5173/ en tu navegador, y deberias ver:

• nivel, puntos y una barra de progreso en la parte superior
• una cuenta atras Pomodoro en el medio
• area de tierras de cultivo debajo
• un boton de tienda en la parte inferior

Intenta hacer clic en el boton "Iniciar Enfoque" y verifica si la cuenta atras funciona correctamente. Haz clic en una parcela de tierra y verifica si puedes comprar semillas y plantarlas. Esta es la primera version de tu aplicacion PWA.

3.3 Iteracion de Optimizacion (Agregar Cultivos SVG y Animacion)

En este punto, nuestra aplicacion ya tiene una forma basica: temporizador Pomodoro, sistema de granja y sistema de niveles. Pero puede que aun se vea tosca, con los cultivos tal vez mostrandose solo como texto o bloques simples. A continuacion, agregaremos hermosos cultivos SVG y animacion de crecimiento para dar vida a la Granja de Tomates.

Este es exactamente donde Vibe Coding se vuelve tan atractivo. En el desarrollo tradicional, dibujar graficos SVG y construir animaciones de crecimiento complejas puede ser una pesadilla para principiantes. No solo necesitas manejar el dibujo de rutas SVG, sino tambien calcular curvas de animacion. En el modo Vibe Coding, no necesitas preocuparte por esos detalles de bajo nivel. Solo dile a la IA como un director: "Dale a los cultivos graficos SVG mas bonitos y haz que crezcan con animacion", y el codigo complejo aparece casi al instante.

Paso 1: Preparar los assets de cultivos SVG

Puedes pedirle a la IA que dibuje SVG directamente en codigo, o preparar archivos SVG y colocarlos bajo public/. En este tutorial, recomendamos dejar que la IA genere codigo SVG directamente porque es mas flexible.

Paso 2: Enviar una instruccion de iteracion

Vuelve al asistente de programacion con IA e ingresa el siguiente Prompt:

Por favor mejora la apariencia de los cultivos y agrega animacion de crecimiento:

**Graficos de cultivos**
- Zanahoria: cuerpo naranja con hojas verdes
- Tomate: forma redonda roja con pequenas hojas verdes
- Maiz: mazorca de maiz amarilla con hojas exteriores verdes
Usa solo formas simples

**Animacion de crecimiento**
- Cuando se planta por primera vez, comienza como un pequeno brote y gradualmente crece hasta la madurez
- Mostrar 3 etapas

**Efecto de cosecha**
- Al hacer clic en un cultivo maduro, reproducir una animacion simple de cosecha
- Mostrar cuantos puntos se ganaron

**Pulido general**
- Las parcelas de tierra deben tener bordes y color de fondo
- Los cultivos deben aparecer centrados en la parcela
- El estilo general debe sentirse un poco mas lindo

La IA modificara el codigo nuevamente y manejara el renderizado SVG y la logica de animacion. Despues de terminar, actualiza el navegador, y deberias ver mejores graficos de cultivos y animaciones de crecimiento suaves.

3.4 Agregar Efectos de Sonido y Notificaciones (Opcional)

Si quieres que la Granja de Tomates se sienta mas inmersiva, tambien puedes agregar efectos de sonido y notificaciones. Esto tambien solo necesita un simple Prompt:

Por favor agrega efectos de sonido y notificaciones a la Granja de Tomates:

**Efectos de sonido**
- Reproducir un "ding" cuando comienza el enfoque
- Reproducir un sonido de victoria cuando se completa el enfoque
- Tambien agregar efectos de sonido correspondientes para plantar y cosechar

**Notificaciones**
- Mostrar "Felicidades, completaste una sesion de enfoque!" despues de que termine un ciclo de enfoque
- Mostrar "Felicidades, subiste al nivel XX!" al subir de nivel
- Mostrar "Desbloqueaste una nueva parcela de tierra!" cuando se desbloquea nueva tierra

Puedes implementar esto con archivos de audio simples o la API Web Audio

La IA te ayudara a agregar efectos de sonido y notificaciones, haciendo que la Granja de Tomates sea mas animada y agradable.

4 Experimentar la PWA Localmente

4.1 Construir y Vista Previa

El Service Worker de PWA solo toma efecto en compilaciones de produccion (no se registrara en modo de desarrollo). Por lo que necesitamos construir primero, luego vista previa:

Por favor ayudame a ejecutar estos comandos:
1. npm run build (construir version de produccion)
2. npm run preview (iniciar servidor de vista previa local)

Despues de la compilacion, Vite generara todos los archivos en el directorio dist/, incluyendo el sw.js (Service Worker) generado automaticamente y manifest.webmanifest.

Una vez que el servidor de vista previa se inicie, abre la direccion mostrada en la terminal (generalmente http://localhost:4173).

4.2 Instalar la PWA en el Escritorio

Despues de abrir la URL de vista previa, notaras que aparece un icono de instalacion en el lado derecho de la barra de direccion del navegador (generalmente una pequena flecha de descarga o signo "+").

Pasos de instalacion en Chrome / Edge:

1. Haz clic en el icono de instalacion en el lado derecho de la barra de direccion
2. Haz clic en Instalar en el dialogo emergente
3. La PWA se abrira en una ventana independiente, y se creara un acceso directo en tu escritorio / Menu de Inicio / Dock

La PWA instalada se ve exactamente como una aplicacion de escritorio nativa - sin barra de direccion, sin pestanas, con su propia ventana e icono. Ahora puedes abrir la Granja de Tomates en cualquier momento y comenzar tu viaje de enfoque y cultivo.

Pasos de instalacion en macOS Safari:

1. Abre la URL de la PWA en Safari
2. Haz clic en Archivo -> Agregar al Dock desde la barra de menu
3. El icono de la PWA aparecera en el Dock

4.3 Probar la Capacidad Sin Conexion

Esta es la parte mas genial de PWA. Verifiquemos si el modo sin conexion realmente funciona:

1. Asegurate de que la PWA se haya abierto en el navegador al menos una vez (para que el Service Worker pueda almacenar recursos en cache)
2. Desconecta la red (apaga el Wi-Fi o desconecta el cable)
3. Actualiza la pagina - descubriras que la Granja de Tomates sigue cargando normalmente!
4. Inicia una sesion Pomodoro - despues de que termine ganas puntos, compras semillas, plantas cultivos - y todos los datos se guardan normalmente en localStorage

Tambien puedes abrir Chrome DevTools (F12) -> Application -> Service Workers para inspeccionar el estado del Service Worker y las listas de recursos en cache.

4.4 Persistencia de Datos y Opciones de Sincronizacion

Ahora tu Granja de Tomates ya puede ejecutarse sin conexion, y todos los datos se guardan en el localStorage del navegador. Pero hay un problema clave: si el usuario cambia de dispositivo o borra los datos del navegador, todos los datos de la granja se perderan. Para aplicaciones serias de produccion, necesitamos pensar en la persistencia de datos y la sincronizacion entre dispositivos.

4.4.1 Limitaciones del Almacenamiento Local

El localStorage que estamos usando actualmente tiene varias limitaciones obvias:

Limitacion	Descripcion
Vinculado al dispositivo	Los datos solo se almacenan en el navegador actual del dispositivo actual; cambiar de dispositivo significa perderlos
Capacidad limitada	Generalmente solo 5-10MB de espacio de almacenamiento
Facil de perder	Borrar los datos del navegador o desinstalar la PWA causa perdida de datos
No se puede sincronizar	El progreso en el telefono no se puede sincronizar al escritorio

Si tu Granja de Tomates es solo una herramienta personal, esto puede no ser un problema. Pero si quieres que los usuarios inviertan a largo plazo y acumulen datos, se necesita una solucion mas confiable.

4.4.2 Opcion 1: Sincronizacion en la Nube (Recomendada)

La solucion mas confiable es sincronizar datos a una base de datos en la nube. Para PWAs, Supabase es una excelente opcion - proporciona una base de datos PostgreSQL, suscripciones en tiempo real y autenticacion, y tambien ofrece un nivel gratuito.

Idea de implementacion:

1. Inicio de sesion de usuario: usar email o inicio de sesion social para establecer la identidad del usuario
2. Sincronizacion automatica de datos: cada operacion guarda automaticamente en la nube
3. Sin conexion primero: la aplicacion sigue funcionando sin conexion, luego se sincroniza automaticamente cuando la red regresa
4. Sincronizacion entre dispositivos: el progreso en el telefono esta disponible inmediatamente en el escritorio

Ejemplo de Prompt:

Por favor ayudame a migrar el almacenamiento de datos de la Granja de Tomates desde localStorage a sincronizacion en la nube con Supabase:

**Requisitos funcionales**
- Agregar inicio de sesion de usuario (email + contrasena o inicio de sesion con Google)
- Guardar datos de usuario (puntos, nivel, estado de tierras de cultivo) en la base de datos Supabase
- Seguir funcionando sin conexion, y sincronizar automaticamente cuando la red se recupere
- Soportar sincronizacion entre dispositivos, para que los cultivos plantados en el telefono tambien puedan verse en el escritorio

**Stack tecnologico**
- Usar cliente @supabase/supabase-js
- Implementar actualizaciones optimistas (actualizar UI primero, luego sincronizar a la nube)
- Agregar un simple indicador de estado de sincronizacion

Ventajas:

• Los datos no se perderan; los usuarios solo necesitan iniciar sesion nuevamente al cambiar de dispositivo
• El nivel gratuito es suficiente para proyectos personales
• Soporta suscripciones en tiempo real, dando buena experiencia de sincronizacion entre dispositivos

Desventajas:

• Requiere registro/inicio de sesion de usuario, agregando friccion de uso
• Necesita conexion de red para realizar la sincronizacion

4.4.3 Opcion 2: Exportar / Importar Copia de Seguridad

Si no deseas agregar un servicio backend, un compromiso mas simple es copia de seguridad y restauracion manual.

Idea de implementacion:

1. Exportar: empaquetar datos de la granja como un archivo JSON y dejar que los usuarios lo descarguen
2. Importar: los usuarios pueden seleccionar un archivo JSON previamente exportado para restaurar datos
3. Recordatorio automatico: recordar a los usuarios que hagan copias de seguridad periodicamente

Ejemplo de Prompt:

Por favor agrega funcionalidad de copia de seguridad de datos a la Granja de Tomates:

**Exportar**
- Agregar un boton "Exportar Datos" en la pagina de configuracion
- Empaquetar todos los datos en localStorage en un archivo JSON
- Descargarlo automaticamente al dispositivo del usuario

**Importar**
- Agregar un boton "Importar Datos" que acepte un archivo JSON
- Validar formato de archivo antes de restaurar
- Mostrar una advertencia antes de importar porque sobrescribe los datos actuales

**Recordatorios automaticos**
- Si el usuario no ha hecho copia de seguridad en mas de 7 dias, mostrar un recordatorio amigable

Ventajas:

• Simple de implementar, no se requiere servicio backend
• Los usuarios tienen control total sobre sus propios datos
• Puede transferirse entre dispositivos compartiendo el archivo exportado

Desventajas:

• Requiere operacion manual, por lo que la experiencia no es fluida
• Si el usuario olvida hacer copia de seguridad, los datos aun pueden perderse

4.4.4 Opcion 3: Sincronizacion de Extension del Navegador (Para Usuarios de Chrome)

Si tu PWA esta dirigida principalmente a usuarios de Chrome, puedes considerar Chrome Storage Sync API. Este es un servicio de almacenamiento sincronizado entre dispositivos proporcionado por Chrome, donde los datos se sincronizan automaticamente con la cuenta de Google del usuario.

Nota: esto requiere empaquetar la PWA tambien como una extension de Chrome, lo cual es mas adecuado para desarrolladores con experiencia tecnica.

4.4.5 Estrategia de Eleccion Recomendada

Escenario	Solucion Recomendada
Herramienta personal ligera	solo localStorage es suficiente
Quieres evitar perdida de datos, pero no quieres demasiada complejidad	Exportar / importar copia de seguridad
Producto oficial con mejor experiencia de usuario	Sincronizacion en la nube con Supabase
Principalmente para usuarios de Chrome	Chrome Storage Sync

Para una aplicacion como la Granja de Tomates, mi sugerencia es:

1. Etapa MVP: comenzar con localStorage para verificar la idea del producto rapidamente
2. Etapa de iteracion: agregar exportar / importar copia de seguridad para que los usuarios tengan una red de seguridad de datos
3. Etapa madura: integrar Supabase para lograr verdadera sincronizacion en la nube

Recuerda: mejora progresiva es la filosofia central de PWA. Primero haz que la aplicacion funcione, luego agrega gradualmente capacidades mas avanzadas.

5 Desplegar en Linea

PWA debe ejecutarse bajo HTTPS para funcionar correctamente. La buena noticia es que las principales plataformas de despliegue ahora proporcionan HTTPS gratuito automaticamente. Usaremos Vercel como ejemplo (tambien podrias usar Netlify o GitHub Pages).

5.1 Desplegar en Vercel

Paso 1: Instalar la herramienta de despliegue

Por favor ayudame a instalar la herramienta de despliegue de Vercel

Paso 2: Desplegar el proyecto

Por favor ayudame a desplegar este proyecto en Vercel. El nombre del proyecto es tomato-farm-pwa

La IA manejara los pasos de despliegue automaticamente. Solo necesitas:

• elegir tu cuenta
• confirmar la creacion de un nuevo proyecto
• mantener las otras opciones en los valores predeterminados

Despues de esperar unas decenas de segundos, Vercel construira y desplegara tu proyecto automaticamente. Cuando termine, obtendras una URL HTTPS como https://tomato-farm-pwa.vercel.app.

Paso 3: Verificar la PWA

Abre la URL desplegada en tu navegador, y deberias ver:

1. un icono de instalacion aparece en el lado derecho de la barra de direccion
2. en DevTools -> Application -> Manifest, tu informacion de aplicacion configurada como el nombre "Granja de Tomates"
3. en la pestana Service Workers, el Service Worker mostrado como activado

5.2 Desplegar con GitHub Pages (Alternativa)

Si prefieres GitHub Pages, necesitas configuracion de ruta adicional:

Por favor ayudame a modificar la configuracion para que el proyecto pueda desplegarse en GitHub Pages.
Mi nombre de repositorio es tomato-farm-pwa, asi que ajusta la configuracion de ruta en consecuencia.

Luego envia la salida de compilacion a la rama gh-pages de tu repositorio de GitHub.

6 Instalar la PWA en un Telefono

Esta es la parte mas emocionante - convertir tu pagina web de la Granja de Tomates en una "aplicacion" en tu telefono.

6.1 Instalar en Android

1. Abre la URL de tu PWA Granja de Tomates desplegada en el navegador Chrome de tu telefono
2. Chrome puede mostrar automaticamente un banner de sugerencia de "Agregar a pantalla de inicio" - simplemente haz clic en el
3. Si no se muestra automaticamente, toca el menu de tres puntos en la esquina superior derecha -> Instalar aplicacion o Agregar a pantalla de inicio
4. Confirma la instalacion, y un icono de la aplicacion Granja de Tomates aparecera en la pantalla de inicio de tu telefono

Abrelo y notaras que se ejecuta en modo de pantalla completa, sin la barra de direccion del navegador ni botones de navegacion, luciendo casi exactamente como una aplicacion nativa. Ahora puedes comenzar a enfocarte y cultivar en cualquier momento.

6.2 Instalar en iPhone

En iOS, PWA solo puede instalarse a traves del navegador Safari (otros navegadores no soportan la instalacion):

1. Abre la URL de tu PWA Granja de Tomates desplegada en Safari
2. Toca el boton Compartir en la parte inferior (cuadrado con flecha hacia arriba)
3. En el menu, elige Agregar a pantalla de inicio
4. Dale un nombre a la aplicacion y toca Agregar

A partir de iOS 26, todos los sitios web agregados a la pantalla de inicio se abriran en modo de aplicacion independiente por defecto, lo cual es una mejora importante.

Limitaciones conocidas en iOS:

• Las notificaciones push requieren iOS 16.4 o superior, y la PWA ya debe estar agregada a la pantalla de inicio
• Background Sync no es soportado
• El espacio de almacenamiento es mas limitado que en Android

6.3 Auditar Tu PWA con Lighthouse

Google proporciona una herramienta llamada Lighthouse, que puede puntuar tu PWA. Abre Chrome DevTools (F12) -> Lighthouse -> marca "Progressive Web App" -> haz clic en "Analizar carga de pagina".

Una PWA Granja de Tomates calificada deberia obtener una puntuacion perfecta en la categoria PWA. Si no es asi, Lighthouse te dira las razones exactas y sugerira correcciones.

7 Notas Finales

Felicidades! Has construido exitosamente una PWA de granja Pomodoro que puede instalarse tanto en escritorio como en movil. Repasemos lo que hicimos:

1. Creamos una aplicacion web Granja de Tomates con Vite + React
2. Agregamos Service Worker y Manifest a traves de vite-plugin-pwa
3. La desplegamos en Vercel para obtener una URL HTTPS
4. La instalamos exitosamente tanto en escritorio como en movil, y probamos la capacidad sin conexion

Ahora tu PWA Granja de Tomates ya puede lograr:

• Cultivo enfocado: ayudar a los usuarios a mantenerse enfocados a traves del mecanismo Pomodoro
• Recompensas gamificadas: usar plantar, subir de nivel y desbloquear para motivar el uso repetido
• Usabilidad sin conexion: incluso sin red, los usuarios aun pueden enfocarse, plantar y gestionar su granja
• Instalacion multiplataforma: desarrollar una vez e instalar en multiples tipos de dispositivos

El encanto de PWA es su "progresividad" - no necesitas hacerlo perfecto desde el principio. Primero haz que el sitio web sea instalable y utilizable sin conexion, luego agrega gradualmente capacidades avanzadas como notificaciones push y sincronizacion en segundo plano.

Direcciones avanzadas:

• Notificaciones push: usar Push API + Notification API para recordar a los usuarios cuando termina un Pomodoro, o cuando los cultivos estan listos para cosechar
• Sincronizacion en segundo plano: usar Background Sync API para sincronizar datos de la granja a la nube despues de que la red regrese
• Estrategias de almacenamiento en cache mas inteligentes: usar diferentes estrategias de Workbox como CacheFirst, NetworkFirst y StaleWhileRevalidate para diferentes tipos de assets
• Publicar en tiendas de aplicaciones: usar PWA Builder para empaquetar la PWA Granja de Tomates en un APK de Android o aplicacion de Microsoft Store
• Funciones sociales: agregar un sistema de amigos para que los usuarios puedan visitar las granjas de otros e intercambiar cultivos

Una base de codigo, todas las plataformas - este es el poder de PWA. Enfocate, planta y crece!

Referencias

• Documentacion Oficial de Vite PWA
• Guia de Desarrollo PWA de Google
• Documentacion de MDN Web App Manifest
• Resumen de Estrategias de Almacenamiento en Cache de Workbox
• PWA Builder - Publicar PWA en Tiendas de Aplicaciones