10 Replies Latest reply on Sep 23, 2016 7:34 AM by Sam435

    navigator.notification not working in browser


      I am trying a simple PhoneGap application that uses the Notification API, but it is not displaying the dialog boxes at all. I haven't yet got a suitable Android phone to test it on, so I'm just using the browser. For now, when the page loads, the application should display a confirmation dialog box with 2 buttons, which produce vibration and beep, respectively.


      Could someone could help me identify what is wrong with the code below? (Note that I am completely new to PhoneGap programming, but have tried JavaScript's alert in this same code and it worked fine.)


      index.html (adapted from the default page generated when the app is created)

      01. <!DOCTYPE html>

      02. <html>

      03. <head>

      04.     <meta charset="utf-8" />

      05.     <meta name="format-detection" content="telephone=no" />

      06.     <meta name="msapplication-tap-highlight" content="no" />

      07.     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />

      08.     <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />

      09.     <script type="text/javascript" src="js/index.js"></script>

      10.     <link rel="stylesheet" type="text/css" href="css/index.css" />

      11.     <title>Hello World</title>

      12. </head>

      13. <body onLoad="confirmDialog();">

      14.     <div class="app">

      15.         <h1>Hello World</h1>

      16.         <div id="deviceready" class="blink">

      17.             <p class="event listening">We're Live!</p>

      18.             <p class="event received">Device is Ready</p>

      19.         </div>

      20.     </div>

      21.     <script type="text/javascript" src="cordova.js"></script>

      22.     <script type="text/javascript" src="js/index.js"></script>

      23.     <script type="text/javascript">

      24.         app.initialize();

      25.     </script>

      26. </body>

      27. </html>


      index.js (adapted from the default JS page generated when the app is created)


      01.  var app = {

      02.     initialize: function() {

      03.         this.bindEvents();

      04.     },

      05.     bindEvents: function() {

      06.         document.addEventListener('deviceready', this.onDeviceReady, false);

      07.     },

      08.     onDeviceReady: function() {

      09.         app.receivedEvent('deviceready');

      10.     },

      11.     receivedEvent: function(id) {

      12.        var parentElement = document.getElementById(id);

      13.        var listeningElement = parentElement.querySelector('.listening');

      14.        var receivedElement = parentElement.querySelector('.received');

      15.        listeningElement.setAttribute('style', 'display:none;');

      16.        receivedElement.setAttribute('style', 'display:block;');

      17.        console.log('Received Event: ' + id);

      18.     }

      19. };


      21. /************** NOTIFICATIONS ***************/

      22. function confirmDialog() {

      23.     navigator.notification.confirm("Please hit a button", actionEvent, "Choose Action", "Vibrate, Beep");

      24. }


      26. function actionEvent(select) {

      27.     if (select==1){

      28.          navigator.notification.vibrate(1500);

      29.     }

      30.     else if (select==2){

      31.          navigator.notification.beep(4);

      32.     }

      33. };


      Thanks in advance

        • 1. Re: navigator.notification not working in browser
          kerrishotts Adobe Employee

          How are you serving the app to the browser? Are you just using file://path/to/index.html? Are you using PhoneGap CLI or the PhoneGap Desktop app to serve it to the browser?


          Also don't execute methods that access plugins until AFTER deviceready is received. Before that point, plugins won't work. You're trying to show the alerts when the document loads, but you need to wait until you receive device ready.

          • 2. Re: navigator.notification not working in browser
            Sam435 Level 1

            Thanks for the reply. I'm using the loopback IP ( I'm not yet familiar working with the CLI, so I'm using the desktop app, i.e. that's where I'm checking the settings from.


            As for executing methods, is there a way I can determine that deviceready has been received when I'm running this in a browser? Also, I'm not very sure all the necessary plug-ins are installed. I saw in the default index page that there's a reference to cordova.js, but I don't have that script in my app's file system. Excuse my ignorance on this... Really new to it.

            • 3. Re: navigator.notification not working in browser
              VectorP Level 4

              You should not have a file called cordova.js in your assets. The reference is sufficient, as Phonegap will make sure a proper cordova.js gets included.


              You are calling confirmDialog() without making sure that deviceready was received. Construct your code in such a way that this function is only called after function onDeviceReady() has been executed.


              Also, what do you mean exactly with "Notification API"? Are you using a Cordova plugin for this API, or the html5 Notifications API? If the latter, the deviceready issue doesn't come into play.

              • 4. Re: navigator.notification not working in browser
                Sam435 Level 1

                To be honest, I can only assume that I'm using the Cordova plugin, except I don't know if there's anything missing. I was only instructed to modify the index.html and index.js files in my PhoneGap beginners class and I assumed all the code would be working. In my thinking, everything is where it should be, except that I have not got the Notification API working.


                As regards making sure that deviceready has been received, I haven't been shown how to determine that. Plus I don't know if it it's possible to achieve when testing in a browser and not a mobile device. Are you able to point out for me which part of my code I should modify to get the function call to only occur after deviceready has been received? Though I guess it can only happen when I have a mobile device set up. Is that right?

                • 5. Re: navigator.notification not working in browser
                  VectorP Level 4

                  1. Yes, in the browser plugins won't simply work (even though there might be a complex way to achieve that, if no native functionality is used). You can also use the Phonegap Desktop app to a certain extend.

                  2. The deviceready event is triggered from the cordova.js file, which should be referenced in your html. Read up here:

                  Events - Apache Cordova

                  PhoneGap Browser Support | PhoneGap Docs

                  Plugin APIs | PhoneGap Docs

                  • 6. Re: navigator.notification not working in browser
                    Sam435 Level 1

                    Thanks, VectorP. I'll read those and come back, if I need more help. But very quickly, can you tell me how the cordova.js file will be accessible when referenced when it isn't included in my assets ?

                    • 7. Re: navigator.notification not working in browser
                      VectorP Level 4

                      If you just open your index.html in a browser, cordova.js won't be found (because it's not in your assets) You would have to download and  add the proper version yourself (and it might not be easy to find the correct one).

                      If you use the Phonegap Desktop App in your browser, cordova.js will be there and CORE plugins will work.

                      • 8. Re: navigator.notification not working in browser
                        Sam435 Level 1

                        Thanks for the help so far. So I've followed the links and I got a pointer to test navigator.notification.confirm in the onDeviceReady function. I wanted to be sure that deviceready has been received. I modified the code like this:


                        onDeviceReady: function() {





                        function confirmDialog() {

                             navigator.notification.confirm("Please hit a button", actionEvent, "Choose Action", "Vibrate, Beep");



                        However, the dialog still isn't loading. I tried replacing confirmDialog in the onDeviceReady function with JavaScript's alert("Test dialog") just to see if the function was being called, and it worked. Could it mean there's something in Cordova that I am calling incorrectly? What prerequisites do I need to have in place before I can access the Cordova plugins? By the way, I'm now testing in the Ripple Simulator for Chrome and it is rendering just fine. Thanks for your patience.

                        • 9. Re: navigator.notification not working in browser
                          VectorP Level 4

                          What prerequisites do I need to have in place before I can access the Cordova plugins?

                          It depends on whether you are going the hard way using the CLI, or building stressless with Phonegap Build. Since this is the general Phonegap forum, I assume you use the CLI.

                          In that case:

                          - you must add the plugin from npm

                          - you must have a reference to cordova.js

                          - you must wait for deviceready to fire before attempting to use the plugin


                          Apparently, you have done at least the second and third, otherwise deviceready would not have fired and yu wouldn't have had your alert. So far, so good.


                          See if the 'cordova-plugin-dialog' plugin is installed:

                          > phonegap local plugin list


                          If it is, then you should test on a real device and see if Ripple is the problem.

                          • 10. Re: navigator.notification not working in browser
                            Sam435 Level 1

                            Thanks. I ran the command and found that no Cordova plugins were installed. I downloaded NodeJS and used it to install the necessary plugins. Now the app is working well in the simulator and on a real device.


                            Thanks again for the help, VectorP and kerrishotts.