Saltar al contenido principal

Apps para el celular (PWA Builder)

¿Para qué sirve?​

Te permite empaquetar tu sitio como una app que tus usuarios instalan desde el navegador del teléfono, sin pasar por Google Play ni la App Store. Se le llama PWA (Progressive Web App): una vez instalada, aparece con su ícono en la pantalla principal, arranca en pantalla completa, funciona sin conexión en lo que ya visitó y puede recibir notificaciones push.

En la misma instalación puedes tener varias PWAs a la vez: una para el sitio público (clientes que reservan), otra para el portal del profesional, otra para el admin de la sucursal. Cada una con su nombre, su ícono y su alcance propio.

¿Cuándo lo necesitas?​

Cuando querés que la gente abra tu sistema desde un ícono, no desde un marcador del navegador, y sin construir una app nativa:

  • Un negocio con portal del cliente que quiere sentirse app (reservas, pedidos, seguimiento).
  • Un panel de operación que el equipo abre 20 veces al día — abrir un ícono es más rápido que buscar la pestaña.
  • Un sitio donde te importa que funcione sin conexión para lo básico (ver la próxima reserva, ver la lista del día).
  • Cuando querés avisar a los usuarios de cosas que pasan aunque no tengan el navegador abierto (una reserva confirmada, un pedido listo).

Si sólo necesitás mandar avisos por correo o WhatsApp, mira Notificaciones o WhatsApp.

Cómo activarlo​

  1. Entra a Agregar Sección → Tipo: Plugin y elige PWA Builder (también desde Configuración → Módulos). Sus tablas se crean solas la primera vez.
  2. Dale acceso a la sección al administrador en Roles y Permisos.

Configuración inicial​

En CMS → PWA Builder creá tu primera PWA con el botón + Nueva PWA y llenás cuatro pestañas:

1. Identidad — quién es y dónde vive​

  • Nombre — cómo se llama la app (ej. "Aurora Estética").
  • Nombre corto — el que aparece bajo el ícono en el celular (máx. 20 caracteres, ej. "Aurora").
  • Descripción — qué es, en una línea.
  • Slug (URL) — la ruta del manifest. Con aurora-cliente la app vive en /pwa/aurora-cliente/.
  • URL de inicio — dónde arranca al abrir el ícono (/reservar para clientes; /cms/mi-portal para el profesional).
  • Alcance (scope) — qué rutas pertenecen a esta PWA. / = todo el sitio; /cms/ = sólo el panel. Si dos PWAs matchean una ruta, gana la de scope más largo.
  • Estado — Activa o Escondida. Escondida deja de anunciarse pero sigue funcionando para los que ya la instalaron.

2. Apariencia — cómo se ve​

  • Modo de display — Standalone (como app, sin barra del navegador), Fullscreen, Minimal UI o Como pestaña.
  • Orientación — Vertical, Horizontal o Cualquiera.
  • Color de tema y fondo — los que pintan la barra de estado y la pantalla de arranque.
  • Íconos — subís una imagen cuadrada de al menos 512×512 y el plugin genera automáticamente las 10 medidas que Android e iOS necesitan (72, 96, 128, 144, 152, 180, 192, 384, 512, 1024) más las variantes maskable para el ícono adaptativo de Android.
La imagen del ícono

Subí el logo sin margen alrededor. El plugin ya deja 20% de margen en la versión maskable (lo que Android necesita para el círculo o el squircle); si tu logo ya tiene margen, el resultado se ve chiquito.

3. Offline — funcionamiento sin conexión​

  • Página offline — la que se muestra cuando no hay red y no está en caché (ej. /offline, con un mensaje bonito).
  • URLs a precachear — las que se descargan al instalar la PWA, para que la primera visita ya funcione sin red.
  • Estrategias de cache (JSON) — cómo responder cada tipo de URL:
    • cache-first — sirve del caché si lo tiene, va a la red si no. Bueno para imágenes y CSS.
    • network-first — pregunta a la red primero; si falla, va al caché. Bueno para páginas dinámicas.
    • stale-while-revalidate — devuelve el caché al toque y en paralelo pide la versión fresca. Bueno para listas que rara vez cambian.
  • Background sync — rutas que se reintentan solas cuando el usuario recupera conexión. Ideal para reservas que se enviaron sin red.

4. Push — notificaciones al celular​

  • Escribís título, mensaje y URL a la que ir cuando el usuario tocá la notificación.
  • El plugin se encarga del resto: firma con VAPID (las claves se generan solas al instalar), habla con FCM (Chrome/Edge), Mozilla push (Firefox) o APNs (Safari) según el navegador que suscribió, y marca las suscripciones caducadas.
Antes de mandar el primer push

El usuario tiene que haber instalado la PWA en su celular y aceptado el permiso de notificaciones cuando el navegador se lo pregunte. Sin eso no hay suscripción y no llega el push.

Cómo se usa día a día​

Después del setup inicial, el día a día es corto:

  • Los usuarios instalan la PWA ellos mismos:
    • Android (Chrome) — aparece un banner "Agregar a la pantalla principal"; también desde el menú ⋮ → "Instalar app".
    • iPhone (Safari) — botón compartir → "Añadir a la pantalla de inicio". Chrome en iPhone también dispara el prompt de Safari por dentro.
  • Vos actualizás el sitio como siempre. El service-worker detecta el cambio en la próxima visita y actualiza en silencio.
  • Cuando querés avisar algo, entrás a la pestaña Push, escribís y mandás. Todo el que aceptó lo recibe.

Se conecta con​

Funciona solo, sin depender de nada.

  • Si tenés Sucursales, podés crear una PWA por sucursal (cada admin ve la suya).
  • Se lleva bien con Notification Manager: el push del navegador se suma al correo y al WhatsApp para el mismo evento.

Preguntas frecuentes​

¿Necesito HTTPS? Sí. El service-worker sólo carga en https o en localhost. Si tu sitio está detrás de un dominio real o un Cloudflare Tunnel, ya cumplís.

¿Puedo tener varias PWAs en el mismo sitio? Sí, es el modo por defecto. Cada una tiene su nombre, su ícono y su alcance. Un usuario puede tener las tres instaladas.

¿Cuánto ocupa la PWA en el celular? Menos de lo que pensás. Sólo el ícono y las URLs precacheadas. Chrome en Android reporta usualmente entre 1 y 5 MB.

¿Y si el usuario no acepta las notificaciones? La app sigue funcionando entera; sólo no recibe push. Puede darle permiso más adelante desde la configuración del navegador.

¿Puedo cambiar el ícono después? Sí. Subís una imagen nueva y el plugin regenera todas las medidas. La próxima visita al sitio actualiza el ícono en el home screen del celular.

¿Puedo hacer que abra offline? Sí — para eso está la pestaña Offline. Lo que precacheás está disponible sin conexión; el resto muestra tu página offline.

¿El push cifra el contenido del mensaje? En esta versión el push va sin payload cifrado — el título y el mensaje que ves en el celular los arma el service-worker cuando recibe el evento. El texto viaja seguro por el canal HTTPS del proveedor de push (Google, Mozilla, Apple), pero no está cifrado extremo-a-extremo.

¿Qué sigue?​

  • Notification Manager — para orquestar correos, WhatsApp y push desde un mismo lugar.
  • Sucursales — si querés una PWA por local.
  • Automatizaciones — para disparar un push cuando pasa algo en el sistema (una reserva confirmada, un pedido listo).