Como Saber se um Usuário Está Usando Seu Site ou Seu App

Existem muitos casos em que pode ser útil diferenciar entre uma pessoa que está visualizando seu site no navegador e uma pessoa que está visualizando através do seu app. Talvez você queira ver análises de como seu app está sendo adotado pelos usuários ou queira mostrar conteúdo diferente para os usuários do app.

Assim como existem vários casos de uso, também existem várias maneiras de alcançar esse objetivo. Vamos passar por elas uma a uma.

Com base no User Agent

O user agent é uma string curta que o navegador envia para os sites sempre que está carregando uma página. O user agent contém informações sobre o navegador, por exemplo, um navegador Firefox poderia enviar algo como este user agent:

A partir disso, seu site pode detectar que o usuário está usando a versão 47.0 do navegador Mozilla Firefox. Assim como os navegadores, seu app também envia um user agent que o identifica.

Agentes de usuário usados pelo aplicativo

O aplicativo usa alguns agentes de usuário diferentes:

• $regularUserAgent App-WebView ($operatingSystem) $version
  Este é o user agent típico usado pelo navegador interno do app (que exibe seu site dentro do app). As solicitações feitas com este user agent são iniciadas pelo usuário do app 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. O modo offline está desativado por padrão hoje em dia, então você provavelmente não verá muitas solicitações com este user agent.

$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

Então, um exemplo de user-agent que o app 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

Filtrando pelo User Agent do App

Com base no formato de user agent acima, você pode detectar que seu site está sendo carregado pelo app verificando se o user agent contém 'App-WebView'. Se você quiser verificar o sistema operacional também, pode adicionalmente verificar se o user agent também contém '(android)' ou '(ios)'.

Exemplo: Mostrando Conteúdo Diferente em um Site WordPress

Com o Editor Padrão do WordPress

Se você está usando WordPress, pode usar o plugin 'UserAgent Content Switcher'. O nome do plugin é bastante descritivo: ele permite que você mostre conteúdo diferente para os usuários com base no user agent deles. Veja como configurá-lo (e um exemplo de caso de uso):

1. Instala o plugin no teu site. Nota que não somos afiliados ao plugin ou ao seu desenvolvedor, apenas testamos e pareceu ser gratuito e funcionar bem.
2. Na página de configurações do plugin, adiciona um novo tipo com estas configurações:
   • Nome do tipo: App
   • Atributo do Short-code: app
   • User Agent: App-WebView
3. Edita uma das tuas páginas e muda para o editor de código.
4. Agora podes criar seções que são visíveis apenas no app assim:

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

   

Com Elementor

Se estás a usar o Elementor, podes usar o plugin gratuito Powerpack com a extensão powerpack-webtoapp. Aqui está como funciona:

1. Instala o plugin Powerpack através da loja do WordPress.
2. Baixa o plugin powerpack-webtoapp como um arquivo zip e instala-o.
   O plugin powerpack-webtoapp (e a ideia de usar o Powerpack em sites Elementor) foi criado pela ALL IN APPLI. Eles usam o plugin para gerenciar vários apps do webtoapp.design e generosamente decidiram compartilhá-lo.
3. Agora podes definir elementos específicos para serem exibidos apenas no app.

Usando JavaScript

Com base no User Agent

Claro que podes verificar o user agent não só no lado do servidor (como detalhado na seção anterior), mas também em JavaScript.

Aqui está um exemplo de como podes usar JavaScript para detectar se o usuário está usando o app 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 Modificações no HTML

O app faz pequenas mudanças invisíveis no HTML do site que são necessárias para algumas funcionalidades do app. Também podemos usar essas mudanças para detectar se a página foi carregada pelo app.

Como isso é um pouco complicado, recomendamos que uses executeWhenAppReady do script auxiliar do app. Então podes colocar qualquer código dentro da função executeWhenAppReady, e ele só será executado se a página foi carregada pelo app. Uma pequena desvantagem desse método é que leva alguns milissegundos antes que o código seja executado, mesmo se a página foi carregada pelo app.

Injetando Código no App

Na página de personalização do teu site, tens a opção de adicionar qualquer JavaScript ou CSS que o app deve injetar em cada página carregada. As possibilidades são infinitas com isso, mas como exemplo, vamos fazer este texto ficar verde no app:

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

Agora poderíamos configurar este JavaScript para injetar:

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

Ou alternativamente, este CSS para injetar:

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

Como podes ver, isso também funciona como uma maneira de ter comportamentos diferentes no site e no app.