Windows Hosted Web Apps

No hay nada más multiplataforma que una aplicación web. Solo se necesita que un dispositivo tenga un browser moderno para que cualquier aplicación que hagamos funcione en él.

web-app
Arquitectura típica de una aplicación Web.

Pero no solo necesitamos que la aplicación funcione, sino también que la interfaz del usuario se adapte a las dimensiones y la resolución de los distintos dispositivos. Actualmente hay muchos frameworks CSS enfocados en este aspecto: hacer que las aplicaciones web sean Responsive.

Sin embargo, hay ciertas cosas que son difíciles de lograr con una aplicación Web. Los obstáculos más importantes están relacionados con la seguridad ya que, por razones lógicas, el browser restringe a los sitios respecto de las acciones que pueden llevar a cabo, de los servicios que puede usar y de la información que pueden obtener del dispositivo donde se está mostrando.

¿Y si en vez de que el usuario ingrese a nuestro sitio utilizando un browser, a travez de una URL, empaquetamos el browser junto con nuestro código HMTL, CSS y JavaScript y lo convertimos en una aplicación para una plataforma específica?

native-app
Arquitectura de una aplicación nativa basada en tecnologías web.

Al instalar la aplicación, podemos solicitarle al usuario que nos dé acceso a todo lo que necesitemos: archivos personales, fotos, contactos e incluso información de pago. Ahora solo necesitamos que “el browser” (entre comillas), nos permita de alguna forma acceder a ese contenido desde nuestro código JavaScript.

PhoneGap (una distribución de Apache Cordova, ahora propiedad de Adobe) fue el primer framework para hacer esto que conocí, hace ya varios años. Parecía mágico, (casi) el mismo código y funcionaba en Android, Black Berry, Windows Phone y hasta el viejo Symbian S60. Si quieren saber mas, pueden ver el post de Martin Ferrigno al respecto.

Si bien existen herramientas para desarrollar aplicaciones con Apache Cordova utilizando Visual Studio como IDE. En el mundo Microsoft, por ahora (y solo por ahora), solo Windows importa. Pero aún dentro de Windows existen distintas plataformas: Desktop, Phone, X-Box, dispositivos IoT. Fue así que desde Windows 8 en adelante existe Universal Windows Platform (UWP), una serie de tecnologías que utilizan los lenguajes (C#, VisualBasic.NET, C++) y frameworks (XAML, DirectX) existentes en el ambiente de .NET para adaptar las aplicaciones a los distintos dispositivos.

uwp
Universal Windows Platform

A partir de la llegada de Windows 10, una nueva combinación de tecnologías es posible: HTML + Javascript + CSS, con lo cual la aplicación adopta la arquitectura que venimos hablando. Pero hay una variante muy interesante: la llamada Windows Hosted Web App. ¿De que se trata? Si ya tenemos una aplicación web responsive, podemos hacer que el sitio se muestre en una aplicación de Windows, y otorgandole los permisos necesarios, podemos utilizar las las APIs de Windows desde el código JavaScript. Una mezcla de las arquitecturas de las que hablabamos al principio: es una aplicación web tradicional, pero mostrada en un browser (que en este caso es Edge) embebido y con acceso a la API del sistema operativo.

Hosted Web Apps
Hosted Web Apps

Así, utilizando el mismo código de una aplicación Web responsive, con unas pocas lineas de código, podemos saber cuando la aplicación se está ejecutando cómo una aplicación de Windows, y así hacer uso de la API.

if (typeof Windows !== 'undefined' &&
    typeof Windows.UI !== 'undefined' &&
    typeof Windows.UI.Notifications !== 'undefined') {
      //Call Windows.UI.Notifications
}

Algunas de las funcionalidades de la API de Windows que se pueden utilizar son las siguientes:

  • Notificaciones
  • Crear y actualizar Live Tiles
  • Hacer uso de los sensores del dispositivo: camara, microfonos, ubicación, etc.
  • Crear eventos en el calendario
  • Realizar llamadas

Una aplicación simple de ejemplo

Para hacer una pequeña prueba, vamos a utilizar la aplicación web para moviles del Servicio Meteorológico Nacional, que es responsive. ¿Qué mas útil que un aplicación para ver el pronostico del clima?

1. Crear un proyecto en Visual Studio.
1. Crear un proyecto en Visual Studio.
2. Setear la página de inicio y las opciones básicas.
2. Setear la página de inicio y las opciones básicas. También debemos borrar los archivos HTML y CSS que crea Visual Studio por defecto en el proyecto.
3. Indicar el/los dominios que la aplicación va a mostrar. Cualquier link que no esté incluido dentro de este dominio, se abrirá en el navegador.
3. Indicar el/los dominios que la aplicación va a mostrar. Cualquier link que no esté incluido dentro de este dominio, se abrirá en el navegador.

Y así conseguimos la aplicación desktop funcionando:

app-running

Cómo veníamos diciendo, esta aplicación funciona en cualquier dispositivo con Windows. Obviamente, como no tenemos acceso al código, no podemos hacer uso de la API de Windows en esta aplicación, pero ya es muy buen punto de partida. Desde Visual Studio podríamos publicarla en Windows App Store tal como está y cualquiera podría instalarla.

Tags

Access top talent now!

Related

Get in Touch