Detectando o sistema operacional iOS / Android

Eu fiz algumas pesquisas e essa pergunta surgiu, mas não da maneira que pretendo. Estou criando uma página para um cliente que é um código QR, que é um local para baixar um aplicativo. Para que ele não precise imprimir 2 códigos QR em uma página, gostaria de detectar o sistema operacional atual (Apple / Android / Outro [não suportado]) e modificar meus elementos com base nesse valor.

Eu observei o script "detectmobilebrowsers" e que visa apenas determinar se o usuário é ou não móvel, enquanto eu gostaria de descobrir qual sistema operacional o usuário está executando e sugerir a melhor versão do aplicativo.

Outras respostas que achei semelhantes a essa pergunta pareciam desatualizadas ou não confiáveis ​​(não tem detecção para navegadores de tablets Android), por isso estou procurando algo novo. Como posso conseguir isso? (De preferência, usando jQuery - Javascript - PHP nessa ordem).

Você pode testar a sequência do agente do usuário:

/**
 * Determine the mobile operating system.
 * This function returns one of 'iOS', 'Android', 'Windows Phone', or 'unknown'.
 *
 * @returns {String}
 */
function getMobileOperatingSystem() {
  var userAgent = navigator.userAgent || navigator.vendor || window.opera;

      // Windows Phone must come first because its UA also contains "Android"
    if (/windows phone/i.test(userAgent)) {
        return "Windows Phone";
    }

    if (/android/i.test(userAgent)) {
        return "Android";
    }

    // iOS detection from: http://stackoverflow.com/a/9039885/177710
    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
        return "iOS";
    }

    return "unknown";
}

Solução 1: Sniffing do agente do usuário

Para Android e iPhone:

if( /Android|webOS|iPhone|iPad|iPod|Opera Mini/i.test(navigator.userAgent) ) {
 // run your code here
}

Se você deseja detectar todos os dispositivos móveis, incluindo blackberry e Windows phone, pode usar esta versão abrangente:

var deviceIsMobile = false; //At the beginning we set this flag as false. If we can detect the device is a mobile device in the next line, then we set it as true.


if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
    || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) {
   deviceIsMobile = true;
}

if(deviceIsMobile){
    // run your code here
}

Contras : as sequências de agentes do usuário estão mudando e sendo atualizadas à medida que novos telefones e marcas estão chegando dia após dia. Então, você precisa manter esta lista atualizada se quiser suportar todos os dispositivos móveis.

Solução 2: biblioteca JS de detecção móvel

Você pode usar a biblioteca JS de detecção móvel para fazer isso.

Contras : esses recursos de detecção de dispositivos baseados em JavaScript podem funcionar APENAS para a mais nova geração de smartphones, como os dispositivos iPhone, Android e Palm WebOS. Esses recursos de detecção de dispositivo NÃO podem funcionar em smartphones mais antigos que não oferecem suporte a JavaScript, incluindo dispositivos BlackBerry, PalmOS e Windows Mobile mais antigos.

Pode-se usar navigator.platform para obter o sistema operacional no qual o navegador está instalado.

function getPlatform() {
   var platform = ["Win32", "Android", "iOS"];

   for (var i = 0; i < platform.length; i++) {

       if (navigator.platform.indexOf(platform[i]) >- 1) {

           return platform[i];
       }
   }
}

getPlatform();

Este problema já foi resolvido aqui: Qual é a melhor maneira de detectar um dispositivo móvel no jQuery? .

Na resposta aceita, eles basicamente testam se é um iPhone, um iPod, um dispositivo Android ou o que quer que seja verdadeiro. Basta manter os que você deseja, por exemplo if( /Android/i.test(navigator.userAgent) ) { // some code.. }, retornará verdadeiro apenas para agentes do usuário Android.

No entanto, os user-agents não são realmente confiáveis, pois podem ser alterados. O melhor ainda é desenvolver algo universal para todas as plataformas móveis.

Você também pode conseguir isso com o user agent no php:

$userAgent = strtolower($_SERVER['HTTP_USER_AGENT']);

if(stripos($userAgent,'android') !== false) { // && stripos($userAgent,'mobile') !== false) {
  header('Location: http://oursite.com/download/yourApp.apk');

exit();

}

Se você estiver usando o React Js no seu site, use https://www.npmjs.com/package/react-device-detect

Você também pode criar links dinâmicos do Firbase que funcionarão conforme sua exigência. Ele suporta múltiplas plataformas. Este link pode ser criado, tanto manualmente quanto via programação. Você pode incorporar esse link no código QR.

Se o aplicativo de destino estiver instalado, o link redirecionará o usuário para o aplicativo. Se não estiver instalado, ele será redirecionado para a Play Store / App Store / Qualquer outro site configurado.

Para este e outros tipos de detecção de clientes, sugiro esta biblioteca js: http://hictech.github.io/navJs/tester/index.html

Para sua resposta específica, use:

navJS.isIOS() || navJS.isAndroid()

Usando o cordova-device-plugin, você pode detectar

device.platform

será "Android" para Android e "Windows" para Windows. Funciona no dispositivo e ao simular no navegador. Aqui está um brinde que exibirá os valores do dispositivo:

    window.plugins.toast.showLongTop(
    'Cordova:     ' + device.cordova + '\n' +
    'Model:       ' + device.model + '\n' +
    'Platform:    ' + device.platform + '\n' +
    'UUID:        ' + '\n' +
                      device.uuid + '\n' +
    'Version:     ' + device.version + '\n' +
    'Manufacturer ' + device.manufacturer + '\n' +
    'isVirtual    ' + device.isVirtual + '\n' +
    'Serial       ' + device.serial);