I've created an App using the PhoneGap Desktop/Mobile App workflow, but I can't seem to get the vibration plugin to work when viewing my App through the PhoneGap Mobile App using either Android or iOS.

I've simplified it down to a simple onClick event on a button which should trigger a function call to vibrate the device using navigator.vibration(3000); but, this does not work via the PhoneGap Mobile App.

If I use the Cordova CLI to add the Android platform and then add the plugin cordova-plugin-vibration I can see the vibration working using the ripple emulator. And, it works when I build the App too using the CLI. But, I can't seem to make the PhoneGap Mobile App replicate this behaviour. This may not seem like a huge problem, but I am testing out functionality before I teach this material to my students. Some of my students want to create games which exploit vibration, and so it's important they can test how vibration works in their Apps using the PhoneGap Mobile App.

Any ideas?

The config.xml file which the PhoneGap Developer app generates includes:

<gap: plugin name="org.apache.cordova.xxx"> which I understand to be deprecated, rather than the newer update <plugin name="cordova-plugin-xxx">

I am wondering if this is part of the problem? I have tried changing this parameter to the non-deprecated version but still without luck.

Of course, make sure one is waiting for the deviceready event before attempting to use the API.

The PhoneGap Developer App -- as great as it is -- does not perfectly replicate the environment a built app receives. Do not assume that what works and doesn't work in the developer app is what actually happens when you build and run your app for real. You've already encountered one such difference: no config.xml parsing is done by the PG Developer app [that I can see] -- as such, your efforts to change it will not result in any change of behavior.

I didn't realise the developer App wasn't using the config.xml file, so that's very useful information - I assumed as changing things like the &ltname&gt in the config updated the displayed name in the desktop App it was using the config.

So far I've been trying to avoid going down the 'addeventlistener' route with the students - they are pretty new to JS, which is why I was using onClick with buttons and working outside of the ondeviceready().... for now. The Desktop App is great for the immediacy of feedback and has been really useful for my teaching so far, apart from this little thing which I can't figure out!

My code to call the vibrate function in the HTML was initially:

<button onclick="vibrateFunction()">Vibrate Button<button>

with the following in the JS:

function vibrateFunction() {navigator.vibrate(3000);}

Just in case it was a deviceready issue I updated the HTML as follows:

Neither of which vibrate the device via the Desktop/Mobile App workflow, but both of which work for me with the Ripple Emulator through the Cordova CLI (version 6.0.0) but NOT when built using either PhoneGap Build (sorry, I thought I had this working on a Built app, but it seems that I do not).

At this stage, I've simplified the App to just a single button which should trigger a vibration and I've left the app constructor as is.

Is there any chance you have a simple example of code where vibration works that I can test?

Thanks in advance,

Anna

P.S. Is there a better way to supply code in this forum than using the HTML editor and the <code> tag?

However, initially it did not work -- why? Because I had a Content-Security-Policy meta tag that prevented inline scripting. Double check your index.html and ensure that this isn't the case for you (if you have one). My working CSP is below:

I reinstalled the PhoneGap Mobile App on my iPhone following your post and it seems that has fixed the problem for iOS. And despite the spec of the android tablet we're using claiming vibration notifications, actually it doesn't seem to include a vibration motor - which explains why that one isn't vibrating! Grr.