A complete guide on using the HTML5 Vibration API. The Vibration API is an API specifically made for mobile devices as they are thankfully the 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. Learn more: https://il.ly/journal/vibrate-mobile-phone-web-vibration-api

1. LEARN
ABOUT
THE
VIBRATION
API
ILIAS ISMANALIJEV
THE VIBRATION API
il.ly/vibrate

2. WHAT IS
THE VIBRATION API?
ILIAS ISMANALIJEV
THE VIBRATION API
il.ly/vibrate

3. The Vibration API is an API specifically made for mobile devices as
they are thankfully the only devices that have a vibrate function.
The API allows developers to vibrate a device (in a pattern) for a
given duration.
ILIAS ISMANALIJEV
THE VIBRATION API
il.ly/vibrate

4. HOW
DO I USE
THE VIBRATION API?
ILIAS ISMANALIJEV
THE VIBRATION API
il.ly/vibrate

5. navigator.vibrate
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]);
ILIAS ISMANALIJEV
THE VIBRATION API
il.ly/vibrate

6. navigator.vibrate
The vibration pattern is formed by milliseconds of the duration of the
vibration and the duration of the waiting period.
navigator
.vibrate([1000, 500, 1000]);
vibrate
ILIAS ISMANALIJEV
sleep
vibrate
THE VIBRATION API
il.ly/vibrate

7. navigator.vibrate
You can stop the vibration by calling the function again.
navigator
.vibrate();
navigator
.vibrate(0);
navigator
.vibrate([]);
ILIAS ISMANALIJEV
THE VIBRATION API
il.ly/vibrate

8. WHEN WILL THE
VIBRATION API WORK?
ILIAS ISMANALIJEV
THE VIBRATION API
il.ly/vibrate

9. When Will The Vibration API Work?
The vibration will stop / won’t work when the user:
• Navigates away
• Reloads the page
• Switches to a different tab
• Closes the tab
• Sends the browser to background
• Turns the screen off
• The phone is on silent
ILIAS ISMANALIJEV
THE VIBRATION API
il.ly/vibrate

10. When Will The Vibration API Work?
Browser support is still minimal. Check for the latest information at
http://caniuse.com/#feat=vibration
• Latest Firefox Mobile
• Latest Android Browser
• Latest Chrome Browser
ILIAS ISMANALIJEV
THE VIBRATION API
il.ly/vibrate

11. WHERE
SHOULD I USE
THE VIBRATION API?
ILIAS ISMANALIJEV
THE VIBRATION API
il.ly/vibrate

12. Where Should I use The Vibration API?
Go Ahead
• Buttons
• Notifications
• After appropriate user action
• Video games
ILIAS ISMANALIJEV
Please Don’t
• Advertising
• To replicate native vibrations
• Fake system notifications
• Fake telephone calls
THE VIBRATION API
il.ly/vibrate

13. PLUGIN
jquery.vibrate.js
https://github.com/illyism/jquery.vibrate.js
// Vibration for 50ms on all .button on click
$(“.button”).vibrate();
// Vibrate for 1000ms on touchstart. Stop vibrating on touchend.
$(“.button”).vibrate({
duration: 1000,
trigger: “touchstart”
});
ILIAS ISMANALIJEV
THE VIBRATION API
il.ly/vibrate

14. TRY IT OUT NOW!
I’ve written a more in-depth article on the vibration api with more code samples and experiments. Look up the article on your mobile device and try all
of them out right away.
http://www.illyism.com/journal/vibration-api
ILIAS ISMANALIJEV
THE VIBRATION API
il.ly/vibrate