Downloaded 13 times
![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](https://image.slidesharecdn.com/vibration-140307130247-phpapp01/85/Learn-About-The-Vibration-API-5-320.jpg?cb=1699773733)
![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](https://image.slidesharecdn.com/vibration-140307130247-phpapp01/85/Learn-About-The-Vibration-API-6-320.jpg?cb=1699773733)
![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](https://image.slidesharecdn.com/vibration-140307130247-phpapp01/85/Learn-About-The-Vibration-API-7-320.jpg?cb=1699773733)
Learn About The Vibration API
- 1. LEARN ABOUT THE VIBRATION API ILIAS ISMANALIJEV THE VIBRATIONAPI il.ly/vibrate
- 2. WHAT IS THE VIBRATIONAPI? ILIAS ISMANALIJEV THE VIBRATION API il.ly/vibrate
- 3. The Vibration APIis 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 THEVIBRATION API? ILIAS ISMANALIJEV THE VIBRATION API il.ly/vibrate
- 5. navigator.vibrate The navigator.vibrate functioneither 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 patternis 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 stopthe 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 VIBRATIONAPI WORK? ILIAS ISMANALIJEV THE VIBRATION API il.ly/vibrate
- 9. When Will TheVibration 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 TheVibration 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 THEVIBRATION API? ILIAS ISMANALIJEV THE VIBRATION API il.ly/vibrate
- 12. Where Should Iuse 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 for50ms 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 OUTNOW! 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