ios safari vibration api

PWA vibration API

Let's use the navigator to shake your device.

Interaction with the user on a "sensual" level can greatly improve the user experience of your app. Typically, we as devs have to limit ourselves to fancy animations, such as parallax effects or 3D-renders to convey a more realistic feeling inside our apps. But did you know that Progressive Web Apps can deliver so much more? Today we'll take a look at the haptic side of interactions between the web and the user.

Rumble in the (dev-)jungle

As of writing, not all environments provide support for the new Vibration-API. Specifically, every Chromium and Firefox-browser can be used, whereas every variant of Safari/WebKit has no support. Note: every browser on iOS uses WebKit as its engine.

The usage of the API itself is as straightforward as it gets. Here's an example:

To proof that this code is working, simply tap the copy-button in bottom right corner of the code snippet. If your device supports it, then a gentle vibration should be started to acknowledge the copy-to-clipboard action.

We're almost done, let's just take a look at the last features of the API:

And that's about it! Not much to cover, but applied correctly, i.e. not too much in your app and only when it's applicable, the vibration-API is a really great feature to use. I think the best use case is to haptically confirm or deny important actions the user has made, e.g. the copy-action for code in this case or a permanent delete-action in another app.

Suggestions

• MDN Vibration API developer.mozilla.org
• PWA by web.dev web.dev
• Italiano it
• Français fr
• Esperanto eo
• Ελληνικά el
• Afrikaans af

DEV Community

Posted on Mar 14, 2020 • Updated on Apr 29, 2021

Add vibration to your web applications

Android & iOS applications are really powerful when it comes to user experience. You can use many hardware tools that come with your user's devices to play with — for instance — the camera, the accelerometer, or even the vibration.

But as the Web grows, so do the APIs that can communicate with those pieces of hardware.

Today, I'm going to show you how you can add vibration to enhance the user experience of your web applications using the Vibration API.

Our goal today is to create a function that will handle the vibration of the device used to display our application.

Since all devices are not equal in support, and some do not have a vibration chip at all like desktops, we should account for the case when the Vibration API is not supported. In our case, we won't throw any error or do anything special since I consider vibration as a bonus feature, not a requirement for using the application.

Let's code!

Since it is written in JavaScript, and that JavaScript can be run on the client but also on the server thanks to Node.js, we should account for the case when our script is run outside of a browser (by mistake I assume).

If the navigator object is not available in the window global object, this means we are in serious trouble. But anyway, better be sure it is there before getting weird error messages.

Here, we check that the Vibration API is available. If it is not available, it is totally okay! This only means that the device does not have vibration capability. Since most of the time, this is not a big deal (except if you are trully relying on that feature for your application to work), we can simply stop the execution of our function if it is not available.

And there it is! The Vibration API in action. This is how we can tell the browser to vibrate the device for 100 milliseconds. You can even specify an array instead of a single value to create a vibration pattern.

For instance, if we need to vibrate two times for 200 milliseconds, separated by a 100 milliseconds interval, we can do that instead.

See? That easy!

Parameterizing

You may want to customize the way the vibration happens in your application. Perhaps considering the user doing a specific action means a specific vibration. We should enable parameters for our function to make it more versatile.

That way, we can call our vibrate function like so.

Hitting the button will trigger three vibrations of 200 milliseconds of duration separated by an interval of 150 milliseconds. Cool, huh?

That's it! Our function is now complete and we got the API we wanted. Now, as for any JavaScript function, we should make it more secure by adding some guards with some runtime type checking.

Yeah... It is a "little bit" longer. But what we are trying to do here is making sure the function gets called correctly, has the proper types for each one of the options and that they are all positive integers. If you don't like this type of programming habit, you can skip it and go back to our previous definition of the function but it is a good habit to have some runtime type checking since the developer-user can make mistakes (and so do we).

Yesterday, it was really hard to compete with native Android & iOS applications since the Web had little to no tools to communicate with the hardware, but it is a thing from the past.

Day after day, the browser's development team are working hard to bring those tools for the Web and we can now enjoy manipulating the Vibration API of the device right through our web applications.

Here is an example application to see if your device supports vibration.

Try it online .

Top comments (14)

Templates let you quickly answer FAQs or store snippets for re-use.

• Location Zürich
• Joined Feb 4, 2020

