Vibration API

The Vibration API is an API specifically made for mobile devices as they are thankfullythe only devices that have a vibrate function. The API allows developers to vibrate a device (in a pattern) for a given duration.

The vibration API is implemented in navigator.vibrate. So calling the function makes your phone vibrate. You can test if your browser is recent enough to have thevibrate function in navigator.

Mozilla had their own implementation mozVibrate so some browsers may support that instead.

var canVibrate = "vibrate" in navigator || "mozVibrate" in navigator;

if (canVibrate && !("vibrate" in navigator))
    navigator.vibrate = navigator.mozVibrate;

However, this doesn't mean that your device can vibrate. Just that it's recent enough. There are a few requirements you need to meet.

1. You need the hardware for it.
2. The page needs to be visible.
3. Browser-specific implementation prevents the vibration.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Usage

The navigator.vibrate function either accepts a number or an array of numbers.

// vibrate for 1000 ms
navigator.vibrate(1000);

// or alternatively
navigator.vibrate([1000]);

The vibration pattern is formed by milliseconds of duration of the vibration and the duration of the waiting period.

// device will     vibrate    wait    vibrate
navigator.vibrate([1000,      500,    1000]);

Any new call stops the previous vibration sequence. If the page is no longer visible, like locking the device, minimizing the window, moving to another tab then the vibration also stops.

// Stop vibrating
navigator.vibrate();
navigator.vibrate(0);
navigator.vibrate([]);

Start / Stop

We can keep vibrating until the user stops touching the device. The vibration stops after a while though. But it's not meant to be pressed infinitely anyway.

var isMobile = (/iPhone|iPod|iPad|Android|BlackBerry/).test(navigator.userAgent);

$(".button").on(isMobile ? 'touchstart' : 'mousedown', function(e) {
    navigator.vibrate(Infinity); // Infinity is a number
});

$(".button").on(isMobile ? 'touchend' : 'mouseup', function(e) {
    navigator.vibrate(0);
});

Buttons

The best use case I can imagine for this API is for buttons. You get a little haptic feedback like you get for native apps. This can be done by setting the vibration to a very low number. For me 50ms seems ideal.

var isMobile = (/iPhone|iPod|iPad|Android|BlackBerry/).test(navigator.userAgent);

$(".button, a").on(isMobile ? 'touchend' : 'click', function(e) {
    navigator.vibrate(50);
});

How Long is Long Enough?

If you're not sure how long the haptic feedback should be. You can experiment with various timespans. Try all of these buttons out a mobile device. Anything above 100msseems to long for me.

Notifications

Another great use case are for notifications. These can be a bit longer than haptic feedback. Patterns can also be used to differentiate.

Please be aware of the vibration notification on the phone and try not to replicate them as to not to confuse the user. Some visual feedback together with the vibration would be 

// Vibrate on completion
var pattern = [500, 100, 500];
$(".progress .bar")
    .css({width: "0%"})
    .animate({width: "100%"}, {
        duration: 1000,
        complete: function() {
            if (canVibrate) navigator.vibrate(pattern);
        }
    });