User-Agent vs. Detecção de Recursos: o que usar, quando e como?

Visão geral

Ao oferecer funcionalidades diferentes conforme o ambiente do navegador ou do dispositivo, User-Agent Sniffing e Feature Detection são duas abordagens representativas.
Recentemente, tem sido recomendado priorizar Feature Detection do ponto de vista de manutenibilidade e segurança.

---

1. User-Agent Sniffing

É uma forma de identificar o dispositivo ou o navegador analisando a string de User-Agent.
É útil para identificar o modelo do dispositivo, mas é sensível a atualizações e seu uso vem sendo gradualmente limitado com o fortalecimento das políticas de privacidade.

navigator.userAgentData.getHighEntropyValues(['model', 'platform'])  

---

2. Feature Detection

É uma abordagem que verifica se a funcionalidade em si é suportada e faz o desvio condicional com base nisso.
Pode ser aplicada de forma segura e flexível, independentemente do tipo de navegador ou dispositivo.

if ('fetch' in window) {  
  // usar a API fetch  
}  

---

3. Bibliotecas: Modernizr & Sniffr

Modernizr é uma biblioteca que facilita o uso de Feature Detection e permite gerar um build contendo apenas os recursos desejados.
Sniffr é uma biblioteca que facilita o parsing de informações baseadas em User-Agent.

---

4. Possibilidades de detecção por plataforma

• No Android, é possível extrair até o nome do modelo (SM-xxxx etc.)
• No iOS, é possível distinguir iPhone/iPad, mas a identificação do modelo é limitada
• No Mac/Windows, é possível verificar até a versão do sistema operacional, mas identificar o dispositivo é difícil

---

5. Outras informações detectáveis

• Número de núcleos de CPU: navigator.hardwareConcurrency
• Quantidade de memória: navigator.deviceMemory
• Velocidade da rede: navigator.connection.effectiveType

---

6. Exemplo de abordagem híbrida

Também é possível fazer uma detecção de ambiente mais refinada combinando User-Agent e Feature Detection.
Ex.: detectar modelos com notch, verificar se é Apple Silicon e avaliar suporte a funcionalidades

environment.supportsServiceWorker = 'serviceWorker' in navigator;  

---

7. Preparação para o futuro: Privacy Sandbox e User-Agent Reduction

O Google está reduzindo a string de User-Agent e, para lidar com isso, recomenda-se o uso da User-Agent Client Hints API.
Essa API fornece informações do usuário de forma mais estruturada e mais amigável à privacidade.

navigator.userAgentData.getHighEntropyValues(['platform', 'model']);  

---

Conclusão

• Priorize Feature Detection como abordagem padrão
• Minimize a detecção baseada em User-Agent e, quando necessário, use tecnologias modernas (APIs)
• Para acompanhar os padrões futuros, também vale a pena se preparar para novas abordagens, como Client Hints.