Please note that this does not work on iOS devices.

• Education École Supérieure de Génie Informatique
• Work Teacher, Freelance Developer & Chief Technical Officer @ Doc2wheels
• Joined Aug 17, 2018

Noted! They'll eventually support that feature but it is a shame that it gets its support later than the other platforms. 😞

But what is cool about that code is that you can use it today even if there's no support now because when it does you'll have literally nothing to do. It will just work!

• Joined Jun 23, 2021

Actually, WebKit had support in 2012 or so. They removed it, no plans to bring it back. See this thread on tw for some of the reasoning: twitter.com/grorgwork/status/86283...

• Joined Jan 15, 2020

So does that mean if you want to try it, you'd have to find an Android phone to do it? (the only device that can do it is Android phone)

For now this is the case. I haven't any information about when will the Apple Dev Team (and other OEM) will decide to introduce this feature but one can say that this won't take long since this isn't an experimental feature anymore.

As for gaming platforms (Playstations, XBox, Steam) this may take even longer because they may not have the same roadmap for Web support than the other OEM.

it is possible to condense it to

• Location Japan
• Work Front-end Developer at LINE Corporation
• Joined Aug 10, 2018

Or with optional chaining even better to

Beware that this is still in experimental support! So if the browser does not support this syntax this will throw an error.

But I would of course use this syntax if I was using a transpirer for instance. Really shorten the syntax and looks nice!

Sure, then again the browsers that support vibrate and actually vibrate support it so for the most part it's harmless

Yes absolutely. From now I guess it's a matter of development practice. But this would work as well (I haven't test it though but it seems working to me).

• Location Stuttgart, Germany
• Education Computer Science and Media
• Work I wrote "React From Zero" at \newline
• Joined Jan 3, 2017

I was so sad to find out that vibration was for mobile devices and not for Xbox controllers.

Oh shoot! I didn't know that one. Maybe Microsoft will push the support now that they decided to go on the path of choosing Chromium as their base for Edge. That's not impossible to see a better browser for the XBox in a near future.

I have hope!

• Location Pittsburgh, PA
• Education BA
• Pronouns He/Him
• Work Full Stack Engineer
• Joined Mar 18, 2019

I can't get this to vibrate on my android. I don't get it. Is there a setting I need on?

There can be multiple reasons but this would mean that either your browser at this particular version does not support vibration or your device is not supported for this current version.

Try updating or changing your browser and try and check to see if there is an update for your device.

If you don't get it to work even after all of these steps then it must probably be that your device is not supported.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

What is a 400 Bad Request?

Sohail Pathan - Apr 23

Dream Project to Build

Qyrus - Apr 19

Working with Dates and Times in JavaScript

Keshav Khatri - Apr 22

‍How much does it cost to start a business online

amyroy - Apr 18

We're a place where coders share, stay up-to-date and grow their careers.

Vibration API

Method to access the vibration mechanism of the hosting device.

• 4 - 29 : Not supported
• 30 - 123 : Supported
• 124 : Supported
• 125 - 127 : Supported
• 12 - 18 : Not supported
• 79 - 123 : Supported
• 3.1 - 17.3 : Not supported
• 17.4 : Not supported
• 17.5 - TP : Not supported
• 2 - 10 : Not supported
• 11 - 15 : Supported
• 16 - 124 : Supported
• 125 : Supported
• 126 - 128 : Supported
• 9 - 16 : Not supported
• 17 - 108 : Supported
• 109 : Supported
• 5.5 - 10 : Not supported
• 11 : Not supported

Chrome for Android

Safari on ios.

• 3.2 - 17.3 : Not supported
• 17.5 : Not supported

Samsung Internet

• 4 - 23 : Supported
• 24 : Supported
• all : Not supported

Opera Mobile

• 10 - 12.1 : Not supported
• 80 : Supported

UC Browser for Android

• 15.5 : Supported

Android Browser

• 2.1 - 4.3 : Not supported
• 4.4 - 4.4.4 : Supported

Firefox for Android

• 14.9 : Supported

Baidu Browser

• 13.52 : Supported

KaiOS Browser

• 2.5 : Supported
• 3 : Supported

How to use the Vibration API

