javascript - practices - ¿Cómo detectar páginas cuando un usuario navega dentro de Twitter en la aplicación?
twitter image card (2)
Quiero poder detectar usuarios cuando navega por una página web dentro de la aplicación de twitter. Al detectar, solo quiero agregar una clase de cuerpo que usaré para cambiar la forma en que la página se ve para los usuarios dentro de la aplicación de Twitter. Sin embargo, todos mis intentos han fracasado hasta ahora.
Puedo detectar webview dentro de la aplicación de Facebook usando el siguiente código
var ua = navigator.userAgent;
if ((ua.indexOf("FBAN") > -1) || (ua.indexOf("FBAV") > -1)) {
return ''facebook'';
}
He mirado a mi alrededor / he buscado en Google / he comprobado otras soluciones de StackOverflow. Sin embargo, no pude encontrar una solución donde pueda detectar Twitter en la aplicación. Es decir, quiero detectar cuándo un usuario navega por una página dentro de la aplicación de Twitter.
Las cosas que he probado y fallado están abajo.
if (/Twitter for/i.test(nua) === true) {
return ''twitter'';
}
o
if (/////t.co///i.test(document.referrer) === true && /Safari///.test(nua) === false) {
return ''twitter'';
}
o comprobando el navegador, el dispositivo, el proveedor, el modelo, el tipo de dispositivo, el motor, el sistema operativo, la versión del sistema operativo (¿por qué lo comprobé?!?). Lo comprobé utilizando Modernizr; sin embargo, no se encontró ninguna diferencia entre Safari independiente y Twitter dentro de la aplicación. También, verifique usando Detectar si el usuario está usando webview para Android / iOS o un navegador regular
También probé lo siguiente con fracaso
var userAgent = window.navigator.userAgent.toLowerCase(),
safari = /safari/.test( userAgent ),
ios = /iphone|ipod|ipad/.test( userAgent );
var standalone = window.navigator.standalone,
userAgent = window.navigator.userAgent.toLowerCase(),
safari = /safari/.test( userAgent ),
ios = /iphone|ipod|ipad/.test( userAgent );
if( ios ) {
if ( safari ) {
$(''.debug'').prepend(''Yeah I am a browser in ios'');
} else if ( !safari ) {
$(''.debug'').prepend(''Yeah I am a webview in ios'');
}
} else {
$(''.debug'').prepend(''Yeah I am NOT a ios'');
}
if( ios ) {
if ( !standalone && safari ) {
$(''.debug'').prepend(''Yeah I am a browser in ios'');
} else if ( standalone && !safari ) {
$(''.debug'').prepend(''Yeah I am a standaline in ios'');
} else if ( !standalone && !safari ) {
$(''.debug'').prepend(''Yeah I am WEBVIEW'');
}
} else {
$(''.debug'').prepend(''Yeah I am NOT IOS'');
}
var isWebView = !/safari/.test( window.navigator.userAgent.toLowerCase()) || navigator.platform === ''iOS'' || navigator.platform === ''iPhone''
$(''.debug'').prepend(''<br>isWebView? : '' + isWebView + "<br>");
$(''.debug'').prepend(''<br>AM I WEBVIEW?: '' + /AppName//[0-9/.]+$/.test(navigator.userAgent));
var is_uiwebview = /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(navigator.userAgent);
var is_safari_or_uiwebview = /(iPhone|iPod|iPad).*AppleWebKit/i.test(navigator.userAgent);
$(''.debug'').prepend(''<br> is_uiwebview :'' + is_uiwebview);
$(''.debug'').prepend(''<br> is_safari_or_uiwebview :'' + is_safari_or_uiwebview);
var uaSafari = navigator.userAgent.match(/Safari/i)
var uaSafariInput = navigator.userAgent.match(/Safari/i).input
var uaSafariIndex = navigator.userAgent.match(/Safari/i).index
$(''.debug'').prepend(''<br> '' + uaSafari + ''<br>'' + uaSafariInput + ''<br>'' + uaSafariIndex + ''<br>'' + navigator.vendor + ''<br>'' + navigator.product + ''<br>'' + navigator.productSub + ''<br>'' + navigator.languages.length + ''<br>'' + navigator.doNotTrack + ''<br>'' + navigator.maxTouchPoints + navigator.maxTouchPoints);
//Check headers and see if any difference there
var req = new XMLHttpRequest();
req.open(''GET'', document.location, false);
req.send(null);
var headers = req.getAllResponseHeaders().toLowerCase();
$(''.debug'').prepend(''<br> headers /t '' + headers);
if (/Twitter for/i.test(navigator.userAgent) === true) {
$(''.debug'').prepend(''<br> Test1 '');
}
$(''.debug'').prepend(''<br> Document referrer is : ''+ document.referrer + " <br> ");
if (/////t.co///i.test(document.referrer) === true && /Safari///.test(navigator.userAgent) === false) {
$(''.debug'').prepend(''<br> Test2 '');
}
}
No creo que sea posible detectar el navegador de la aplicación de Twitter en JavaScript, porque utiliza una vista web genérica sin propiedades identificables.
La mayoría de sus ejemplos se basan en la búsqueda de la cadena de agente de usuario para palabras clave específicas. Aquí hay una comparación de las cadenas de agente de usuario entre los navegadores relevantes en iOS 11 para iPad en base a una prueba que acabo de realizar:
Safari
Mozilla/5.0 (iPad; CPU OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A5372a Safari/604.1
Facebook (en la aplicación)
Mozilla/5.0 (iPad; CPU OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Mobile/15A5372a [FBAN/FBIOS;FBAV/140.0.0.63.89;FBBV/70896504;FBDV/iPad4,2;FBMD/iPad;FBSN/iOS;FBSV/11.0;FBSS/2;FBCR/AT&T;FBID/tablet;FBLC/en_US;FBOP/5;FBRV/0]
Twitter (en la aplicación)
Mozilla/5.0 (iPad; CPU OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A5372a Safari/604.1
Puedes ver que el agente de usuario del navegador de Twitter es idéntico a Safari.
Obviamente, esto no es una solución a su problema, sino más bien una explicación de por qué no ha encontrado una respuesta real.
Puede verificar si navigator.mediaDevices está indefinido. Dado que webRTC no es compatible con las vistas web, no estará definido en Twitter pero estará presente en Safari.