Como saber se um usuário está usando seu site ou seu aplicativo

Há muitos casos em que pode ser útil diferenciar entre uma pessoa que está visualizando o seu site no navegador e uma pessoa que o está visualizando por meio do seu aplicativo. Talvez você queira ver a análise de como seu aplicativo está sendo adotado pelos usuários ou queira mostrar um conteúdo diferente para os usuários do aplicativo.

Assim como há vários casos de uso, também há várias maneiras de atingir esse objetivo. Vamos examiná-las uma a uma.

Com base no agente do usuário

O agente do usuário é uma cadeia de caracteres curta que o navegador envia aos sites sempre que está carregando uma página. O agente do usuário contém informações sobre o navegador, por exemplo, um navegador Firefox poderia enviar algo como este agente do usuário:

Com isso, seu site pode detectar que o usuário está usando a versão 47.0 do navegador Mozilla Firefox. Assim como os navegadores, seu aplicativo também envia um agente de usuário que o identifica.

Agentes de usuário usados pelo aplicativo

O aplicativo usa alguns agentes de usuário diferentes:

• $regularUserAgent App-WebView ($operatingSystem) $version
  Esse é o agente de usuário típico usado pelo navegador interno do aplicativo (que exibe o seu site dentro do aplicativo). As solicitações feitas com esse agente de usuário são iniciadas pelo usuário do aplicativo ao navegar entre as páginas.
• App-HttpClient $version
  Este é o agente do usuário utilizado para solicitações feitas pelo aplicativo que não são iniciadas diretamente pelo usuário. Por exemplo, o aplicativo faz algumas solicitações com isto para armazenar partes do site para uso offline. Atualmente, o modo off-line está desativado por padrão, portanto, você provavelmente não verá muitas solicitações com esse agente de usuário.

$version é a versão interna do aplicativo (por exemplo 1.4.8+52) e $operatingSystem é a plataforma na qual o aplicativo está sendo usado (por exemplo ios ou android).

$regularUserAgent é o agente de usuário de um navegador móvel que seria esperado do dispositivo, como Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148

Portanto, um exemplo de agente de usuário que o aplicativo poderia usar no iOS seria: Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 App-WebView (ios) 1.4.8+52

Filtragem para o agente de usuário do aplicativo

Com base no formato do agente do usuário acima, você pode detectar que seu site está sendo carregado pelo aplicativo verificando se o agente do usuário contém "App-WebView". Se quiser verificar também o sistema operacional, você pode verificar adicionalmente se o agente do usuário também contém "(android)" ou "(ios)".

Exemplo: Exibição de conteúdo diferente em um site do WordPress

Se você estiver usando o WordPress, poderá usar o plug-in "UserAgent Content Switcher". O nome do plug-in é bastante descritivo: ele permite que você mostre conteúdo diferente aos usuários com base no agente do usuário. Veja a seguir como você pode configurá-lo (e um exemplo de caso de uso):

1. Instale o plug-in em seu site. Observe que não somos afiliados ao plug-in nem ao seu desenvolvedor; apenas o testamos e ele pareceu ser gratuito e funcionar bem.
2. Na página de configurações do plug-in, adicione um novo tipo com essas configurações:
   • Nome do tipo: Aplicativo
   • Atributo de código curto: aplicativo
   • Agente do usuário: App-WebView
3. Edite uma de suas páginas e mude para o editor de código.
4. Agora você pode criar seções que são visíveis apenas no aplicativo, como esta:

   
   Esse texto fica visível para todos.
   
   [agentsw ua='app']
   Esse texto é visível apenas para os usuários do aplicativo!
   [/agentsw]

   

Usando JavaScript

Com base no agente do usuário

É claro que você pode verificar o agente do usuário não apenas no lado do servidor (conforme detalhado na seção anterior), mas também no JavaScript.

Aqui está um exemplo de como você pode usar o JavaScript para detectar se o usuário está usando o aplicativo ou um navegador:

const isApp = navigator.userAgent.includes("App-WebView");
if (isApp) {
    console.log("The user is using the app.");
} else {
    console.log("The user is using a browser.");
}
    

Verificando se há modificações de HTML

O aplicativo faz pequenas alterações invisíveis no HTML do site que são necessárias para alguns recursos do aplicativo. Também podemos usar essas alterações para detectar se a página foi carregada pelo aplicativo.

Como isso é um pouco complicado, recomendamos que você use executeWhenAppReady no script auxiliar do aplicativo. Em seguida, você pode colocar qualquer código dentro da função executeWhenAppReady, e ele só será executado se a página tiver sido carregada pelo aplicativo. Uma pequena desvantagem desse método é que são necessários alguns milissegundos para que o código seja executado, mesmo que a página tenha sido carregada pelo aplicativo.

Injetando código no aplicativo

Na página de personalização do site, você tem a opção de adicionar qualquer JavaScript ou CSS que o aplicativo deva injetar em cada página carregada. As possibilidades são infinitas, mas, como exemplo, vamos deixar esse texto verde no aplicativo:

<p id="red-text" style="color: red;">This text is red in the browser.</p>

Agora, podemos configurar esse JavaScript para injetar:

document.getElementById("red-text").style.color = "green";

Ou, alternativamente, esse CSS para injetar:

#red-text {
    color: green !important;
}

Portanto, como você pode ver, isso também funciona como uma forma de ter um comportamento diferente no site e no aplicativo.