Hosted Web Apps: Tu Web en UWP

Últimamente una de las opciones más populares a la hora realizar aplicaciones Universal Windows Platform (UWP) es realizar una Hosted Web App, por lo que no es de extrañar que algunas de las UWP que hay en la Windows Store estén construidas con esta tecnología, y no hablamos de aplicaciones cualquiera, hablamos de aplicaciones como Yahoo Mail, Shazam o Microsoft’s Office Sway entre otras.

¿Qué es una Hosted Web App?

Una Hosted Web App no es más que un mecanismo que nos proporciona Microsoft para poder empaquetar nuestra Web en una UWP, es decir, una Hosted Web App es un contenedor de aplicaciones.

Así que el mismo código HTML/CSS/JavaScript se ejecuta tanto en nuestra web como en nuestro dispositivo como si de una app de la Store se tratara.

¿Qué debemos tener en cuenta?

A la hora de querer utilizar esta tecnología debemos tener varias cosas presentes:

Cuando nuestra aplicación esté ejecutándose en la UWP, no está haciéndolo dentro del browser por lo que características propias de este como los bookmarks o back button no están presentes.
Es preferible que la Web sea una Single Page Application (SPA), dado que estas, si están bien implementadas, tendrán los controles de navegación dentro del body de la web y no se basará en los controles del browser como el anteriormente mencionado back button.
No utilizar lógica que dependa del mouse, como por ejemplo el evento mouse-over para mostrar un menú. Se debe tener en cuenta que en el momento que esta aplicación se esté ejecutando en el dispositivo como una Windows Store App los eventos relacionados con el mouse no se ejecutarán.
La Web debe ser Responsive, es decir debe adaptarse a la resolución de la pantalla donde esté ejecutándose.

Todas estas consideraciones se deben tener en cuenta a la hora de que el usuario no note la diferencia entre una UWP nativa y una UWP Hosted Web App.

Creación de una Hosted Web App desde Visual Studio

A continuación, vamos a ver paso a paso como crear una Hosted Web App de la web http://contosotravel.azurewebsites.net/ que Microsoft tiene disponible para realizar pruebas.

1.Abrimos Visual Studio y Creamos un proyecto Hosted Web App.

2. Seleccionamos las versiones de Windows 10 que daremos soporte.

3.Al crearse el proyecto observamos que se crear un archivo “msapp-error.html” con su correspondiente JavaScript y CSS. Este archivo nos permitirá mostrar los mensajes de error customizados para nuestra app.

4.Abrimos el archivo package.appmanifest y en Start Page ponemos: http://contosotravel.azurewebsites.net/

5.Vamos a la pestaña ContentURIs y la añadimos también.

6.Por último, ejecutamos y ya tenemos nuestra Hosted Web App.

¿Podemos acceder al hardware del dispositivo?

La respuesta es sí, lo único que debemos hacer es implementar las funcionalidades de acceso utilizando la Windows Apis.

Por ejemplo, si quisiéramos utilizar la cámara podríamos utilizar un código parecido a este:

If (typeof Windows !=’undefined’) {

var captureUI = new Windows.Media.Capture.CameraCaptureUI();

}

¿Solo puedo utilizar Visual Studio para crearlas?

La respuesta es NO, también puedes utilizar ManifoldJS, que nos permite crear Cross Hosted Web Apps, es decir nos generará la hosted web app para otros sistemas como Android o iOS.

En su web http://manifoldjs.com/ podéis ver más detalle de cómo funciona.

Conclusión

Las Hosted Web Apps es una buena solución si quieres tener presencia en las Stores con una aplicación con un esfuerzo mínimo, compartiendo el código al máximo. Solo se debe tener en cuenta que tu web debe estar preparada para poder ejecutarse en Hosted Web App.

Referencias

https://microsoftedge.github.io/WebAppsDocs/en-US/win10/HWA.htm

https://blogs.windows.com/buildingapps/2016/02/17/building-a-great-hosted-web-app/

Descubre cómo SOGETI puede ayudarte en nuestra web.

Robert Bermejo