Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Learn About The Vibration API

26,926 views

Published on

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.

Published in: Technology
  • Be the first to comment

Learn About The Vibration API

  1. 1. LEARN ABOUT THE VIBRATION API ILIAS ISMANALIJEV THE VIBRATION API il.ly/vibrate
  2. 2. WHAT IS THE VIBRATION API? ILIAS ISMANALIJEV THE VIBRATION API il.ly/vibrate
  3. 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. 4. HOW DO I USE THE VIBRATION API? ILIAS ISMANALIJEV THE VIBRATION API il.ly/vibrate
  5. 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. 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. 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. 8. WHEN WILL THE VIBRATION API WORK? ILIAS ISMANALIJEV THE VIBRATION API il.ly/vibrate
  9. 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. 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. 11. WHERE SHOULD I USE THE VIBRATION API? ILIAS ISMANALIJEV THE VIBRATION API il.ly/vibrate
  12. 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. 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. 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

×