Usando a API Battery Status em Aplicações Web

A maioria das aplicações web não tem ideia se a pessoa que as está usando está com 8% de bateria em um trem sem carregador à vista. A API Battery Status muda isso — pelo menos em alguns navegadores. Ela permite que seu JavaScript leia o nível de bateria do dispositivo, o estado de carregamento e o tempo estimado restante, para que você possa adaptar o comportamento da sua aplicação de acordo.

Este artigo explica como a API funciona, o que você pode realisticamente fazer com ela e por que você precisa ter cuidado sobre onde e como usá-la.

O Que É a API Battery Status?

A API Battery Status expõe informações da bateria através do método navigator.getBattery(), que retorna uma Promise que resolve para um objeto BatteryManager. Esse objeto fornece quatro propriedades:

• level — um número entre 0 e 1 (por exemplo, 0.72 significa 72%)
• charging — true se o dispositivo estiver conectado à tomada, false caso contrário
• chargingTime — segundos estimados até a carga completa
• dischargingTime — segundos estimados até a bateria esvaziar

Ambas as propriedades de tempo podem retornar Infinity — quando o dispositivo é um desktop sem bateria, quando a estimativa ainda não está pronta, ou quando o navegador deliberadamente retém precisão para limitar o risco de fingerprinting.

Como Usar navigator.getBattery() com Segurança

Sempre verifique o suporte antes de chamar a API. Ela está disponível apenas em contextos seguros (HTTPS), e mesmo assim, apenas em navegadores que a expõem.

Em contextos incorporados, o acesso também pode ser restrito pela battery Permissions Policy.

async function initBatteryMonitor() {
  // Detecção de recursos — não assuma que a API existe
  if (!('getBattery' in navigator)) {
    console.warn('Battery Status API não suportada neste navegador.')
    return
  }

  let battery

  try {
    battery = await navigator.getBattery()
  } catch (err) {
    console.error('Falha ao acessar informações da bateria:', err)
    return
  }

  // Ler valores iniciais
  console.log(`Nível: ${battery.level * 100}%`)
  console.log(`Carregando: ${battery.charging}`)

  // Tratar Infinity graciosamente antes de exibir
  const formatTime = (seconds) =>
    seconds === Infinity ? 'Desconhecido' : `${Math.round(seconds / 60)} min`

  console.log(`Tempo de carregamento: ${formatTime(battery.chargingTime)}`)
  console.log(`Tempo de descarga: ${formatTime(battery.dischargingTime)}`)

  // Ouvir mudanças
  battery.addEventListener('levelchange', () => {
    console.log(`Nível de bateria atualizado: ${battery.level * 100}%`)
  })

  battery.addEventListener('chargingchange', () => {
    console.log(`Estado de carregamento alterado: ${battery.charging}`)
  })
}

initBatteryMonitor()

Os quatro eventos que você pode ouvir são levelchange, chargingchange, chargingtimechange e dischargingtimechange. Cada um dispara quando seu valor correspondente muda.

Casos de Uso Práticos

A API é mais útil quando você quer reduzir o consumo de recursos para usuários com bateria baixa:

• Pausar sincronização em segundo plano ou polling quando battery.level cai abaixo de um limite como 0.2
• Reduzir a complexidade de animações ou desabilitar vídeos com reprodução automática
• Solicitar que os usuários salvem seu trabalho antes que a bateria acabe
• Ajustar o comportamento de PWA — por exemplo, adiando requisições de rede não críticas

Essas são melhorias progressivas. Sua aplicação deve funcionar bem sem elas.

Suporte de Navegadores e Preocupações com Privacidade

É aqui que a API Battery Status fica complicada.

O suporte de navegadores atual é limitado. O Firefox removeu a API porque pesquisadores demonstraram que ela poderia ser usada como um vetor de fingerprinting — a combinação de nível de bateria e valores de tempo era específica o suficiente para ajudar a rastrear usuários entre sites. Em resposta, navegadores baseados em Chromium podem reduzir a precisão ou expor valores padrão para limitar esse risco.

Isso significa que você nunca deve depender da API Battery como um recurso principal. Trate-a como uma melhoria agradável de se ter, e sempre escreva comportamento de fallback para quando ela não retornar nada.

Testando a API Battery em Desenvolvimento

O Chrome DevTools atualmente não fornece um simulador de bateria integrado em Sensors. Para testar o comportamento relacionado à bateria durante o desenvolvimento, você tem algumas opções práticas:

• Use um dispositivo móvel real conectado via depuração remota USB, e observe mudanças reais no estado da bateria.
• Simule a API no seu código substituindo navigator.getBattery por uma função que retorna um objeto BatteryManager falso com as propriedades e eventos que você precisa testar.
• Use substituições de navegador ou bibliotecas de teste como Sinon ou Jest para criar um stub de navigator.getBattery() na sua suíte de testes.

Aqui está um mock mínimo que você pode adicionar ao seu ambiente de desenvolvimento:

function mockBattery({ level = 0.15, charging = false } = {}) {
  const fake = {
    level,
    charging,
    chargingTime: charging ? 3600 : Infinity,
    dischargingTime: charging ? Infinity : 1800,
    addEventListener: () => {},
  }

  navigator.getBattery = () => Promise.resolve(fake)
}

// Simular um dispositivo com bateria baixa e desconectado
mockBattery({ level: 0.08, charging: false })

Essa abordagem dá a você controle total sobre os valores que seu código recebe, sem depender de ferramentas específicas do navegador.

Conclusão

A API Battery Status é uma ferramenta de nicho com limitações reais. O suporte de navegadores é limitado, os valores são intencionalmente imprecisos, e as implicações de privacidade significam que seu futuro é incerto. Mas em ambientes controlados — ferramentas internas, PWAs direcionadas a navegadores baseados em Chromium conhecidos, ou aplicações estilo quiosque — ela pode melhorar significativamente a experiência do usuário.

Use detecção de recursos, trate valores Infinity explicitamente, limpe seus event listeners quando não forem mais necessários, e nunca construa um recurso crítico em cima dela.

Perguntas Frequentes

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.