Estaremos hoje testando o window.navigator.vibrate, iremos entender e testar algumas funcionalidade e aplicações do window.navigator.vibrate(). Essa funcionalidade é especialmente útil na implementação de PWA‘s em games ou aplicações
O método vibrate() faz parte do objeto window.navigator.vibrate, está disponível em Navegadores Modernos nativamente. Ele é utilizado para pulsar o hardware de vibração de dispositivos, quando ele existir.
Caso o dispositivo não suportar vibração, este método simplesmente não terá efeito algum, retornando false.
Isso também ocorrerá se uma nova chamada do método for chamada durante um processo em execução, esse será realizado uma nova chamada, interrompendo a anterior.
O método vibrate() espera como parâmetro um número que é a representação em milissegundos ou um array com uma lista de funções que indica a ordem:
SOM | SILÊNCIO | SOM | SILÊNCIO
//o navigator.vibrate() apenas com milissegundos window.navigator.vibrate(1000); //navigator.vibrate() recebendo um array de sons|silêncio window.navigator.vibrate([100,10,200,20,300,30]);
Abaixo estaremos testando o window.navigator.vibrate em um evento numa chamada de um botão um simples alerta. Como mencionamos, você precisa estar em um dispositivo que tenha suporte ao método window.navigator.vibrate.
//função que dispara um alerta e chama função vibrate()
var vibrate1 = function(e){
e.preventDefault;
alert("Vibrate 1000");
window.navigator.vibrate(1000);
}
//função que dispara um alerta e chama função vibrate()
var vibrate2 = function(e){
e.preventDefault;
alert("Vibrate sequencial");
window.navigator.vibrate([100,10,200,20,300,30]);
}
E para chamar nossas funções dois simples botões com as chamadas de nossos métodos:
<button onclick="vibrate1(this)">Vibrate 1</button> <button onclick="vibrate2(this)">Vibrate 2</button>
Um método muito simples, que muitos desconhecem, porém são inúmeras as aplicações para enriquecer suas aplicações PWA’s e outras aplicações. Para visualização dos alertas do exemplo clique AQUI.
Um abraço e até a próxima!
