Configuración PWA

GCM es una Aplicación Web Progresiva, lo que significa que miembros y personal pueden instalarla en la pantalla de inicio de su teléfono o escritorio y ejecutarla como una aplicación nativa — a pantalla completa, con un ícono, incluso con soporte sin conexión en planes Growth+. La página App PWA (barra lateral → App PWA) es donde le dices al navegador cómo debe verse y comportarse la aplicación instalada.

Abre la página PWA

Haz clic en App PWA en la barra lateral. La página tiene cinco tarjetas, de arriba a abajo: Identidad de la app, Ícono de la app, Tema, Modo de visualización, Notificaciones push e Instalar app.

Identidad de la app

Estos tres campos pueblan el manifest de PWA, que el navegador lee al ofrecer "Instalar app".

Nombre de la app

El nombre completo de la app mostrado en el aviso de instalación y (en algunas plataformas) debajo del ícono de la pantalla de inicio. Predetermina al nombre de tu organización. Mantenlo bajo 45 caracteres o se trunca en Android.

Nombre corto

La versión más corta usada cuando no hay espacio para el nombre completo — generalmente debajo del ícono de la pantalla de inicio en iOS y Android. Predetermina a la primera palabra del nombre de tu organización. Apunta a 12 caracteres o menos.

Descripción

Una descripción de un párrafo de lo que hace la app. Mostrada en algunos diálogos de instalación de navegadores. Opcional pero ayuda a los miembros a entender qué están instalando.

Ícono de la app

Se requieren dos tamaños: 192×192 y 512×512. Ambos deberían ser PNGs (JPEG y WebP también son aceptados pero PNG renderiza más confiablemente en los lanzadores).

Pasos de subida:

1. Haz clic en Subir bajo el tamaño que quieras establecer.
2. Elige una imagen cuadrada. El archivo se sube al bucket de almacenamiento pwa-icons de tu organización y la URL del manifest se actualiza inmediatamente — sin paso separado de guardado para íconos.
3. Repite para el otro tamaño.

TIP

Usa el mismo diseño en ambos tamaños — no intentes meter más detalle en 512 solo porque hay más espacio. Los lanzadores muestran estos en tamaños radicalmente diferentes (el 192 podría renderizar a 48px, el 512 a 256px), así que un solo diseño limpio que escala es lo que quieres.

Límites de archivo:

• Tamaño máximo: 2 MB por ícono.
• Aceptado: image/png, image/jpeg, image/webp.

Si subes una imagen con forma incorrecta, el lanzador la centra en un fondo coloreado (tu color de tema) — así que un logo circular sobre un fondo blanco cuadrado funciona bien, pero un logo horizontal se enmarca.

Tema

Dos colores controlan los theme_color y background_color del manifest.

Color del tema

El color que el OS usa para la barra de estado (en Android) y la barra de título (en ventanas de escritorio instaladas). Elige algo que coincida con tu primario de marca — muchas iglesias simplemente pegan el mismo código hex que usaron en Marca → Colores.

Color de fondo

El color mostrado durante el breve momento entre tocar el ícono de la pantalla de inicio y el primer renderizado de la app. Si un miembro ve un destello blanco en cada arranque en frío y te molesta, establece el color de fondo a tu primario para que el destello esté en la marca.

Ambos campos aceptan un código hex y tienen una muestra del selector de color. Los valores se guardan en app_settings bajo pwa_theme_color / pwa_background_color.

Modo de visualización

Cómo se ve la app instalada cuando se lanza. Tres opciones:

Modo	Comportamiento
Standalone (predeterminado)	Se ve como una app nativa — sin el cromo del navegador, tu ícono en la barra de título. Mejor para la mayoría de las organizaciones.
Fullscreen	Pantalla completa real — ni siquiera barra de estado. Útil para tablets de check-in kiosko.
Minimal UI	Mantiene una barra de URL estilo navegador delgada en la parte superior. Útil si los miembros frecuentemente necesitan copiar URLs desde dentro de la app.

Para el 99% de las organizaciones, Standalone es la elección correcta. Cambia solo si tienes una razón específica.

Notificaciones push

Activa Activar push si quieres que la app envíe notificaciones web push a dispositivos instalados (Android y escritorio — iOS soporta push solo en PWAs instaladas en iOS 16.4+).

Cuando se activa:

• La primera vez que un miembro abre la app instalada, se le pide permitir notificaciones.
• Los nodos de flujo de trabajo y recordatorios pueden dirigir Push como canal.
• El campo vapid_public_key muestra la clave pública VAPID de tu organización (solo lectura) — los proveedores push usan esto para autenticar suscripciones.

WARNING

El par de claves VAPID se genera del lado del servidor la primera vez que se activa push. Está vinculada a tu organización permanentemente — si alguna vez la rotas, cada dispositivo instalado tiene que volver a suscribirse (los miembros vuelven a recibir el aviso). No rotes a menos que tengas que hacerlo.

Instalar app

La última tarjeta muestra el botón de instalar en sí. Si tu navegador soporta beforeinstallprompt, el botón está activado y puedes instalar GCM como una app justo desde esta pantalla.

Si el navegador no soporta el aviso programático (Safari en iOS no), la tarjeta muestra instrucciones manuales en su lugar — típicamente "toca Compartir, luego Agregar a pantalla de inicio" para iOS, o "abre el menú del navegador y selecciona Instalar app" para Chrome de escritorio.

Una vez instalada, la tarjeta detecta el modo standalone y muestra "La app ya está instalada en este dispositivo" con una marca verde — útil para confirmar que la instalación funcionó antes de guiar a un miembro a través de ella.

Qué se guarda dónde

Todas las configuraciones PWA van a app_settings con claves pwa_*:

• pwa_app_name, pwa_short_name, pwa_description
• pwa_icon_192, pwa_icon_512 (URLs de almacenamiento)
• pwa_theme_color, pwa_background_color
• pwa_display_mode
• pwa_push_enabled
• vapid_public_key (solo lectura, generado del lado del servidor)

El frontend lee estos en el inicio de la app y los escribe en /manifest.webmanifest para que el navegador vea los valores correctos sin un viaje de ida y vuelta adicional.

Actualizar una app instalada

Las PWAs se actualizan automáticamente en el siguiente lanzamiento cuando se despliega una nueva compilación. Los miembros no ven un aviso de actualización — el nuevo código simplemente se ejecuta la próxima vez que abren la app. Si has cambiado el ícono, los miembros pueden necesitar eliminar y reinstalar para ver el nuevo ícono en su pantalla de inicio (el lanzador lo almacena en caché).

Errores comunes

"Mi ícono se ve borroso en iOS." iOS requiere específicamente el 512×512. Si solo está establecido 192, iOS lo escala y se difumina. Siempre sube ambos tamaños.

"Las notificaciones push nunca llegan." Dos cosas para verificar: (1) push está activado aquí, Y (2) la app instalada del destinatario se ha abierto al menos una vez en el dispositivo objetivo con notificaciones permitidas. Las suscripciones push son por-dispositivo-por-navegador — instalar en el teléfono no le da push a tu portátil.

"Cambié el color del tema y la barra de estado no se actualizó." El OS lee el color del tema en el momento de la instalación y lo almacena en caché. Reinstala la app en el dispositivo afectado para recoger el nuevo color, o espera el siguiente refresco de manifest impulsado por el navegador (que puede tomar días).

Próximos pasos

• Marca — establece tu color primario primero; reutilízalo como el tema PWA.
• Recordatorios — el canal push puede disparar recordatorios de eventos.
• Canales — push aparece en la lista de canales una vez activado.