Crear aplicaciones web hospedadas

Artículo
02/16/2016

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]

Las aplicaciones web hospedadas son Universal Windows Platform applications (UWP apps) que te permiten aprovechar los flujos de trabajo web existentes y la implementación continua para publicar una aplicación web con capacidad de respuesta en la Tienda Windows. Puedes empezar con una dirección URL del sitio web preexistente, colocarla en el manifiesto de la aplicación y crear una aplicación con destino en la plataforma de Windows.Es así de fácil.

Información general

Puedes crear una aplicación web hospedada con Visual Studio o la interfaz de línea de comandos. Ambas opciones requieren que tengas un sitio web hospedado existente que puedas manipular con un manifiesto del paquete de la aplicación para describir cómo debería implementarse y ejecutarse como una aplicación web.

Las aplicaciones web hospedadas tienen acceso total a la plataforma, incluidas las llamadas a API de Windows en tiempo de ejecución directamente desde un script hospedado en un servidor, aprovechando la integración de Cortana y el uso de un proveedor de autenticación en línea. También se admiten aplicaciones híbridas, ya que puedes incluir código local para llamar desde el script hospedado y proporcionar fácilmente la navegación en aplicaciones entre páginas locales y remotas.

Aplicaciones híbridas

Tienes opciones para crear la aplicación para UWP. La aplicación puede diseñarse para que se descargue desde la Tienda Windows y hospedarse por completo en el cliente local. A esto normalmente se le denomina Packaged Web App. Esto te permite ejecutar la aplicación sin conexión en cualquier plataforma compatible. La aplicación también puede ser una aplicación web completamente hospedada que se ejecuta en un servidor web remoto. Normalmente se conoce como un Hosted Web App. Además, hay una tercera opción: la aplicación puede hospedarse parcialmente en el cliente local y parcialmente en un servidor web remoto. Llamamos a esta tercera opción un Hybrid app y normalmente se usa el componente WebView para hacer que el contenido remoto parezca contenido local. Las aplicaciones híbridas pueden incluir el código de HTML5, CSS y Javascript que se ejecuta como un paquete dentro del cliente de la aplicación local y conservar la posibilidad de interactuar con el contenido remoto.

manifoldjs y el manifiesto de la aplicación

Una manera sencilla de convertir tu sitio web en una aplicación para UWP es usar un app manifest y manifoldjs. El manifiesto de la aplicación es un archivo xml que contiene metadatos sobre la aplicación. Especifica puntos como el nombre de la aplicación, vínculos a recursos, el modo de visualización, las direcciones URL y otros datos que describen cómo se debería implementar y ejecutar la aplicación. manifoldjs hace que este proceso sea muy sencillo, incluso en los sistemas que no son compatibles con las aplicaciones web. Para obtener más información sobre su funcionamiento, visita manifoldjs.com. También puedes ver una demostración de manifoldjs como parte de esta presentación de aplicaciones web para Windows 10.

Incluir direcciones URL en el manifiesto de la aplicación

Puedes definir qué direcciones URL puede y no puede incluir la aplicación web hospedada. Para ello, establece reglas de URI de contenido de aplicación (ACUR) en el manifiesto del paquete de la aplicación. Las reglas deben incluir la página de inicio de la aplicación y otras páginas que quieras incluir como páginas de la aplicación. Opcionalmente, también puedes excluir determinadas direcciones URL.

Hay varias formas de especificar una coincidencia de URL en tus reglas:

Un nombre de host exacto
Se incluye un nombre de host para el que se incluya o excluya un URI con un subdominio cualquiera de ese nombre de host
Un URI exacto
Un URI exacto que pueda contener una propiedad de consulta
Una ruta de acceso parcial y un comodín para indicar una extensión de archivo concreta para una regla de inclusión.
Rutas de acceso relativas para reglas de exclusión

Si el usuario navega a una dirección URL que no se incluye en las reglas, Windows abre esa dirección URL de destino en un explorador.

Estos son algunos ejemplos de ACUR:

<uap:ApplicationContentUriRules>
      <uap:Rule Type="include" Match="https://example.com/" />
      <uap:Rule Type="include" Match="https://*.example.com/" />
      <uap:Rule Type="exclude" Match="https://example.com/excludethispage.aspx" />
</uap:ApplicationContentUriRules>

Llamar a API de Windows en tiempo de ejecución

Puedes llamar directamente a API de Windows en tiempo de ejecución mediante JavaScript que hospedes en el servidor mientras que el contenido hospedado se ejecuta como una aplicación en Windows.

Para habilitar esto, debes especificar el atributo (WindowsRuntimeAccess="%% amp; lt;<nivel>>") en las ACUR con uno de estos valores:

"none" bloquea todo el acceso a las API de Windows en tiempo de ejecución. Este es el valor predeterminado.
"AllowForWebOnly" permite que scripts remotos llamen a componentes de Windows en tiempo de ejecución locales que se incluyen en el paquete de la aplicación.
"all" ofrece al servidor de los desarrolladores el código de acceso a los espacios de nombres completos de Windows en tiempo de ejecución y a todos los componentes locales.

A continuación se facilita un tipo de regla de ejemplo:

<uap:ApplicationContentUriRules>
      <uap:Rule Type="include" WindowsRuntimeAccess="all" Match="http://example.com/" />