Since the arrival of HTML5 and with it the increasing number of applications built for mobile, more and more JavaScript APIs have surfaced to meet the demand; one of these APIs is the Vibration API.

As the name suggests, the Vibration API allows you to control the vibration of a device, by setting it to vibrate for a certain length of time, or within a pre-defined pattern.

Browser support

Firstly, this is a mobile technology. Don’t try and make your iMac vibrate, it won’t work.

For mobile browsers, the support is fair: no support yet in IE or Safari; on Android the native browser, Chrome and Firefox all support it; Chrome on iOS doesn’t yet support it.

The important thing to note is that vibrations tend to be used as notifications, so using this API is a progressive enhancement. As such, it is usable now.

Using the API

The first thing you should do when using this type of API is test for browser support:

Now, inside the if statement we can call the vibrate function, and make the user’s mobile device vibrate for 500 milliseconds:

As you can see, this API is pretty straightforward to use. If you want to add a vibration to alert the user to an event in your app, this is all you need…

…but as you might expect, we can also get much more creative.

Let’s say you want to add a specific type of vibration for a particular action which makes the device vibrate twice, first for 500ms and the pause for 200ms followed by a vibration lasting 1 second. We’d code that like so:

All we’ve really done is add an array instead of a single number. (I’ve used two sets in the example, but you can use as many as you like.)

Let’s say you want to cancel a vibration that’s going on, that is as simple as setting a new vibration with a duration of zero, like so:

These kinds of API have been surfacing regularly over the last year, and they make life a lot easier when coding for mobile.

The Vibrate API allows you to give your user not just visual, but tactile feedback, which is hugely beneficial when communicating on a small screen.

Userwell Review – A Product Management Feedback Platform for B2B Businesses

Review: the university of texas at austin – master’s degree in computer science online on edx, review: geocode api, review: zenserp google search api, how to create a sticky footer with flexbox, how to build your own theme for grav cms.

2 Ways to Create the Holy Grail Layout with Flexbox

How to create a javascript chart with chart.js, how to create a collapsing header effect with pure css, how to create a responsive image gallery with flexbox, a step-by-step guide to dark mode in css, 25 must read html, css and jquery books, how to password protect content on your wordpress site.

• Skip to main content
• Select language
• Skip to search
• Vibration API

Continued vibrations

Most modern mobile devices include vibration hardware, which lets software code provide physical feedback to the user by causing the device to shake. The Vibration API offers Web apps the ability to access this hardware, if it exists, and does nothing if the device doesn't support it.

Describing vibrations

Vibration is described as a pattern of on-off pulses, which may be of varying lengths. The pattern may consist of either a single integer, describing the number of milliseconds to vibrate, or an array of integers describing a pattern of vibrations and pauses. Vibration is controlled with a single method: Navigator.vibrate() .

A single vibration

You may pulse the vibration hardware one time by specifying either a single value, or an array consisting of only one value:

Both of these examples vibrate the device for 200 ms.

Vibration patterns

An array of values describes alternating periods of time in which the device is vibrating and not vibrating. Each value in the array is converted to an integer, then interpreted alternately as the number of milliseconds the device should vibrate and the number of milliseconds it should not be vibrating. For example:

This vibrates the device for 200 ms, then pauses for 100 ms before vibrating the device again for another 200 ms.

You may specify as many vibration/pause pairs as you like, and you may provide either an even or odd number of entries; it's worth noting that you don't have to provide a pause as your last entry since the vibration automatically stops at the end of each vibration period.

Canceling existing vibrations

Calling Navigator.vibrate() with a value of 0 , an empty array, or an array containing all zeros will cancel any currently ongoing vibration pattern.

Some basic setInterval and clearInterval action will allow you to create persistent vibration:

Of course the snippet above doesn't take into account the array method of vibration; persistent array-based vibration will require calculating the sum of the array items and creating an interval based on that number (with an additional delay, probably).

Specifications

Browser compatibility.

• Navigator.vibrate()

Document Tags and Contributors

HTML5 Vibration API: Vibrator test, Examples, Plugins, and Code

Have you ever wanted to make your phone vibrate right from a website using JavaScript?

In this complete guide, you'll learn how to leverage the new HTML Vibration API to create immersive web experiences by adding vibration effects with just a few lines of JavaScript code.

