Cómo invocar una aplicación en html5

Es común que h5 evoque esta necesidad en las aplicaciones. En una era en la que los dispositivos móviles son los reyes, h5 juega un papel importante en el desvío del tráfico de aplicaciones.

El método de evocación que utilizamos actualmente es el esquema de URL (compatible con las plataformas iOS y Android). Solo necesita registrar el esquema durante el desarrollo de la APLICACIÓN nativa y luego, cuando el usuario haga clic en dicho enlace, saltará automáticamente a la APLICACIÓN.

marco flotante

 var last = Date.now(), doc = window.document, ifr = doc.createElement('iframe');//Crear un iframe oculto ifr.src = nativeUrl;ifr.style.cssText = 'display:none;border :0;ancho:0;alto:0;';doc.body.appendChild(ifr);setTimeout(función() { doc.body.removeChild(ifr); //setTimeout menor que 2000 generalmente es una llamada fallida if (Date.now() - last < 2000) { if (typeof onFail == 'function') { onFail() } else; { //Mensajes emergentes o procesamiento de descarga, etc.} } else { if (typeof onSuccess == 'function') { onSuccess() } }}, 1000);

El principio de evocación de la solución iframe es: cuando el programa cambia a segundo plano, el temporizador se retrasará (otra situación en la que el temporizador es inexacto). Si la aplicación se activa, la página web inevitablemente pasará a segundo plano. Si el usuario vuelve a salir de la aplicación, el tiempo generalmente excederá los 2 segundos; si la aplicación no se activa, la página web no pasará a segundo plano. tiempo, y el tiempo no excederá los 2 s.

window.location.href salta directamente

 ventana.ubicación.href = URL nativa;

una etiqueta evoca

 <a href=nativeUrl>Revocar aplicación</a>

Prueba del navegador de tres escenarios de evocación

1. X significa que la excitación falló, √ significa que la excitación fue exitosa.
2. La marca roja indica que se evocará directamente después de ingresar a la página, y la marca verde indica que se evocará después de la operación manual del evento.
3. máquina de prueba ios: iphone 6p máquina de prueba android: Xiaomi 1s

iframe evoca los resultados de las pruebas de la aplicación

window.location.href evoca los resultados de las pruebas de la aplicación

una etiqueta evoca los resultados de las pruebas de la aplicación

iframe y window.location.href evocan contraste

iframe, window.location.href y una etiqueta evocan una comparación entre los tres

Primero, los modelos y navegadores probados son limitados y los resultados anteriores son solo como referencia.

Comparando la evocación de iframe y location.href, podemos encontrar:

1. Para iOS, el salto location.href es más apropiado, porque este método puede evocar con éxito la aplicación en Safari. No hace falta decir la importancia de Safari como navegador predeterminado para iPhone, pero para los clientes WeChat y QQ, estos dos métodos en ios son inútiles ==
2. Para Android, cuando la página se invoca directamente, iframe y location.href son iguales, pero si está basada en eventos, iframe evoca mejor que location.href.
3. A través de las pruebas, se puede encontrar que para muchos navegadores, el rendimiento de la evocación directa al ingresar a la página y la evocación basada en eventos son diferentes. En pocas palabras, la evocación directa falla más.

Según el análisis comparativo anterior, es más apropiado utilizar iframe para Android y window.location.href para ios.

La diferencia entre evocación directa y evocación basada en eventos al ingresar a la página

Existen diferencias obvias entre estos dos escenarios de activación en Android, ya sea que se evoquen mediante iframe o location.href, tomemos el Chrome de Xiaomi 1s como ejemplo:

 <a id=goApp href=javascript:void(0);>Haz clic en mí para abrir la APLICACIÓN</a>

Los eventos vinculantes impulsan manualmente la evocación:

 // Evocado con éxito window.onload = function () { $('#goApp').on(click, function () { window.lib.callapp(nativeUrl);//iframe //window.location.href = nativeUrl; });};

Ingrese a la página para invocar directamente:

 //Recuperación fallida window.onload = function () { window.lib.callapp(nativeUrl);//iframe //window.location.href = NativeUrl;};

Vincular evento, js evocar

 // Recuperación fallida window.onload = function () { $('#goApp').on(click, function () { window.lib.callapp(nativeUrl);//iframe //window.location.href = nativeUrl; }); $('#goApp).trigger('hacer clic');};

Originalmente, pensé que el método de $('#goApp).trigger('click'); era el mismo que hacer clic manualmente, pero el rendimiento real es que el rendimiento de los eventos activados por js es tan inválido como el salto directo de página.

En la publicación del blog de referencia, podemos ver que la plataforma Android y varios fabricantes de aplicaciones son muy diferentes. Por ejemplo, Chrome ya no admite saltos de esquemas de activación a través de js (clics de no usuarios), configuración de direcciones iframe src, etc. adelante. Por lo tanto, todavía existe una gran diferencia entre la activación de js y los clics directos del usuario, que pueden ser similares a las restricciones en la reproducción de audio.

Después de las pruebas y análisis anteriores, básicamente se ha determinado que es más apropiado utilizar window.location.href para ios y iframe para Android. Cuando usamos iframe para evocar, generalmente manejamos el error de evocación descargándolo directamente. Sin embargo, hay un problema aquí, es decir, el navegador no puede detectar si la evocación se realizó correctamente. La evocación es exitosa, el navegador seguirá apareciendo. La experiencia de descargar información es muy pobre. Por supuesto, también necesitamos manejar algunas funciones de devolución de llamada exitosas o fallidas. Tal vez nuestro escenario solo necesite ser evocado y no requiera descarga después de una falla.

Con respecto al uso de location.href para evocar la aplicación nativa en el iPhone, el método de saltar a la página intermedia puede ser mejor que el procesamiento directo de la página actual.

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.