Contents
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:
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:
Select the “Notifications” plugin. Then the Notifications related plugins should be filtered in the plugins list.
Now click on install and your project will include the Parse Push Notifications plugin in the next compilation.
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:
Click on the app and the application settings will show. Go to “App settings” -> “Security and keys”
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:
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
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.
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.
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.
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
1 2 3 4 5 6 7 |
pushService.on('notification', function(userData){ alert('Received push notification: ' + JSON.stringify(userData)); }); |
Subscribing to a channel
1 2 3 4 5 6 7 8 9 |
pushService.subscribe("testchannel", function(error){ if (error) { alert('Error: ' + error.message); } }); |
Sending a local notification
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
API
Testing
To test your push notifications plugin integration:
- Install the Parse Push Notification plugin in your project
- Compile a Developer App
- Launch you app from the Developer App using a zip or a url options