For optimal experience, view this article on a mobile device and test the examples. Visit il.ly/vibrate on your phone.

Try out Phone Vibration Simulator tool to test the vibration patterns on your device.

Why Use the Vibration API on Websites?

Vibration effects can provide tactile feedback to enhance UX for mobile users. When used sparingly, vibrations can make web elements feel more interactive without being annoying or overused.

Some great uses cases:

• Provide haptic feedback on button clicks
• Notifications and alerts
• Fun effects paired with music or themes

With careful design, vibrations can significantly improve the UX on mobile sites and apps. ✨

Let's take a quick look at how it works:

In this complete guide you'll learn:

• Browser Support - Which browsers and devices support the Vibration API
• Using navigator.vibrate() - How to trigger vibrations with code
• Vibration Patterns - Creating complex vibration sequences
• Code Examples - Useful snippets, libraries and plugins

So if you want to make your web projects vibrate, buzz, shake, and rattle - let's get started!

Vibration API Browser Support

The Vibration API is supported in most modern browsers, but there are some exceptions:

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 the vibrate function in navigator . To check for support in JavaScript:

There are some key limitations:

• Requires actual vibration hardware in the device
• Page needs to be visible - doesn't work in background tabs
• Some browsers limit excessive vibration

Now let's look at how to actually trigger vibrations!

Usage of navigator.vibrate

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

In the following example the device will vibrate for 1000 milliseconds (ms):

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

In this example the devices will vibrate for 1000 ms, wait 500 ms and vibrate again.

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.

In this example the devices will stop vibrating.

How to Vibrate your Phone on the Web

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.

In this example the device will keep vibrating until the touch event has stopped

Vibrate on click

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.

In this example all buttons and links on this page vibrate on tap. We also detect if the device is mobile and use touchend.

Vibrate via checkboxes

Vibrating after clicking a sliding checkbox is also very helpful. It feels really natural. There is a short vibration at the start, then a period of waiting whilst the checkbox is moving and then a longer vibration at the end.

In this example, the checkbox will vibrate.

Vibration Duration

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 100ms seems to long for me.

In this example the following buttons vibrate each on a different timespan.

Vibrate on notification

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 ideal.

Click the buttons below. When the progress bar reaches the end. You get a notification! Each button is a different vibration pattern.

Vibration with Song Patterns

Groggie mentioned his blog post on using the Vibration API for music and theme songs. It's a really cool example of what can be done using the Vibration API and some creative thought. Click on the titles below to play.

🎶 Super Mario Theme Intro

🎶 James Bond 007

🎶 Star Wars Imperial March

🎶 Morse Code SOS

Vibration API Code Examples

Vue.js vibration.

I used to write my own Vibration API code in Vue.js, but with the hooks being introduced into Vue 3, I started using a hook called useVibrate from @vueuse/core .

Next.js and React vibration

In Next.js and React, you can use the Web Vibration API directly in functional components. Here's an example of how you can create a custom hook to handle vibrations:

You can then use this hook in your components to trigger vibrations based on user interactions or other events.

Otherwise, here's an example of how you can create a button that vibrates when clicked:

jQuery.vibrate.js

If doing it manually seems difficult for you, I've written a jquery plugin that can get you started right away.

Documentation

Download and embed the code then initialize in one of the following ways:

I also made a slideshow: Learn About The Vibration API from Illyism . Feel free to share it and show it around.

Interested in more Javascript and CSS articles? Check out our article on CSS Text Gradients .

Ilias is a SEO entrepreneur and marketing agency owner at MagicSpace SEO , helping small businesses grow with SEO. With a decade of experience as a CTO and marketer, he offers SEO consulting and SEO services to clients worldwide.

Snyk is a popular tool for code security, but it's not the only option. Here are 10 alternatives to Snyk that you may want to consider.

Get your AI GF in 2024 for FREE! Explore the best 7 AI girlfriend apps for an exciting romantic dating simulator with the top AI girlfriend generators.

Nikita Bier, the mind behind TBH and Gas, shares his top tips for creating engaging social apps that resonate with users.

Danny Postma is a Dutch entrepreneur, developer, and maker known for his successful "indie hacking" ventures and contributions to the online entrepreneur community. He is recognized for his innovative use of artificial intelligence (AI) and machine learning in several popular web applications.

Exclusive offers

