The Cocoon Parse Push Notifications plugin is a Cordova plugin aimed at providing easy integration with  the Parse Push notifications service.

Installation

To add the Parse Push notifications plugin to your project first go to your project configuration and once there go to the Setting  section and click on the “Plugins” tab. You should see something like this:

New Cocoon

If you click on the “Cocoon” category you will see al the Cocoon available plugins.  Over the plugins list you will see a dropdown menu set to “All” by default. Click on the menu to see the available Cocoon plugins categories, you should see a list of plugins with at least the following groups:

Screen Shot 2016-01-05 at 16.40.33

Select the “Notifications” plugin. Then the Notifications related plugins should be filtered in the plugins list.

Screen Shot 2016-01-13 at 16.48.47

Now click on install and your project will include the Parse Push Notifications plugin in the next compilation.

Screen Shot 2016-01-13 at 16.49.22

 

Parameters

Getting the parameters

You need to get the application Id from the Parse project site.

First you need to have a Parse application created. Once the app is created you should see it in the Parse dashboard:

Screen Shot 2016-01-13 at 16.52.10

Click on the app and the application settings will show. Go to “App settings” -> “Security and keys”

Screen Shot 2016-01-13 at 16.55.12

Copy the “Application ID” and “Client key” keys, you will need them to configure the plugin.

Setting up the parameters

Using the Cocoon Plugins interface

You can setup the “Application ID” and “Client key” using the Cocoon cloud plugins interface. After installing the Parse Push Notifications plugin you will see an “Add Parameter” button under the plugin details:

Screen Shot 2016-01-13 at 16.59.09

Click on that button and you will see two fields for adding a name and a value. You need to add the following parameters:

  • APP_ID: The Parse application id
  • CLIENT_KEY: The Parse client key

Screen Shot 2016-01-13 at 17.01.46

Integration

Cordova needs to be specifically loaded in your index.html so it can start the Cordova framework and load the plugins that you have installed in your project. So first thing is to add the “cordova.js” script tag to your index.html.

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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" />
    <title>Ads demo</title>
</head>
 
<body style="margin:0; padding:0;">
 
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/pixi.min.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
</body>
</html>
 

That’s the only code script you need to include in your index.html for the plugin to be ready to be used. Cordova will do the rest.

Important: Remember to wait for the “deviceready” event before using the plugin as that is the moment when the plugin will be fully initialized.

JavaScript
1
2
3
4
5
6
7
8
 
 
function main() {
// You application code
};
document.addEventListener('deviceready', main, false);
 
 

Usage

Let’s see some code snippets showing how to use the Cocoon Parse Push notifications plugin in your application.

Initialization

Starts the Notification Service. The notification callbacks will start to be received after calling this method. Because of this, you should have set your event handler before calling this method, so you won’t lose any callback.
The service will be automatically registered after the initialization. This may show a Dialog to request user permissions. You can disable autoregister with {register: false} params and call Cocoon.Notification.Local.register() manually to control when the permissions dialog is shown. By default the register parameter is set to true.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
 
 
pushService = Cocoon.Notification.Parse;
 
pushService.initialize({}, function(registered, error){
    pushService.registered = registered;
    if (error) {
        alert('Error initializing Parse:' + error.message);
    }
});
 
 

Listening for notifications

JavaScript
1
2
3
4
5
6
7
 
 
pushService.on('notification', function(userData){
    alert('Received push notification: ' + JSON.stringify(userData));
});
 
 

Subscribing to a channel

JavaScript
1
2
3
4
5
6
7
8
9
 
 
pushService.subscribe("testchannel", function(error){
    if (error) {
        alert('Error: ' + error.message);
    }
});
 
 

Sending a local notification

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
 
var notification = {
    message : "Hi, I am a push notification",
    soundEnabled : true,
    badgeNumber : 1,
    userData : {"key1" : "value1", "key2": "value2", "index": index},
    contentBody : "",
    contentTitle : "",
    date : new Date().valueOf() + 5000
};
pushService.send(notification, function(error){
 
    if (error) {
        alert('Error: ' + error.message);
    }
 
});
 
 

Other Local notifications API methods

Please see the full API below and the example for more Parse Push notifications API methods.

Example

exmaple_button

API

api_button

Testing

To test your push notifications plugin integration:

  1. Install the Parse Push Notification plugin in your project
  2. Compile a Developer App
  3. Launch you app from the Developer App using a zip or a url options