Categorias

5 APIs de JavaScript que vão turbinar seu site móvel

Tenho certeza de que você já converteu seu site para dispositivos móveis ou até mesmo já criou diretamente pensando na plataforma. Talvez até já tenha criado um aplicativo ou outro com HTML5, quem sabe? Mas será mesmo que você está utilizando todo o poder do JavaScript para seus projetos?

Hoje em dia existem APIs JavaScript suportadas pelos principais navegadores que conseguem acessar métodos e eventos exclusivos das plataformas móveis. Você não precisa de um jQuery ou um Bootstrap ou outro framework para acessá-las: elas fazem parte da especificação da linguagem e estão disponíveis para todos.

Trazemos aqui 5 APIs JavaScript que permitem que sua página web acesse diretamente componentes do hardware do dispositivo móvel para turbinar a experiência do usuário.

1) Vibração

vibration

Esta é uma API muito simples, consistindo de um único método que ativa a vibração do aparelho. Você pode utilizar o recurso como uma resposta para ações realizadas pelo usuário em sua página por exemplo, apenas não abuse.

O método é chamado vibrate(). Ele pertence ao objeto window.navigator e aceita valores numéricos que especificam os milissegundos de duração da vibração do aparelho.

Esta API é suportada por quase todos os principais navegadores, as únicas exceções sendo o Internet Explorer e o Safari. Detectar a compatibilidade é muito fácil, como você pode conferir abaixo:

if (window.navigator && window.navigator.vibrate) {
// API funciona normalmente
} else {
// API não tem suporte no navegador

Um exemplo simples de uso:

// Vibrando por dois segundos inteiros
navigator.vibrate(2000);

2) Notificações

notification

99% dos usuários de smartphones conhecem perfeitamente o conceito de Notificações. Uma miríade de aplicativos usa este recursos e vários abusam, então todo mundo já conhece. Na web, o conceito também já está chegando, ainda que implementado de diferentes formas, geralmente em redes sociais como Google+, Twitter e Facebook.

Com esta API é possível padronizar a forma como os desenvolvedores notificam os usuários. Uma notificação permite alertar o usuário de qualquer evento fora do contexto normal da página, como a chegada de um comentário novo, por exemplo. Embora a forma como os desenvolvedores possam criar a notificação seja a mesma com esta API, a especificação não determina nem como nem onde a interface deverá exibi-la e consequentemente teremos diferentes estilos para diferentes navegadores.

A Web Notifications API é chamada através da propriedade Notification do objeto window. A instância da notificação é criada via código, da seguinte forma:

var notification = new Notification('Novo comentário', {
body: 'A postagem recebeu um novo comentário. Clique para visualizar!'
});

Para testar a compatibilidade do navegador com a API, use o seguinte código:

if ('Notification' in window) {
// API funciona normalmente
} else {
// API não tem suporte no navegador
}

3) Orientação do Dispositivo

orientation

Precisa descobrir se o dispositivo está posicionado na horizontal ou na vertical? Então, esta é a sua API. Ela é muito útil para um amplo espectro de casos, desde aplicações de mapeamento a jogos. Esta API define diversos eventos que oferecem informação sobre a orientação física e movimento do aparelho.

A API é composta por 3 eventos: deviceorientation, devicemotion e compassneedscalibration, todos do objeto window. O primeiro é disparado quando o acelerômetro detecta uma mudança na orientação do aparelho é bastante intuitiva. O segundo evento é acionado sempre que o dispositivo acelera ou desacelera. O último evento é ativado quando o dispositivo determina que precisa de calibração do compasso.

O suporte a esta API ainda não é pleno, com alguns navegadores oferecendo suporte a todos os eventos enquanto outros suportam apenas este ou aquele evento. É recomendado, então, testar a compatibilidade para cada evento que você necessitará em seu projeto. Por exemplo:

if (window.DeviceOrientationEvent) {
// Evento suportado normalmente
} else {
// O evento não tem suporte no navegador
}

4) Status da Bateria

battery_charge

Esta API fornce informação sobre o nível de bateria do dispositivo. Com esta API, você poderá saber se a bateria está carregando ou não, qual é o prazo estimado para a bateria descarregar por completo ou mesmo seu nível atual de carga.

Estes dados são todos disponibilizados através de quatro propriedades do objeto window.navigator.battery: charging , chargingTime , dischargingTime e level. A API também define eventos que podem ser disparados quando acontecem mudanças nas propriedades: onchargingchange, onchargingtimechange, ondischargingtimechange e onlevelchange.

Esta API é útil para verificar a quantidade de recursos alocados para o site por exemplo. Em um dispositivo com baixa bateria, poderia ser interessante desativar animações em Flash ou música, se a página possuir. A API também pode ser uma tábua de salvação para aplicativos que geram conteúdo, recomendando que o usuário salve seu trabalho antes que a bateria atinja um nível crítico e ocorra perda de dados.

Para detectar o suporte do navegador a esta API, use o seguinte código:

if (window.navigator && window.navigator.battery) {
// API suportada normalmente
} else {
// A API não tem suporte no navegador
}

Um exemplo simples de uso da API, com mensagem de aviso sobre a carga da bateria:

// Exibir mensagem
console.log("A bateria " + (navigator.battery.charging ? "" : "não") + " está carregando");

5) Proximidade

proximity

Esta última API não está disponível para todos os dispositivos, apenas para aqueles dotados de um sensor de proximidade. Como o próprio nome indica, você pode via JavaScript, detectar a proximidade de um objeto em relação ao dispositivo. A distância é calculada pelo sensor.

A API não oferece propriedades ou métodos, apenas dois eventos disparados pelo objeto window. O primeiro evento é o deviceproximity e fornece informação sobre a distância entre o aparelho e o objeto próximo. O segundo evento é o userproximity e serve apenas para especificar se há um objeto próximo ou não.

Dado seu suporte limitado, é fundamental detectar se a API está disponível ou não para uso no aparelho:

if ('ondeviceproximity' in window) {
// API suportada normalmente
} else {
// A API não tem suporte no navegador
}

Um exemplo simples de uso da API, para detectar a presença de um objeto próximo:

window.addEventListener('userproximity', function(event) {
console.log( (event.near ? '' : 'nenhum ') + 'objeto detectado nas proximidades');
});