The best deals for makers and creators.

Mobile game development with the Device Orientation and Vibration APIs

The market for casual mobile gaming is keeping pace with the growing market for smartphones. There are Web tools that can help web developers like you build games that compete with native games. You’ll need great execution to stand out from the crowd – using the JavaScript APIs correctly can help. For game development, you’ll want to understand the Device Orientation API and the Vibration API.

Cyber Orb is a simple HTML5 game demo created using the Phaser framework.

I was interested in Phaser as a mobile game framework, because it’s fast, optimized for various mobile devices, and easy to use, plus there’s a large Phaser community. The framework is open-sourced and available on GitHub, as is the source code of my Cyber Orb demo :

Introduction to Phaser is an MDN article I wrote that walks you through the basic steps of building a mobile game with Phaser. It shows the practical use of the Device Orientation and the Vibration APIs – and how they were implemented.

Using the framework

I’ve used the Phaser framework to create the game, because coding it from scratch would take a lot more time and effort. Phaser takes care of the boring, necessary parts like loading assets, manipulating images on screen, or managing user input. It helps you focus on the game code and game mechanics, so you don’t have to worry about differences in browser implementations. Let’s take the controls for example. In a game created from scratch you’d have to write something like this to implement keyboard controls:

The event listeners for key up and key down would be needed – keydown to know when the key is pressed and keyup to manage the situation when it is released. You have to remember the keyCode for every keyboard button – for example the left cursor key is 37 . Then, in the main game loop, you could do something like this:

Instead of doing all that from scratch and remembering the key codes you can leave it to Phaser:

The code also looks a lot cleaner and simpler this way.

Desktop vs mobile

Although we’ll focus on mobile in this post, it’s advised to have the controls built for desktop first. If you’re building the game in your code editor and browser on desktop, you can quickly test it. Then, using a progressive enhancement approach, you can add mobile controls on top of the desktop ones with the Device Orientation API and see how different the game experience is on mobile.

Device orientation

The Device Orientation API specification is still in the Working Draft status, so there might be some code-breaking changes introduced in the future. It’s an experimental technology and should be treated as such. All implementations are still missing the compassneedscalibration event. Also, there are differences in browser implementations which should be taken into consideration. For instance, Chrome and Opera don’t support the devicemotion event.

To use the Device Orientation API in the game you have to add the listener for the deviceorientation event:

Everything is then taken care of in the handleOrientation function:

You can extract three variables from the passed object: alpha , beta and gamma .

Those three properties contain the orientation of the device in three dimensional space. We are interested in the last two to control the ball left-right and top-bottom. The first, alpha variable can be used to determine the up-down movement of the ball to make it jump. The values have different ranges: alpha is from 0 to 360, beta -180 to 180 and gamma -90 to 90.

Having those values available in the game we can move the ball on the screen with the last two lines of code:

That’s it – you can control the game with the Device Orientation events and you can play with your phone by tilting and shifting it around. This API can add an extra feeling of responsiveness to the game and provide a richer experience for the player.

Browser support

The Device Orientation API is supported from Firefox 6, Chrome 7, Opera 27 and Internet Explorer 11 on desktop, and from Firefox Mobile 6, Android 3 and Safari Mobile 4.2 on mobile devices.

Proximity Events API

There’s also the Proximity Events API that could be used in the game, if the proximity sensor is available in the mobile device. It’s an experimental API, but can act as an interesting addition to the ones you’ve already used. The implementation of the API is based on two events: deviceproximity and userproximity . The first one provides the value-based description of the distance between the device and the object ( value is in centimeters) while the second one gives the boolean-based description ( near property is true or false depending on the distance). Here’s an example:

It could be used to turn off the screen when talking, so you don’t press anything by mistake while holding the phone close to your ear. In the game it can be used as an interesting way to control the game – an equivalent of the tap action.

The Proximity Events API is supported only in Firefox, but the W3C documentation status is Candidate Recommendation, so it could be implemented by other browser vendors without any problem.

Vibration API

The Vibration API is another feature that can boost the mobile experience. Most devices support it (except iOS Safari and Opera Mini), and it works great on Firefox OS devices.

Using the Vibration API is even easier than the Device Orientation API – all you have to do is to check whether the window.navigator.vibrate function is available, and if yes, use it:

