Detectar navegador y S.O. para modo anclado.

Como ya comentamos en el artículo anterior de Discoverability, las nuevas características del modo anclado pueden mejorar mucho la experiencia de nuestros usuarios y sobre todo nos ayudan a tener un contacto más directo con ellos. De esta manera rompemos la dependencia que existe entre el motor de búsqueda y nuestro sitio, con los usuarios que ya son fieles al sitio.

Como ejemplo, el diario norteamericano de noticias online Huffington Post lanzó una serie de datos sobre cómo habían mejorado sus cifras utilizando el modo anclado. En resumen, 11% más de páginas vistas y hasta un 49% más de tiempo de permanencia de sus usuarios. Este último dato se debe a la posibilidad de dejar anclado y abierta la aplicación anclada del Huffington Post y que te notifique con las nuevas noticias que vayan publicando (utilizando Overlay Icons).

En este artículo trataré de complementar el artículo de Discoverability, explicando cómo detectar el sistema operativo y si el navegador soporta el modo anclado de Internet Explorer 9.

Para detectar el sistema operativo podemos usar una detección de navegador utilizando el siguiente código JavaScript, comento sobre el propio código.

  1: this.supportLevel = { none: 0, upgradeable: 1, limited: 2, full: 3 };

  2: this.getOSPinSupportLevel = function () {

  3:   try {

  4:     var userAgent = navigator.userAgent;

  5:     

  6:     // Comprobamos si es Windows 7

  7:     if (userAgent.indexOf("Windows NT 6.1") !== -1)

  8:                 return this.supportLevel.full;

  9: 

 10:     // Comprobamos si es Windows Vista SP2

 11:     else if (userAgent.indexOf("Windows NT 6.0") !== -1)

 12:                 return this.supportLevel.limited;

 13: 

 14:     // Comprobamos si es Windows Vista

 15:     else if (userAgent.indexOf("Windows NT") !== -1)

 16:                 return this.supportLevel.upgradeable;

 17: 

 18:     // Ninguno de los anteriores, Windows XP, MacOS, etc.

 19:     else

 20:                 return this.supportLevel.none;

 21:   } catch (exc) {

 22:     // En caso de un posible error

 23:             return this.supportLevel.none;

 24:   }

 25: }

 26: 

 27: 
Para detectar el navegador lo primero que necesitamos es conocer si el navegador se puede anclar. 
this.browserCanPin = (‘external’ in window && ‘msIsSiteMode’ in window.external);
Y también es necesario conocer si el usuario está viendo el sitio anclado.
this.viewingFromPin = (‘external’ in window && ‘msIsSiteMode’ in window.external && window.external.msIsSiteMode());
Utilizando estos métodos ya podemos crear la función de JavaScript para saber si es Internet Explorer 9. 
  1: this.abilityLevel = {none: 0, limited: 1, full: 2};

  2:    this.getBrowserPinAbilityLevel = function () {

  3:      try {

  4: 

  5:         var appVersion = navigator.appVersion;

  6:         // Es IE9

  7:         if (this.browserCanPin) {

  8:             // Es IE9 en Windows 7   

  9:             if (appVersion.indexOf("Windows NT 6.0") !== -1)

 10:                     return this.abilityLevel.limited;

 11:             // Es IE9 en Windows Vista

 12:             else

 13:                     return this.abilityLevel.full;

 14:             }

 15:             // No es IE9

 16:             else

 17:                 return this.abilityLevel.none;

 18:       } catch (exc) {

 19:             return this.abilityLevel.none;

 20:       }

 21:   }

 22: 
Para hacerlo menos complejo y facilitar el uso de los métodos anteriores, hemos creado una serie de propiedades resumen.
 
  1: this.hasFullPinAbilityBrowser = (this.getBrowserPinAbilityLevel() === this.abilityLevel.full);

  2: this.hasLimitedPinAbilityBrowser = (this.getBrowserPinAbilityLevel() === this.abilityLevel.limited);

  3: this.hasNoPinAbilityBrowser = (this.getBrowserPinAbilityLevel() === this.abilityLevel.none);

  4: 

  5: this.hasFullPinSupportOS = (this.getOSPinSupportLevel() === this.supportLevel.full);

  6: this.hasLimitedPinSupportOS = (this.getOSPinSupportLevel() === this.supportLevel.limited);

  7: this.hasUpgradeablePinSupportOS = (this.getOSPinSupportLevel() === this.supportLevel.upgradeable);

  8: this.hasNoPinSupportOS = (this.getOSPinSupportLevel() == this.supportLevel.none);

  9: 
 
Para ver un ejemplo de uso de cómo podemos usarlo para hacer las comprobaciones, os dejo el siguiente ejemplo.
  1: if(pinnedSiteDetection.browserCanPin){

  2:     // Estamos en IE9

  3:     if(pinnedSiteDetection.hasFullPinSupportOS){

  4:         // Estamos en Windows 7

  5:         // Comprobamos si está anclada

  6:         if(pinnedSiteDetection.getDaysSincePinAccess() > -1){

  7:            // IE9 Anclado

  8:         }else{

  9:            // IE9 No anclado

 10:         }

 11:     }else{

 12:         // Estamos en Windows Vista

 13:     }   

 14: } else if(pinnedSiteDetection.hasFullPinSupportOS){

 15: // Estamos en W7 pero no en IE9  

 16: }else if(pinnedSiteDetection.hasNoPinSupportOS){

 17: // Estamos en Windows XP u otros.

 18: }else if(pinnedSiteDetection.hasLimitedPinSupportOS){

 19: // Estamos en Windows VIsta

 20: }

 21: 
Todo este código para detector el navegador y el sistema operativo, lo hemos empaquetado en una librería de JQuery que podéis utilizar, y que además utiliza el Storage de HTML5 para almacenar el tiempo que lleva anclada la aplicación. Todos estos datos son muy útiles a la hora de realizar analíticas sobre el efecto que provoca que nuestros usuarios anclen nuestro sitio web.
Ejemplo en http://redsandbox.net/concepts/discoverability2/
Librería JavaScript en http://redsandbox.net/concepts/discoverability2/scripts/ie9.discoverability.js
 
Espero que os sea de utilidad.