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

Atualizado em 6. maio 2024 por Jan Bunk

Um robô humanoide inspecionando um aplicativo e um navegador para encontrar diferenças, arte digital

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

A filtragem por agente de usuário só funciona se você tiver configurado o aplicativo para ajustar o agente de usuário que ele usa. Você pode habilitar esta opção nas configurações de navegação do seu aplicativo. Abrir configurações de navegação
Se você não quiser ativar essa opção, verifique os outros métodos de filtragem apresentados neste artigo.

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:

Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0

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

With the Default WordPress Editor

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 Uma captura de tela do formulário preenchido com as informações acima.
  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]
    Uma captura de tela do texto acima no editor de código do WordPress.

With Elementor

If you're using Elementor, you can instead use the free Powerpack plugin with the powerpack-webtoapp extension plugin. Here's how it works:

  1. Install the Powerpack plugin through the WordPress store.
  2. Download the powerpack-webtoapp plugin as a zip file and install it.
    The powerpack-webtoapp plugin (and the idea to use Powerpack on Elementor websites) was created by ALL IN APPLI. They use the plugin to manage multiple webtoapp.design apps and generously decided to share it.
  3. Now you can set specific elements to only be displayed in the app. A screenshot of the Powerpack settings.

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.

A filtragem por agente de usuário só funciona se você tiver configurado o aplicativo para ajustar o agente de usuário que ele usa. Você pode habilitar esta opção nas configurações de navegação do seu aplicativo. Abrir configurações de navegação

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.");
}
    
Como alternativa, você pode usar getAppPlatform do script auxiliar do aplicativo, que funciona de forma muito semelhante.

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;
}
Uma captura de tela da personalização do site preenchida.

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

Artigos Relacionados


Um robô humanoide usando uma lupa para olhar um smartphone. O smartphone exibe as letras PWA nele, arte digital

Aplicativos Web progressivos versus aplicativos nativos

Você quer levar seu site para o próximo nível? Veja como os aplicativos progressivos da Web se comparam aos aplicativos nativos padrão e como você pode transformar seu site em um aplicativo.

Um robô humanoide com um cronômetro físico supervisionando um chão de fábrica com robôs trabalhando em mesas, arte digital

Publicamos os aplicativos da 238 - Veja quanto tempo levou a avaliação do aplicativo

Publicamos muitos aplicativos e monitoramos o tempo necessário para colocá-los nas lojas de aplicativos, incluindo os tempos de rejeição e reenvio de aplicativos.

Imagem com texto: Preparando sua conta de desenvolvedor Apple para atualizar seu aplicativo existente

Passos necessários para que possamos atualizar seu aplicativo iOS existente

Esta guia explica todos os passos que você precisa completar para nos deixar atualizar seu aplicativo que já está publicado na Apple App Store.


Autor Jan Bunk
Escrito por
Jan Bunk

Olá, eu sou Jan! Eu criei a webtoapp.design em 2019 enquanto estudava ciência da computação na universidade. Muita coisa mudou desde então - não só me formei, mas também não sou mais apenas eu que estou rodando a webtoapp.design. Nós crescemos para uma equipe global e totalmente remota e temos acumulado muita experiência em desenvolvimento e publicação de aplicativos. Nós criamos e publicamos centenas de aplicativos nas lojas de aplicativos, onde eles já foram baixados centenas de milhares de vezes.