Añadir Insignias de Icono y un Manifiesto a tu aplicación Xojo Web

A continuación encontrarás traducido al castellano el artículo de Ricardo Cruz publicado originalmente en el blog oficial de Xojo.

Con macOS Sonoma los usuarios pueden añadir tus apps Xojo Web como una App autocontenida. Echemos un ojo a lo que proporciona.

Antes de entrar en materia, merece la pena mencionar que esta es una novedad en Safari 17 pero que forma parte del estándar W3C; lo que significa que podría funcionar también con otras combinaciones de navegadores y sistemas operativos.

Una de las mayores ventajas de crear apps Web es que tus usuarios no necesitan actualizarlas manualmente. Una vez que despliegas la nueva versión, todo lo que necesitas es refrescar el navegador (¡y Xojo lo maneja de forma automática por ti!). Si estuviésemos hablando de una gran compañía con cientos de equipos, resultaría fácil ver cómo una web basada en una intranet reduciría los costes de mantenimiento.

Paso a paso, los proveedores de navegadores están permitiendo a los desarrolladores acceder a las API que tradicionalmente estaban reservadas a los desarrolladores de apps de escritorio o móviles.

Añadir Insignias de Icono

Cuando los usuarios añaden tu aplicación como una Aplicación Web a sus Dock, tendrás la oportunidad de definir una insignia o etiqueta de tipo numérico. Esta permite a los usuarios conocer cuántas veces se ha requerido la atención del usuario, por ejemplo.

Llamadas perdidas, notificaciones de mensajes no leídos o los minutos pendientes en una sesión de Pomodoro. El significado del valor de la etiqueta depende de ti.

Esta API web es muy fácil de usar en Xojo. Añade un par de métodos públicos a tu objeto Session, llamados SetBadge y ClearBadge.

SetBadge (amount As Integer)

Var js() As String

js.Add("if ('setAppBadge' in navigator) {")
js.Add("  navigator.setAppBadge(" + amount.ToString + ");")
js.Add("}")

ExecuteJavaScript(String.FromArray(js))

ClearBadge

Var js() As String

js.Add("if ('clearAppBadge' in navigator) {")
js.Add("  navigator.clearAppBadge();")
js.Add("}")

ExecuteJavaScript(String.FromArray(js))

¡Y eso es todo! Cuando necesites mostrar una etiqueta para dicho usuario sólo has de llamar Session.SetBadge(42), por ejemplo.

Creando un archivo Manifest

Si bien no se requiere, un archivo de manifiesto para una app web te permite ajustar en cierta medida el aspecto de tu aplicación cuando se añade como una app de Dock o Home.

Para permitir que el sistema operativo sepa que existe un archivo Manifest, es necesario añadir un nuevo header HTML. Dirígete a App -> HTML Header y añade esta línea:

	<link rel="manifest" href="/manifest.json">

Vamos a rellenar los contenidos. Hemos de manejar ese URL “/manifest.json”. Añade un nuevo Manejador de Evento a tu objeto App, selecciona el evento “HandleURL”.

Este es un ejemplo de cómo puedes crear dicho archivo:

Select Case request.Path
Case "manifest.json"
Var manifest As New JSONItem
manifest.Value("display") = "standalone" // Remove back/forward buttons
manifest.Value("name") = "My Xojo Application"
manifest.Value("short_name") = "Xojo App"

response.MIMEType = "application/json"
response.Status = 200
response.Write(manifest.ToString)
Return True
End Select

Puedes ver el listado completo de parámetros disponibles en este sitio web:

Manifiestos de App Web

Depurar Apps Web

¡Hey! ¿Dónde están mis herramientas de Desarrollador?

Puedes depurar tu app web directamente desde la app; pero si lo necesitas, todavía puedes abrir Safari, acceder al menú Desarrollador y acceder a la instancia Deverloper Tools para cualquier app Web que esté abierta:

¡Y eso es todo!

Si bien el desarrollo de una app Web aun está lejos de lo que te proporciona una app de escritorio, por lo menos ahora se cierra este margen algo más.