javascript - link - open app from url android
Deeplinking los navegadores móviles a la aplicación nativa: problemas con Chrome cuando la aplicación no está instalada (4)
Es muy importante asegurarse de que cuando intenta abrir una URL de enlace de enlace con JavaScript, la URL tenga el formato correcto para el dispositivo y el navegador . (Si no usa la URL de enlace de enlace adecuada para el navegador / plataforma, un usuario puede ser redirigido a una "Página no encontrada", que es lo que experimenta).
¡Ahora debes tener en cuenta que Chrome en Android tiene un formato de URL diferente al del antiguo navegador estándar de Android 1 ! Debe anotar los enlaces profundos usando href="android-app://" en el marcado HTML de sus páginas web. Puede hacer esto en la sección para cada página web agregando una etiqueta y especificando el enlace profundo como un URI alternativo.
Por ejemplo, el siguiente fragmento de código HTML muestra cómo puede especificar el enlace profundo correspondiente en una página web que tenga el ejemplo de URL: // gizmos.
<html>
<head>
<link rel="alternate"
href="android-app://com.example.android/example/gizmos" />
...
</head>
<body> ... </body>
Para más detalles, vea las referencias aquí:
https://developer.chrome.com/multidevice/android/intents
https://developers.google.com/app-indexing/webmasters/server
https://developer.android.com/training/app-indexing/enabling-app-indexing.html#webpages
Y aquí hay una herramienta de prueba de enlaces para Android: https://developers.google.com/app-indexing/webmasters/test.html
Espero que ayude.
1 Dado que el antiguo navegador AOSP fue reemplazado por cromo, esta es ahora la forma predeterminada de manejar enlaces profundos para las versiones recientes de Android. No obstante, Android aún requiere una solución condicional, ya que las versiones anteriores del sistema operativo aún utilizan el navegador AOSP.
Tengo una página web, llamémosla entry.html .
Cuando un usuario ingresa a esta página, un código javascript (ver más abajo) está intentando vincular al usuario a la aplicación nativa de iOS / Android.
Si el enlace profundo falla (probablemente si la aplicación no está instalada en el dispositivo), el usuario debería "retroceder" a otra página; llamémoslo fallback.html .
Aquí está el código javascript que se ejecuta en entry.html :
$(function(){
window.location = ''myapp://'';
setTimeout(function(){
window.location = ''fallback.html'';
}, 500);
});
este es un método estándar de enlace profundo que se recomienda en toda la red; intente hacer un enlace profundo, y si el tiempo de espera se dispara, significa que el enlace profundo no se produjo, por lo tanto, retroceso.
Esto funciona bien, ya que la aplicación está instalada en el dispositivo.
pero si la aplicación no está instalada, este es el comportamiento cuando se trata de un enlace profundo:
Mobile Safari : veo un mensaje de alerta que dice "Safari no puede abrir esta página ..." por un momento, y luego vuelve a caer correctamente en fallback.html , que es el comportamiento esperado.
Mobile Chrome es mi problema.
cuando la aplicación no está instalada, el navegador se redirige a myapp:// url, que por supuesto no es válido, así que aparece una página "no encontrada" y no se produce el retroceso.
Finalmente , mi pregunta es:
¿Cómo puedo corregir mi código para que FALL-BACK SE DUEVE también en Chrome móvil? Al igual que Safari móvil?
Nota: veo que el sitio web móvil de LinkedIn hace esto correctamente, con Safari y Chrome, con o sin la aplicación instalada, pero no pude rastrear el código responsable :(
nota2: intenté agregar un iframe lugar de window.location = url , esto solo funciona en Safari, Chrome móvil no tiene un vínculo profundo al agregar un iFrame, incluso si la aplicación está instalada.
¡Gracias a todos!
ACTUALIZAR:
Encontré una solución decente y respondí mi propia pregunta. Ver respuesta aceptada para mi solución.
Estoy usando este código para desempañar. Si la aplicación está instalada, la aplicación se abrirá ... Si la aplicación no está instalada, entonces seguirá siendo así. Si desea agregar cualquier otra condición para la aplicación no instalar, simplemente elimine el comentario del código setTimeout.
<script>
var deeplinking_url = scootsy://vendor/1;
$(document).ready(function(){
call_me_new(deeplinking_url);
});
var call_me_new = function(deeplinking_url){
if(deeplinking_url!=''''){
var fallbackUrl =''http://scootsy.com/'';
var iframe = document.createElement("iframe");
var nativeSchemaUrl = deeplinking_url;
console.log(nativeSchemaUrl);
iframe.id = "app_call_frame";
iframe.style.border = "none";
iframe.style.width = "1px";
iframe.style.height = "1px";
iframe.onload = function () {
document.location = nativeSchemaUrl;
};
iframe.src = nativeSchemaUrl; //iOS app schema url
window.onload = function(){
document.body.appendChild(iframe);
}
//IF the App is not install then it will remain on the same page.If you wish to send the use to other page then uncomment the below code and send a time interval for the redirect.
/*
setTimeout(function(){
console.log(''Iframe Removed...'');
document.getElementById("app_call_frame").remove();
window.location = fallbackUrl; //fallback url
},5000);*/
}
};
</script>
He creado un complemento de Javascript, que es compatible con la mayoría de los navegadores modernos en dispositivos móviles. Sin embargo, se requiere que las páginas de destino de enlaces profundos estén alojadas en un dominio cruzado (diferente a la URL de enlace universal) para trabajar en ios9 Facebook mediante el enlace universal. También hay una forma diferente de hacerlo funcionar en el iOS9 de Facebook usando el SDK de Facebook. Estoy compartiendo esto si alguien puede encontrar esto útil. Actualmente no tiene opción alternativa, pero si recae en la App Store.
para quien esté interesado, logré encontrar una solución decente para resolver estos problemas con el desempañamiento de Chrome en Android.
myapp:// enfoque myapp:// , lo dejé funcionando solo en los casos de un dispositivo iOS.
para dispositivos Android, ahora estoy usando intents que son conceptualmente diferentes al protocolo myapp:// .
Principalmente soy un desarrollador web, no un desarrollador de Android, por lo que me tomó un tiempo entender el concepto, pero es bastante simple. Intentaré explicar y demostrar MI solución aquí (tenga en cuenta que hay otros enfoques que podrían implementarse con intents , pero este funcionó perfectamente para mí).
Aquí está la parte relevante en el manifiesto de la aplicación de Android, que registra las reglas de intención (tenga en cuenta el android:scheme="http" ; hablaremos de ello en breve):
<receiver android:name=".DeepLinkReceiver">
<intent-filter >
<data android:scheme="http" android:host="www.myapp.com" />
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.BROWSABLE"/>
<category android:name="android.intent.category.DEFAULT"/>
</intent-filter>
</receiver>
Ahora, después de que se declare esto en el manifiesto de la aplicación, me envío un correo electrónico con " http://www.myapp.com " en el mensaje.
Cuando se toca el enlace con el dispositivo Android, aparece un cuadro de diálogo de "selección" que pregunta qué aplicación quiero abrir. [cromo, myapp ]
La razón por la que este diálogo surgió al tocar una url "regular" es porque registramos la intención con el esquema http .
con este enfoque, el enlace de enlace ni siquiera se maneja en la página web, lo maneja el propio dispositivo , al tocar un enlace coincidente con una regla de intención existente definida en el manifiesto de la aplicación de Android.
y sí, como dije, este enfoque es diferente por concepto que el enfoque de iOS, que invoca el enlace desde la página web, pero resuelve el problema y hace la magia.
Nota: cuando la aplicación no está instalada, no aparecerá ningún cuadro de diálogo de selección, simplemente navegará a la página web real con la dirección dada (a menos que tenga más de 1 navegador, por lo que deberá elegir uno). .pero no seamos mezquinos).
Realmente espero que esto pueda ayudar a alguien que se enfrenta a lo mismo ... desearía tener una explicación así ;-)
aclamaciones.