</uap:ApplicationContentUriRules>

Esto proporciona al script que se ejecuta en http://example.com/ acceso a espacios de nombres de Windows en tiempo de ejecución y a componentes empaquetados personalizados del paquete. Consulta el ejemplo Windows.UI.Notifications.js en GitHub para obtener notificaciones del sistema.

Integrar comandos de voz de Cortana

Puedes aprovechar la integración de Cortana especificando un archivo de definición de comandos de voz (VCD) en la página html. El archivo VCD es un archivo xml que asigna comandos a frases concretas. Por ejemplo, un usuario podría tocar el botón Inicio y decir "Contoso Widgets, mostrar más vendidos" para iniciar la aplicación llamada Contoso Widgets e ir a una página de "más vendidos".

Cuando agregas una etiqueta de elemento <meta> que muestra la ubicación del archivo VCD, Windows automáticamente descarga y registra el archivo de definición del comando de voz.

A continuación se muestra un ejemplo del uso de la etiqueta <meta> en una página html de una aplicación web hospedada:

<meta name="msapplication-cortanavcd" content="http:// example.com/vcd.xml"/>

Para obtener más información sobre la integración de Cortana y VCD, consulta Interacciones de Cortana y Voice Command Defintion (VCD) elements and attributes v1.2.

Usar el agente de autenticación web

Puedes usar al agente de autenticación web para controlar el flujo de inicio de sesión para los usuarios si tienes un proveedor de identidad en línea que usa protocolos de autorización y autenticación de Internet como OpenID o OAuth. Especifica los URI de inicio y finalización en una etiqueta <meta> de una página html de la aplicación. Windows detecta a estos URI y los pasa al agente de autenticación web para completar el flujo de inicio de sesión. El URI de inicio consta de la dirección desde la que envías la solicitud de autenticación a tu proveedor en línea anexada con otra información obligatoria, como un identificador de la aplicación, un URI de redirección donde se envía al usuario después de completar la autenticación, y el tipo de respuesta esperado. Puedes preguntarle al proveedor qué parámetros se requieren.

A continuación se muestra un ejemplo del uso de la etiqueta <meta>:

<meta name="ms-webauth-uris" 
      content="https://<providerstartpoint>?client_id=<clientid>&response_type=token, 
               https://<appendpoint>"/>

Para obtener más instrucciones, consulta Consideraciones sobre el agente de autenticación web para proveedores en línea.

Nuevo modelo de seguridad

Las aplicaciones para UWP inicialmente usaban una directiva de seguridad de aplicaciones web específica para Windows. Windows 10 presenta un nuevo modelo de seguridad basado en el uso del nuevo estándar de W3C Content Security Policy (CSP). La UWP aplicará automáticamente una directiva predeterminada para el contenido local. Sin embargo, el desarrollador puede modificar esa directiva y hacerla más o menos restrictiva según sea necesario. El CSP proporciona un encabezado HTTP estándar para declarar las fuentes de contenido aprobadas que se pueden ejecutar en la aplicación. Esto incluye contenido como JavaScript, marcos, CSS, marcos HTML, fuentes, imágenes y objetos incrustables como applets de Java, ActiveX o archivos de audio y vídeo. Para obtener más información, consulta la directiva de seguridad de contenido del borrador de W3C.

Funcionalidades de plataforma disponibles

Las aplicaciones web hospedadas pueden tener acceso a la gran mayoría de API de Windows en tiempo de ejecución, pero hay capacidades especiales que no están disponibles de forma inherente. Para más información, consulta el tema sobre las declaraciones de funcionalidad de las aplicaciones.

Usar Visual Studio

La creación de la aplicación web hospedada en Visual Studio es una tarea muy sencilla. Lo único que necesitas es un sitio web existente para hospedar. Con Visual Studio también tendrás acceso a la Plataforma universal de Windows y a todas las API compatibles.

Inicia un nuevo proyecto de JavaScript de Windows 10 con la plantilla en blanco.
Establece las reglas del URI de contenido de la URL y la aplicación en package.appxmanifest.
- En el explorador de soluciones de Microsoft Visual Studio, haz clic con el botón secundario en el archivo package.appxmanifest de la aplicación y selecciona Diseñador de vistas.
- Especifica los URI que quieras incluir o excluir.
- A continuación, Visual Studio actualiza el archivo de manifiesto.
Presiona Ejecutar.

Sitio de prueba WinJS

El sitio de Prueba WinJS es una parte fundamental del proyecto de WinJS y para la creación de aplicaciones para UWP. Proporciona a los desarrolladores la posibilidad de obtener experiencia práctica al trabajar con WinJS y los controles de interfaz de usuario, como si estuviera en jsfiddle. Cada control de interfaz de usuario principal se muestra con códigos HTML/CSS/JS que puedes cambiar y ver los efectos de esos cambios al momento. Para que puedas probar tu propio código HTML, CSS y JS con la biblioteca WinJS se incluye la característica Playground. Los vínculos proporcionan acceso a GitHub (código de origen de inicio de WinJS), a la puerta de enlace de WinJS en el Centro de desarrollo de Windows y el acceso a vídeos sobre el uso de WinJS.

Hay planes activos para agregar más contenido nuevo al sitio de Prueba WinJS en el futuro.