Compartilhe esta publicação
Vibração com JavaScript: utilizando a Vibration API do HTML5
Dentre as incríveis APIs do HTML5, uma muito interessante (e útil) se destaca, especialmente nestes dias em que discutimos tanto sobre Progressive Web Apps: A API para vibração de dispositivos móveis.
A API é bem pequena e parece simples, mas algumas vezes, torna-se complicado criar algum padrão específico que podemos desejar.
Muitas de nossas apps, páginas, ferramentas, demos ou games poderiam usufruir desta API para oferecer um pouco mais de interatividade ao conteúdo.
A API
Esta API é acessada através do método vibrate no object navigator e aceita um único parâmetro, o padrão da vibração.
navigator.vibrate(/* pattern */); Este método retorna true caso tudo tenha dado certo (sim, isto inclui até mesmo computadores que não tenham o "vibrador") ou false caso algo tenha saído errado (a vibração era longa demais ou o padrão inválido, com algum dos valores sendo grande demais para o tipo inteiro).
Para parar ou interromper uma vibração, basta chamarmos o método passando o valor 0 ou equivalentes, como uma array vazia ou uma array que contenha somente zeros.
Suporte
O site CanIUse nos dá uma boa visão do suporte atual desta API.
Suporte da Vibration API em 2016 Como pode-se perceber, ainda não há suporte em alguns navegadores. Entretanto, os principais usados em dispositivos móveis já oferecem suporte a essa funcionalidade. Por isso, é interessante detectarmos o método antes de sairmos usando:
if ('vibrate' in navigator) { // shake it up, baby } Padrão de vibração
Criar um padrão de vibração é o que pode ser meio complicado!
O parâmetro passado pode ser um inteiro, que representa a duração da vibração, ou uma array contendo o padrão duração/intervalo intercalado entre seus valores. Tudo em milissegundos.
Por exemplo:
navigator.vibrate(250); Este exemplo vibrará o dispositivo por 250ms.
Já no exemplo abaixo, vibraremos o aparelho por 200ms, faremos uma pausa de 250ms e então o dispositivo vibrará por mais 300ms:
navigator.vibrate([200, 250, 300]); Ferramentas
Infelizmente, existe uma certa carência de ferramentas para testar ou criar padrões de vibração. Não conseguimos ter um feedback real do padrão de vibração nem mesmo ao usarmos o console de desenvolvimento em navegadores que oferecem ferramentas para simular dispositivos móveis.
Isto nos levou, aqui na Nasc, a construir uma ferramenta para criar e testar os padrões de vibração, de uma forma visual.
Trata-se do Vibe.js.
É a ferramenta exibida no header deste artigo. Sinta-se à vontade para usar, testar, dar uma estrelinha no Github e enviar feedback :)
Concluindo
Enfim, esta é mais uma daquelas APIs muito legais que temos disponíveis, mas que normalmente acabamos esquecendo de usar ou de implementar em projetos nos quais seu uso faria todo o sentido!
Que tal vibrar o dispositivo quando uma mensagem chega naquela sua WebApp que usa a API de notificações? Ou então, ao excluir algum item de uma lista! Poderíamos sinalizar explosões em games ou, mais legal ainda, na execução de vídeos.
Alguma outra ideia mirabolante que poderíamos fazer com esta API? (preciso lembrar que nosso código de conduta é aplicado também a comentários? Se é que tu me entende!)
Confere aí mais uns links úteis: