6 Replies Latest reply on Feb 23, 2016 10:53 AM by annab74064507

    PhoneGap Mobile App - Vibration not working

    annab74064507

      Hi,

       

      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.

        • 1. Re: PhoneGap Mobile App - Vibration not working
          kerrishotts Adobe Community Professional
          • I'm able to successfully use the PhoneGap Desktop App / Developer app combo to vibrate my device. I'm using:

           

          navigator.vibrate(300);

           

          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 hope that helps. Best of luck in your teaching endeavors.  

          • 2. Re: PhoneGap Mobile App - Vibration not working
            Chris W. Griffith Adobe Community Professional

            Kerri-

             

            Correct, since your content is hosted within the PG Developer App, it will not use your app's config.xml file.

             

            Chris

            • 3. Re: PhoneGap Mobile App - Vibration not working
              Chris W. Griffith Adobe Community Professional

              Anna-

               

              Can you supply the version of the CLI you are using? also the code you to use to call the vibrate function. The PhoneGap Developer App does support the vibration plugin.

               

              Chris

              • 4. Re: PhoneGap Mobile App - Vibration not working
                annab74064507 Level 1

                Thank you both for your help so far.

                 

                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:

                <button id="vibrateButton">Vibrate Button<button>

                 

                with the following in the JS:

                document.addEventListener("deviceready", onDeviceReady, false);

                 

                function onDeviceReady() {
                console.log('my device is ready');
                document.getElementById('vibrateButton').addEventListener('click', vibrateFunction);
                }

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

                 

                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?

                • 5. Re: PhoneGap Mobile App - Vibration not working
                  kerrishotts Adobe Community Professional

                  Hi Anna,

                   

                  I was able to correctly get a vibration using the following code in index.html (in your <body> tag):

                   

                  <button style="margin-top: 100px" onclick="vibrateFunction()">Vibrate Button</button>
                  <script type="text/javascript" src="cordova.js"></script>
                  <script type="text/javascript">
                      function vibrateFunction() {
                          navigator.vibrate(3000);
                      }
                  </script>
                  

                   

                  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:

                   

                  <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
                  

                   

                  If you remove 'unsafe-inline' from the above, the button stops working because inline scripting is disabled.

                   

                  If you continue to have issues, it might also help to know what device(s) you're testing on. I'm doing this on an iPhone 6s.

                   

                  As to your PS:

                   

                  1. In the upper-right corner of your reply box, click "use advanced editor"
                  2. Select the text you wish to format as code
                  3. Click the ">>" icon in the expanded toolbar
                  4. Hover over "Syntax Highlighting" and click the syntax you need to use. Your selection will be highlighted appropriately

                   

                  Oddly enough HTML isn't a valid option, so for the first snippet I just used javascript, since it has some JS code in it.

                  • 6. Re: PhoneGap Mobile App - Vibration not working
                    annab74064507 Level 1

                    Thanks for your quick response.

                     

                    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.

                     

                    Thanks for your help again.