There’s one parameter passed to the function – the duration of the vibration. Instead of one value you can also pass the array of values and thus vibrate multiple times, for example:

This will make the phone vibrate for 1 second (1000 miliseconds), wait for 2 seconds and then vibrate for another 1 second. If at some point you want to turn off the vibrations you can pass 0 or [] as an argument:

It will stop any actual or future vibrations.

The Vibration API is in the Proposed Recommendation status, it works on Firefox 16 (from version 11 with the moz prefix), Chrome (with webkit prefix) and lately Opera (from version 27) on desktop, Firefox Mobile 11 ( moz ) and Android ( webkit ) on mobile.

As you can see, using these APIs is simple and straightforward, yet enrich the experience of gameplay. The mobile gaming experience is different than desktop and you can take advantage of that. The game will work without these additional features, but it feels a lot better when the new APIs are implemented.

You can fork the Cyber Orb demo and play with it on your own. It’s easy to extend, you can add extra features and build a complete game. If you need help with the Phaser framework you can visit the HTML5 Gamedevs forums and reach out to the community. There’s also an HTML5 Gamedev Starter list with the links to various resources, and the Gamedev.js Weekly newsletter with the weekly gamedev news and resources, both run by me.

MDN and sharing the knowledge

As a developer I have used Mozilla Developer Network many times looking for the answers to my coding problems and usually finding them. MDN is a huge knowledge base, but it doesn’t have to work only one way – it’s not read-only. You can easily contribute back and share your knowledge and experience with others. You can write about something you’re good at, so others can find it if they need it. Sharing the knowledge is key here and the reason our community is so friendly.

HTML5 Game Developer, Enclave Games indie studio founder, js13kGames competition creator, and Gamedev.js Weekly newsletter publisher. Tech Speaker passionate about new, open web technologies, excited about WebXR and Web Monetization.

• https://end3r.com

More articles by Andrzej Mazur…

Discover great resources for web development

Sign up for the Mozilla Developer Newsletter:

Thanks! Please check your inbox to confirm your subscription.

If you haven’t previously confirmed a subscription to a Mozilla-related newsletter you may have to do so. Please check your inbox or your spam filter for an email from us.

Cyber Orb’s device orientation-based controls do not work in Safari on iOS. Is this a known issue?

Mobile Safari have different, switched ranges for beta and gamma. Beta is (-90,90) and gamma (-180,180).

Could you recommend a library which supports device orientation-based controls across all mobile platforms, incl. Safari?

I haven’t found any good one yet, but I wasn’t looking much. You could try Full Tilt: https://github.com/richtr/Full-Tilt but I haven’t used it.

You could additionally use screen lock in Cyber Orb. It works at least in mobile Chrome as `screen.orientation.lock(“portrait”)`

Yeah, that’s also an interesting API. I was focusing on the Device Orientation – Vibration API was added as a bonus, but Screen Orientation could also fit in the article.

Comments are closed for this article.

Back to all guides

Introduction To Vibration API

Mon Mar 14 2022

When developing websites, you often want to add some additional features that are limited to the mobile version of your site. They only show up when the client views your site on their cell phones. Among these features, one of the common ones is accessing the vibration hardware of the phone.

It can become difficult to access the hardware directly. Fortunately, there is an easier way to do it. We can consume the vibration API of the web APIs to make the user’s phone vibrate. Let’s look at this API.

Vibration API

The API lets you access the vibration mechanism of the supported device. You can use this API to vibrate the host device or execute a vibrational pattern. This API provides the ability to access the vibrational motor, and if it does not exist, it simply does nothing. The API is supported across all major internet browsers except Safari.

The vibration API provides a vibrate method that takes a single parameter. It can be an integer or an array of integers. If it is the former, the device will vibrate for milliseconds passed as the parameter. But if you have given an array of integer values, it will generate an alternating pattern in which the device is vibrating and not vibrating.

Let’s quickly look at how you can use this API in your websites.

Create a directory on your computer and open it in your preferred code editor. Once you are done, create an HTML file called index.html inside this directory. Now write a basic HTML boilerplate. I have also provided it below that you can copy and paste.

Now create a vibrate button and attach a function on the button's onclick event handler.

Now write this vibrateNow function inside the script tag.

