CODEWITHSUNDEEP
javascriptandroidcordova
chandra
chandra

Reputation: 63

window.plugin.pushNotification is undefined on Cordova 3.6.4

I am new to building multi-platform applications using Cordova. I have followed many tutorials to create a push notification, but been unable to. The process I have followed is:

  1. Created a project in Google console, set the Google cloud notification messaging for Android to 'ON'.

  2. Created project as follows

cmd:

Cordova create sampleApp com.sample sampleApp
cordova platform add android
cordova add plugin https://github.com/phonegap-build/PushPlugin.git
  1. Edited the index.html under www/ added the pushNotification.js file to it.
  2. Changed the index.js file under www/js to include the registration.

code: 

var pushNotification = window.plugins.pushNotification;
    console.log(pushNotification);
    pushNotification.register(app.successHandler, app.errorHandler,{"senderID":"MY_SENDER_ID","ecb":"app.onNotificationGCM"});
},successHandler: function(result) {
      alert('Callback Success! Result = '+result)
  },errorHandler:function(error) {
        alert(error);
    },onNotificationGCM: function(e) {
              switch( e.event )
              {
                  case 'registered':
                      if ( e.regid.length > 0 )
                      {
                          console.log("Regid " + e.regid);
                          alert('registration id = '+e.regid);
                      }
                  break;
       
                  case 'message':
                    // this is the actual push notification. its format depends on the data model from the push server
                    alert('message = '+e.message+' msgcnt = '+e.msgcnt);
                  break;
       
                  case 'error':
                    alert('GCM error = '+e.msg);
                  break;
       
                  default:
                    alert('An unknown GCM event has occurred');
                    break;
              }
          }
  1. After adding all the requirements, I use Cordova serve. Then open the index.html page and I see the window.plugin.pushNotification as undefined. Am I doing anything wrong can anyone help me with this. I have been stuck with this for many days.

and this is my index.html file 

<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Hello World</title>
</head>
<body>
    <div class="app">
        <h1>Apache Cordova</h1>
        <div id="deviceready" class="blink">
            <p class="event listening">Connecting to Device</p>
            <p class="event received">Device is Ready</p>
        </div>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="PushNotification.js"></script>
</body>

Upvotes: 3

Views: 9147

Answers (3)

orhankutlu
orhankutlu

Reputation: 840

I had the same problem a few days ago and finally I could figure it out. There is a new version of phone-gap push plugin and the one you are using is deprecated.

In orer to make it work I have installed the new version of plugin and I have updated my cordova to latest version.

See link for new push plugin: https://github.com/phonegap/phonegap-plugin-push

But the problem was the same. I had to look at ng-cordova.js and I saw that there was a new version for $cordovaPush which is $cordovaPushV5. It is the one we should use. The problem was mentioned in github issues too.

Github issue link: https://github.com/driftyco/ng-cordova/issues/1152

After that you have new plugin installed (and make sure you have installed ngCordova as described in this link http://ngcordova.com/docs/install/). You are ready to go. Only thing you need to do after device ready event is:

var iosConfig = {
    badge: true,
    sound: true,
    alert: true
};

$cordovaPushV5.initialize(iosConfig).then(function() {
    // DO WHATEVER YOU LIKE
    $cordovaPushV5.register().then(function(deviceToken) {
        // Success -- send deviceToken to server, and store for future use
        console.log("deviceToken: " + deviceToken);
    }, function(error) {
        console.log("register error: ", err);
    });
});

Upvotes: 0

ESP32
ESP32

Reputation: 8709

Ok, I had exactly the same problem - it took me several hours to find a solution.

First of all I did not have to include "PushNotification.js" into my index.html file. Cordova build manager manages the includes by a file named "corodva_plugins.js".

When I looked into the file mentioned above I found the following entry:

   {
        "file": "plugins/com.phonegap.plugins.PushPlugin/www/PushNotification.js",
        "id": "com.phonegap.plugins.PushPlugin.PushNotification",
        "clobbers": [
            "PushNotification"
        ]
    },

So I saw that the method to call the plugin is actually NOT pushNotification, it is PushNotification (capital "P").

//var pushNotification = window.plugins.pushNotification;
var pushNotification = window.plugins.PushNotification;

Edit: Looking into PushNotification.js I found out that the Plugin works well with window.plugins.pushNotification ... but just if cordova.js is included before your controller. So if you include cordova.js (and therefore PushNotification.js) before you use it, it will work.

Upvotes: 3

Roope Hakulinen
Roope Hakulinen

Reputation: 7405

You need to wait for deviceready event until, you can use the plugins. So try to wrap your code like this

document.addEventListener("deviceready", function() {
  // Here you can use it:
  var pushNotification = window.plugins.pushNotification;
  ...
}, false);

Update

Since the questioner told that it was already wrapped inside deviceready handler, the reason most probably is that you are using the serve to run the app. you should try to build actual package from your app with cordova build and then test it on actual device or even emulator.

Upvotes: 2

Related Questions