Notificaciones y tarjetas

Una notificación es multiparte, con JSON como base. Cada notificación lleva varias representaciones del mismo contenido, y cada cliente usa la mejor que soporta. La idea viene del e-mail, sin sus problemas (HTML libre, rastreo, phishing visual).

{
  "summary": "Deploy finished: api-v2 (3m12s)",
  "card": { "title": "Deploy", "blocks": [] },
  "rich": { "html_ref": "…", "height": 480 }
}

Parte	Obligatoria	Dónde aparece
`summary`	Sí	Push, reloj, dispositivos pequeños, la lista de la bandeja
`card`	Recomendada	App, app web, clientes open source
`rich` (HTML)	No; siempre con `card` como alternativa	Solo app y web, en sandbox

Los 10 componentes de la tarjeta

Una tarjeta tiene un title opcional, un theme opcional (color de acento accent en #RRGGBB y un icon, URL o emoji corto) y de 1 a 40 bloques.

Bloque	Uso	Campos principales
`text`	Párrafo (texto plano, hasta 4000 caracteres)	`text`
`metric`	Un número con etiqueta y variación	`label`, `value`, `unit`, `delta` (`"+18%"`)
`chart`	Gráfico de líneas o barras a partir de series	`kind` (`line`/`bar`), `x`, `series` (hasta 6)
`table`	Columnas y filas	`columns`, `rows` (hasta 200)
`list`	Elementos con icono opcional	`items[].text`, `items[].icon`
`image`	Una imagen por URL	`src`, `alt`
`progress`	Barra de progreso y pasos (ideal para tarjetas vivas)	`value` (0..1), `steps`, `current`
`buttons`	Enlaces y acciones de plugin, no decisiones (hasta 4)	`buttons[].label`, `url` o `action`
`options`	Muestra una pregunta `yesno`, `single` o `multi`	`question_id`
`input`	Muestra una pregunta `text`, `voice`, `number` o `date`	`question_id`

Esta tarjeta usa varios de ellos, tal como la muestra la app web:

Push / relojDaily sales: 1,284 orders (+18%)

Daily sales

Orders1284+18%

Revenue48,210 USD+9%

MonSun

This week Last week

Region	Orders	Change
BR	612	+21%
US	433	+15%
EU	239	—

Ejemplos de tarjetasCada componente, con la vista previa, la llamada del SDK y el JSON.

Regla de seguridad (innegociable)

La decisión siempre la muestra la app, nunca el HTML.

Los botones de aprobación, las opciones, los campos y la solicitud de biometría son nativos y se declaran en el JSON.
El HTML corre en una WebView aislada, sin red por defecto y sin acceso a la app.
El HTML solo puede llamar a notific.reply() con acciones ya declaradas en el JSON, y la confirmación final aparece en una pantalla nativa que el remitente no controla.

El renderizador web también trata todo texto como texto plano (sin inyección de HTML ni markdown), abre solo enlaces http(s) en una pestaña nueva con noopener, acepta solo imágenes http(s) o data:image raster, y solo colores de acento #RRGGBB.

Adaptación por canal

El mismo contenido se convierte en texto en un push, en una tarjeta completa en la app y en un resumen de dos líneas en un dispositivo pequeño. Las tarjetas vivas actualizan la misma tarjeta en lugar de crear notificaciones nuevas.