Inicie la aplicación si está instalada o networkingirigir para download

En cada repository, GitHub tiene un button labeldo como "Clonar en el escritorio" (ejemplo: https://github.com/github/developer.github.com ). Si tiene instalado GitHub para Mac, el href es algo así como:

 github-mac://openRepo/https://github.com/github/developer.github.com 

Esto abre GitHub para Mac y ofrece clonar el repository. Si no lo hace, el href es:

 http://mac.github.io` 

Esta es una página de descarga de GitHub para Mac. Me gustaría hacer algo similar en mi website: abrir mi aplicación si está instalada y networkingireccionarla para downloadla si no es así. ¿Cómo se puede lograr esto mejor?

¿Cómo lo hace GitHub?

El cliente de GitHub para Mac incluye un service local llamado GitHub Conduit que se ejecuta en segundo plano. La página de GitHub se comunica con este service a través de la URL https://ghconduit.com:25035/status .

Extracto de la página de ayuda de GitHub Conduit :

Por ejemplo, Conduit está detrás del button Clone in Desktop en las páginas del repository y el button Open en las páginas del file. Conduit escucha las consultas del browser sobre las acciones de GitHub para Mac. Para ver esto en acción, visite https://ghconduit.com:25035/status . Debería verse algo como esto:

 {"capabilities":["status","unique_id","url-parameter-filepath"],"running":true,"server_version":"5"} 

Si tiene el service GitHub Conduit en ejecución, JavaScript en la página obtiene datos de esta URL y le da al button Clonar en el escritorio una github-mac:// . De lo contrario, la URL devuelve una respuesta 404 y asume que no tiene instalado GitHub para Mac, y le da el enlace para downloadlo.

¿Cómo implementar una funcionalidad como esta?

Desafortunadamente, no hay una API de JavaScript para hacer esto en el browser. Los protocolos que el browser no reconoce son manejados por el propio sistema operativo. Intenté hacerlo lo mejor posible, pero solo pude modificar una solución decente de solo JavaScript para Firefox en Mac, y una fea solución a medias para Safari. Ambos hacks dependen de un comportamiento indefinido y ninguno de los dos funciona para Chrome. Puedes ver mi código de investigación a continuación.

Si desea hacerlo de la manera GitHub, tendrá que crear un server HTTP local que se ejecute como un service a través de un puerto conocido en las máquinas de su usuario. Luego puede usar JavaScript para conectarse y recuperar información sobre la aplicación instalada. Hacer esto no sería trivial, y a less que proporcione una funcionalidad increíble, aconsejaría no hacerlo.

Sin embargo, el código de JavaScript para hacer esto sería bastante simple. Suponiendo que devuelva los encabezados CORS apropiados, puede hacer una simple request AJAX. Aquí hay un ejemplo basado en jQuery.

 $.ajax({ url: 'http://127.0.0.1:1337', dataType: 'json', success: function(jqXHR) { //Replace links to app protocol URLs. } }); 

Código de investigación:

El siguiente código es mi código súper hacky y bastante frágil para Firefox y Safari. Mientras está trabajando en mi parte final, no garantizo que funcionará como se espera o continuará funcionando en el futuro. Se basa en un comportamiento indefinido específico del browser y debe considerarse inestable. Tampoco tengo idea de qué hará este código en sistemas que no sean OS X.

Firefox:

Este código se basa en abrir el enlace en un iframe que desencadenará un error cuando no se reconozca un protocolo (en caso de éxito, abrirá la URL de la forma habitual).

 function openAppFirefox(url, failure) { var iframe = document.createElement('iframe'); //Firefox will fire an error if protocol fails to open. iframe.onerror = function() { failure(); }; //Hide the iframe. iframe.style.width = 0; iframe.style.height = 0; iframe.style.visibility = "hidden"; iframe.style.position = "fixed"; //Load the URL. iframe.src = url; document.body.appendChild(iframe); //Clean up the iframe. setTimeout(function() { document.body.removeChild(iframe); }, 1000); } 

Ejemplo de uso:

 //Will work. //var url = 'itmss://itunes.apple.com/us/app/stack-exchange/id871299723'; //Will fail. var url = 'wat://bummer'; someElment.addEventListener('click', function() { openAppFirefox(url, function() { alert('Download my app!'); }); }); 

Safari:

Este código se basa en abrir la URL en una nueva pestaña, cuyo win.location.href será undefined antes de un segundo (pero probablemente less time) si la URL no fue reconocida. El cuadro de dialog "No hay ningún set de aplicaciones para abrir la URL" seguirá abierto si desafortunadamente no abre el protocolo.

 function openAppSafari(url, failure) { var win = window.open(url); var done = function(failed) { win.close(); clearInterval(checkFail); clearTimeout(giveup); if (failed) { failure(); } }; //Chck for failure. var checkFail = setInterval(function() { //In Safari, location.href becomes undefined on failure. if (!win.location.href) { done(true); } }); //After a second, assume success. var giveup = setTimeout(function() { done(false); }, 1000); } 

Ejemplo de uso:

 //Will work. //var url = 'itmss://itunes.apple.com/us/app/stack-exchange/id871299723'; //Will fail. var url = 'wat://bummer'; someElment.addEventListener('click', function() { openAppSafari(url, function() { alert('Download my app!'); }); }); 

Esto podría lograrse con Javascript o PHP …

Para Javascript tiene una biblioteca genial is.js que puede usar para verificar el entorno. Vea aquí: http://arasatasaygin.github.io/is.js/#environment-checks

Simplemente crea un div en su HTML y luego usa javascript para llenarlo con contenido dependiendo del resultado de funciones como: is_windows () o! Is_windows ()

También puedes usar PHP. Para esto, puede usar el código en la primera respuesta de esta pregunta: get el sistema operativo y el número de versión de los usuarios

 <?php $user_agent = $_SERVER['HTTP_USER_AGENT']; function getOS() { global $user_agent; $os_platform = "Unknown OS Platform"; $os_array = array( '/windows nt 6.2/i' => 'Windows 8', '/windows nt 6.1/i' => 'Windows 7', '/windows nt 6.0/i' => 'Windows Vista', '/windows nt 5.2/i' => 'Windows Server 2003/XP x64', '/windows nt 5.1/i' => 'Windows XP', '/windows xp/i' => 'Windows XP', '/windows nt 5.0/i' => 'Windows 2000', '/windows me/i' => 'Windows ME', '/win98/i' => 'Windows 98', '/win95/i' => 'Windows 95', '/win16/i' => 'Windows 3.11', '/macintosh|mac os x/i' => 'Mac OS X', '/mac_powerpc/i' => 'Mac OS 9', '/linux/i' => 'Linux', '/ubuntu/i' => 'Ubuntu', '/iphone/i' => 'iPhone', '/ipod/i' => 'iPod', '/ipad/i' => 'iPad', '/android/i' => 'Android', '/blackberry/i' => 'BlackBerry', '/webos/i' => 'Mobile' ); foreach ($os_array as $regex => $value) { if (preg_match($regex, $user_agent)) { $os_platform = $value; } } return $os_platform; } function getBrowser() { global $user_agent; $browser = "Unknown Browser"; $browser_array = array( '/msie/i' => 'Internet Explorer', '/firefox/i' => 'Firefox', '/safari/i' => 'Safari', '/chrome/i' => 'Chrome', '/opera/i' => 'Opera', '/netscape/i' => 'Netscape', '/maxthon/i' => 'Maxthon', '/konqueror/i' => 'Konqueror', '/mobile/i' => 'Handheld Browser' ); foreach ($browser_array as $regex => $value) { if (preg_match($regex, $user_agent)) { $browser = $value; } } return $browser; } $user_os = getOS(); $user_browser = getBrowser(); $device_details = "<strong>Browser: </strong>".$user_browser."<br /><strong>Operating System: </strong>".$user_os.""; print_r($device_details); echo("<br /><br /><br />".$_SERVER['HTTP_USER_AGENT'].""); ?> 

Y ahora, basado en el retorno de la function getOS () y / o getBrowser, puede presentar a los usuarios contenido diferente … eso es un código de bloque else if else 🙂

¡Disfrutar!