tutuapp - ¿Cómo verificar si una aplicación está instalada desde una página web en un iPhone?
no se pudo verificar la app tutuapp (10)
Quiero crear una página web, una página que redirija un iPhone a la tienda de aplicaciones si el iPhone no tiene la aplicación instalada, pero si el iPhone tiene la aplicación instalada, quiero que abra la aplicación.
Ya he implementado una url personalizada en la aplicación de iPhone, así que tengo una url para la aplicación que es algo así como:
myapp://
Y si esta url no es válida, quiero que la página se redireccione a la tienda de aplicaciones. ¿Es esto posible?
Si no tengo la aplicación instalada en el teléfono y escribo myapp: // url en safari, todo lo que obtengo es un mensaje de error.
Incluso si existe un hack feo con javascript, me gustaría saberlo realmente.
@Alistair señaló en esta respuesta que a veces los usuarios volverán al navegador después de abrir la aplicación. Un comentarista de esa respuesta indicó que los valores de tiempo utilizados debían cambiarse según la versión de iOS. Cuando nuestro equipo tuvo que lidiar con esto, descubrimos que los valores de tiempo para el tiempo de espera inicial y para decir si habíamos retornado al navegador tenían que ajustarse, y con frecuencia no funcionaban para todos los usuarios y dispositivos.
En lugar de utilizar un umbral de diferencia de tiempo arbitrario para determinar si habíamos regresado al navegador, tenía sentido detectar los eventos "pagehide" y "pageshow".
Desarrollé la siguiente página web para ayudar a diagnosticar lo que estaba sucediendo. Agrega diagnósticos HTML a medida que se desarrollan los eventos, principalmente porque el uso de técnicas como el registro de consola, las alertas o Web Inspector, jsfiddle.net etc., tuvieron todos sus inconvenientes en este flujo de trabajo. En lugar de utilizar un umbral de tiempo, el Javascript cuenta el número de eventos "pagehide" y "pageshow" para ver si se han producido. Y descubrí que la estrategia más sólida era usar un tiempo de espera inicial de 1000 (en lugar de los 25, 50 o 100 reportados / sugeridos por otros).
Esto puede ser servido en un servidor local, por ejemplo, python -m SimpleHTTPServer y visto en iOS Safari.
Para jugar con él, presione cualquiera de los enlaces "Abrir una aplicación instalada" o "Aplicación no instalada". Estos enlaces deben hacer que se abra la aplicación Maps o App Store respectivamente. Luego puede regresar a Safari para ver la secuencia y el momento de los eventos.
(Nota: esto solo funcionará para Safari. Para otros navegadores (como Chrome), deberá instalar controladores para los eventos pagehide / show-equivalent).
Actualización: Como @Mikko ha señalado en los comentarios, los eventos de pageshow / pagehide que estamos usando aparentemente ya no son compatibles con iOS8.
<html>
<head>
</head>
<body>
<a href="maps://" onclick="clickHandler()">Open an installed app</a>
<br/><br/>
<a href="xmapsx://" onclick="clickHandler()">App not installed</a>
<br/>
<script>
var hideShowCount = 0 ;
window.addEventListener("pagehide", function() {
hideShowCount++ ;
showEventTime(''pagehide'') ;
});
window.addEventListener("pageshow", function() {
hideShowCount++ ;
showEventTime(''pageshow'') ;
});
function clickHandler(){
var hideShowCountAtClick = hideShowCount ;
showEventTime(''click'') ;
setTimeout(function () {
showEventTime(''timeout function ''+(hideShowCount-hideShowCountAtClick)+'' hide/show events'') ;
if (hideShowCount == hideShowCountAtClick){
// app is not installed, go to App Store
window.location = ''http://itunes.apple.com/app'' ;
}
}, 1000);
}
function currentTime()
{
return Date.now()/1000 ;
}
function showEventTime(event){
var time = currentTime() ;
document.body.appendChild(document.createElement(''br''));
document.body.appendChild(document.createTextNode(time+'' ''+event));
}
</script>
</body>
</html>
A partir de 2017, parece que no hay una manera confiable de detectar una aplicación instalada, y el truco de redirección no funcionará en todas partes.
Para aquellos como yo que necesitan un enlace profundo directamente desde los correos electrónicos (bastante común), vale la pena señalar lo siguiente:
Enviar correos electrónicos con appScheme: // no funcionará bien porque los enlaces se filtrarán en Gmail
Redirigir automáticamente a appScheme: // está bloqueado por Chrome: sospecho que Chrome requiere que la redirección sea sincrónica a la interacción del usuario (como un clic)
Ahora puedes hacer un enlace profundo sin appScheme: // y es mejor, pero requiere una plataforma moderna y una configuración adicional. Android iOS
Vale la pena señalar que otras personas ya pensaron en esto en profundidad. Si observa cómo Slack implementa su función de "enlace mágico", puede observar que:
- Envía un correo electrónico con un enlace http regular (ok con Gmail)
- La página web tiene un gran botón que enlaza con appScheme: // (ok con Chrome)
Después de compilar algunas respuestas, he encontrado el siguiente código. Lo que me sorprendió fue que el temporizador no se congela en una PC (Chrome, FF) o Android Chrome: el disparador funcionaba en segundo plano, y la verificación de visibilidad era la única información confiable.
var timestamp = new Date().getTime();
var timerDelay = 5000;
var processingBuffer = 2000;
var redirect = function(url) {
//window.location = url;
log(''ts: '' + timestamp + ''; redirecting to: '' + url);
}
var isPageHidden = function() {
var browserSpecificProps = {hidden:1, mozHidden:1, msHidden:1, webkitHidden:1};
for (var p in browserSpecificProps) {
if(typeof document[p] !== "undefined"){
return document[p];
}
}
return false; // actually inconclusive, assuming not
}
var elapsedMoreTimeThanTimerSet = function(){
var elapsed = new Date().getTime() - timestamp;
log(''elapsed: '' + elapsed);
return timerDelay + processingBuffer < elapsed;
}
var redirectToFallbackIfBrowserStillActive = function() {
var elapsedMore = elapsedMoreTimeThanTimerSet();
log(''hidden:'' + isPageHidden() +''; time: ''+ elapsedMore);
if (isPageHidden() || elapsedMore) {
log(''not redirecting'');
}else{
redirect(''appStoreUrl'');
}
}
var log = function(msg){
document.getElementById(''log'').innerHTML += msg + "<br>";
}
setTimeout(redirectToFallbackIfBrowserStillActive, timerDelay);
redirect(''nativeApp://'');
La solución de fecha es mucho mejor que otras, tuve que aumentar el tiempo en 50, así que este es un ejemplo de Tweeter:
//on click or your event handler..
var twMessage = "Your Message to share";
var now = new Date().valueOf();
setTimeout(function () {
if (new Date().valueOf() - now > 100) return;
var twitterUrl = "https://twitter.com/share?text="+twMessage;
window.open(twitterUrl, ''_blank'');
}, 50);
window.location = "twitter://post?message="+twMessage;
el único problema en Mobile IOS Safari es cuando no tienes la aplicación instalada en el dispositivo, por lo que Safari muestra una alerta que se descarta automáticamente cuando se abre la nueva url. ¡De todos modos, es una buena solución por ahora!
No he leído todo esto, pero puede usar un iframe y agregar la fuente a "my app: // whatever".
Luego, verifique regularmente en el intervalo establecido de la página 404 o no.
También puedes usar la llamada Ajax. Si la respuesta es 404, entonces la aplicación no está instalada.
Para avanzar en la respuesta aceptada, a veces es necesario agregar un código adicional para manejar a las personas que devuelven el navegador después de iniciar la aplicación, esa función setTimeout se ejecutará siempre que lo hagan. Entonces, hago algo como esto:
var now = new Date().valueOf();
setTimeout(function () {
if (new Date().valueOf() - now > 100) return;
window.location = "https://itunes.apple.com/appdir";
}, 25);
window.location = "appname://";
De esta forma, si se ha congelado la ejecución del código (es decir, el cambio de aplicación), no se ejecutará.
Por lo que sé, no puedes, desde un navegador, verificar si una aplicación está instalada o no.
Pero puedes intentar redirigir el teléfono a la aplicación y, si no ocurre nada, redirecciona el teléfono a una página específica, como esta:
setTimeout(function () { window.location = "https://itunes.apple.com/appdir"; }, 25);
window.location = "appname://";
Si la segunda línea de código da un resultado, entonces la primera fila nunca se ejecuta.
¡Espero que esto ayude!
Pregunta similar:
Puede consultar este complemento que intenta resolver el problema. Se basa en el mismo enfoque descrito por missemisa y Alastair, etc., pero en su lugar usa un iframe oculto.
Tengo que hacer algo como esto, terminé yendo con la siguiente solución.
Tengo una URL de sitio web específica que abrirá una página con dos botones
1) Botón Uno ir al sitio web
2) Botón dos ir a la aplicación (iphone / teléfono Android / tableta) puede volver a una ubicación predeterminada desde aquí si la aplicación no está instalada (como otra url o una tienda de aplicaciones)
3) cookie para recordar la elección de los usuarios
<head>
<title>Mobile Router Example </title>
<script type="text/javascript">
function set_cookie(name,value)
{
// js code to write cookie
}
function read_cookie(name) {
// jsCode to read cookie
}
function goToApp(appLocation) {
setTimeout(function() {
window.location = appLocation;
//this is a fallback if the app is not installed. Could direct to an app store or a website telling user how to get app
}, 25);
window.location = "custom-uri://AppShouldListenForThis";
}
function goToWeb(webLocation) {
window.location = webLocation;
}
if (readCookie(''appLinkIgnoreWeb'') == ''true'' ) {
goToWeb(''http://somewebsite'');
}
else if (readCookie(''appLinkIgnoreApp'') == ''true'') {
goToApp(''http://fallbackLocation'');
}
</script>
</head>
<body>
<div class="iphone_table_padding">
<table border="0" cellspacing="0" cellpadding="0" style="width:100%;">
<tr>
<td class="iphone_table_leftRight"> </td>
<td>
<!-- INTRO -->
<span class="iphone_copy_intro">Check out our new app or go to website</span>
</td>
<td class="iphone_table_leftRight"> </td>
</tr>
<tr>
<td class="iphone_table_leftRight"> </td>
<td>
<div class="iphone_btn_padding">
<!-- GET IPHONE APP BTN -->
<table border="0" cellspacing="0" cellpadding="0" class="iphone_btn" onclick="set_cookie(''appLinkIgnoreApp'',document.getElementById(''chkDontShow'').checked);goToApp(''http://getappfallback'')">
<tr>
<td class="iphone_btn_on_left"> </td>
<td class="iphone_btn_on_mid">
<span class="iphone_copy_btn">
Get The Mobile Applications
</span>
</td>
<td class="iphone_btn_on_right"> </td>
</tr>
</table>
</div>
</td>
<td class="iphone_table_leftRight"> </td>
</tr>
<tr>
<td class="iphone_table_leftRight"> </td>
<td>
<div class="iphone_btn_padding">
<table border="0" cellspacing="0" cellpadding="0" class="iphone_btn" onclick="set_cookie(''appLinkIgnoreWeb'',document.getElementById(''chkDontShow'').checked);goToWeb(''http://www.website.com'')">
<tr>
<td class="iphone_btn_left"> </td>
<td class="iphone_btn_mid">
<span class="iphone_copy_btn">
Visit Website.com
</span>
</td>
<td class="iphone_btn_right"> </td>
</tr>
</table>
</div>
</td>
<td class="iphone_table_leftRight"> </td>
</tr>
<tr>
<td class="iphone_table_leftRight"> </td>
<td>
<div class="iphone_chk_padding">
<!-- CHECK BOX -->
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input type="checkbox" id="chkDontShow" /></td>
<td>
<span class="iphone_copy_chk">
<label for="chkDontShow"> Don’t show this screen again.</label>
</span>
</td>
</tr>
</table>
</div>
</td>
<td class="iphone_table_leftRight"> </td>
</tr>
</table>
</div>
</body>
</html>
iOS Safari tiene una función que le permite agregar un banner "inteligente" a su página web que se vinculará a su aplicación, si está instalada, o al App Store.
Para ello, agrega una meta a la página. Incluso puede especificar una URL de aplicación detallada si desea que la aplicación haga algo especial cuando se carga.
Los detalles se encuentran en la página Promoción de aplicaciones de Apple con Smart App Banners .
El mecanismo tiene las ventajas de ser fácil y presentar un banner estandarizado. La desventaja es que no tienes mucho control sobre el aspecto o la ubicación. Además, todas las apuestas están desactivadas si la página se ve en un navegador que no sea Safari.