Now test your website on a mobile device with a functional vibrational motor, and you will feel a vibrate that will last for 200 milliseconds when you click on the vibrate button.

How use vibrate method on IOS?

using of navigator.vibrate() for IOS is not working, how we can implement vibrate on IOS devises? if (“vibrate” in navigator) { navigator.vibrate(55); }

It’s not supported, so the answer is “you can’t”.

Browser compatibility chart is here:

Notice Safari is not supported. Until Safari implements it, the API will not work on iOS devices.

thanks for your respond

Also, forgot to mention:

If you weren’t already aware, there is only one browser engine on iOS.

Chrome and other browser apps are just basically a skin over that.

So what I’ve said applies regardless of the browser app you use. If you are using iOS, anything that applies to Safari applies to any other app you use to browse the internet, because they’re the same thing. There is currently a big court case being prepared in the UK courts that will attempt to attack this situation, but for the foreseeable future, there’s only Safari.

Note also that this is not the case on Android, it’s just iOS this applies to.

thanks for your response

• Skip to main content

• Vibration API

Most modern mobile devices include vibration hardware, which lets software code provide physical feedback to the user by causing the device to shake. The Vibration API offers Web apps the ability to access this hardware, if it exists, and does nothing if the device doesn't support it.

Describing vibrations

Vibration is described as a pattern of on-off pulses, which may be of varying lengths. The pattern may consist of either a single integer, describing the number of milliseconds to vibrate, or an array of integers describing a pattern of vibrations and pauses. Vibration is controlled with a single method: Navigator.vibrate() .

A single vibration

You may pulse the vibration hardware one time by specifying either a single value or an array consisting of only one value:

Both of these examples vibrate the device for 200 ms.

Vibration patterns

An array of values describes alternating periods in which the device is vibrating and not vibrating. Each value in the array is converted to an integer, then interpreted alternately as the number of milliseconds the device should vibrate and the number of milliseconds it should not be vibrating. For example:

This vibrates the device for 200 ms, then pauses for 100 ms before vibrating the device again for another 200 ms.

You may specify as many vibration/pause pairs as you like, and you may provide either an even or odd number of entries; it's worth noting that you don't have to provide a pause as your last entry since the vibration automatically stops at the end of each vibration period.

Canceling existing vibrations

Calling Navigator.vibrate() with a value of 0 , an empty array, or an array containing all zeros will cancel any currently ongoing vibration pattern.

Continued vibrations

Some basic setInterval and clearInterval action will allow you to create persistent vibration:

Of course, the snippet above doesn't take into account the array method of vibration; persistent array-based vibration will require calculating the sum of the array items and creating an interval based on that number (with an additional delay, probably).

Specifications

Browser compatibility.

• Navigator.vibrate()

Implementing the Vibration API in your PWA

The Vibration API allows your PWA to access a device's vibration capabilities, enabling you to create haptic feedback and vibration effects within your app.

Install the app on a smartphone. Choose a pattern and tap the below button to make the device vibrate.

• User Feedback : Providing haptic feedback to users when interacting with buttons, forms, or other elements in your PWA, enhancing the user experience.
• Gaming : Adding tactile sensations to web-based games, enhancing immersion and responsiveness during gameplay.
• Touch Guidance : Assisting users with impairments by using vibrations to guide them through certain interactions, like form validation or navigation.
• Interactive Experiences : Creating interactive and dynamic web experiences, such as simulating the sensation of scrolling through a virtual list or slider.
• Orientation and Navigation : Incorporating vibrations into web-based maps or navigation systems to provide tactile cues when changing directions or reaching waypoints.
• Feedback for Actions : Providing vibrations in response to specific user actions, such as successful submission of a form or completion of a task.
• Custom Effects : Designing unique vibration patterns for branding purposes or creative effects, offering a distinctive touch to a PWA.
• Accessibility : Improving accessibility by using vibrations to convey information to users with visual impairments or to enhance the overall usability of a PWA.
• Audio Visualization : Syncing vibrations with audio or music playback to create a multisensory experience that complements the auditory elements.

Browser support

The Vibration API is supported by most modern web browsers, except Safari.

Links & Documentation

• Vibration API Documentation

Unlock the powers of the web today

Try our PWA toolkit free of charge and without limits for 14 days. No credit card required.