Conectando nuestro sitio web con una aplicación del Windows Store

Una buena forma de conseguir gente que conozca nuestra aplicación es a través del sitio web de la aplicación.

Una forma es bombardear al usuario con banners indicando que tenemos una aplicación, pero una mejor manera es aprovechar la integración de Internet Explorer 10, en su versión Modern UI.

Para esto, lo único que necesitamos es agregar unas pocas líneas de meta en el head de nuestra página, que harán que, dependiendo de si el usuario ya tiene o no nuestra aplicación instalada, lo lleve a la aplicación o a descargarla del Windows Store.

Usando como ejemplo a Cut the Rope (si no lo probaron, pueden jugarlo incluso desde el browser en http://www.cuttherope.ie), si abrimos la página desde IE 10 Modern UI, vamos a tener las siguientes opciones:

Bajar la aplicación

Si no poseemos la aplicación instalada, tendremos la opción de bajarla, lo que nos llevará directo a la vista de la aplicación en el Windows Store para poder bajarla.

Esta opción es la que se muestra en la siguiente figura:

IC591657

Ir a la aplicación

Si ya tenemos instalada la aplicación, se nos dará la opción de ir a la misma. De esta forma el usuario podrá aprovechar las ventajas de estar corriendo dentro de la aplicación, con toda la integración con el Sistema Operativo.

Esta opción es la que se muestra en la siguiente figura:

IC591658

Y para hacerlo, ¿qué necesitamos?

Lo que necesitamos es agregar al menos lo siguiente:

<meta name="msApplication-ID" content="App"/>
<meta name="msApplication-PackageFamilyName" content="ZeptoLabUKLimited.CutTheRope_sq9zxnwrk84pj"/>

Con estas dos simples líneas, Internet Explorer logra identificar si la aplicación ya está instalada en el equipo del usuario, y, si no lo está, lo lleva a la descripción de la misma en el Windows Store.

Pero, ¿de dónde saco esos valores?

La respuesta es simple, estos valores están en el manifest de nuestra aplicación:

  • El Package family name es la última propiedad de la solapa Package (la última).
  • El otro dato, el ID, no está visible en la pantalla amigable que nos muestra Visual Studio, pero siempre podemos visualizar el XML del manifest haciendo click derecho y eligiendo la opción View Code. El valor que necesitamos está dentro del elemento Applications, y es el atributo Id del elemento Application.

<Applications> <Application Id="App" StartPage="default.html">

</Application> </Applications>

Opciones disponibles

En la tabla a continuación se muestran todas las opciones que tenemos disponibles para manejar la relación entre IE10 y nuestra aplicación:

Nombre de la propiedad Contenido
msApplication-ID Obligatorio. ID de la aplicación, relativo al paquete del manifest. Se usa para vincular el sitio a la aplicación
msApplication-PackageFamilyName Obligatorio. Nombre de la familia de paquete de la aplicación, creado por Visual Studio cuando se publica la aplicación. Se usa para vincularse con el Store.
msApplication-Arguments Opcional. Cadena de caracteres de argumento. Por defecto, Internet Explorer envía la URL de la página web, pero podemos usarla para pasar una cadena relevante al contexto.
msApplication-MinVersion Opcional. Fuerza una versión mínima requerida de la aplicación instalada. Si el usuario intenta pasar desde la web a una aplicación desactualizada, primero es llevado al Windows Store para actualizarla.
msApplication-OptOut Opcional. Permite a la página optar por la quita toda o parte de la funcionalidad:

  • ”install” previene ofrecer al usuario el instalar la aplicación si no la tiene.
  • ”switch” previene ofrecer al usuario pasar a la aplicación ya instalada.
  • ”both” previene ambas.

Espero les sea útil y comiencen a ganar usuarios a través de su sitio web Winking smile

Happy coding!

@gjbellmann

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s