Git Product home page Git Product logo

notificare-push-lib-cordova's Introduction

Notificare Push Plugin for Cordova

Rich and interactive push notifications for iOS, Android and Web. Enhance your apps with location based messages that really work.

Installation

To install the plugin to your Cordova project use the Cordova CLI Tool:

$ cordova plugin add cordova-plugin-notificare-push

Requirements

Setup notes for Android

Previous versions of the SDK required Eclipse to link to dependencies. Since plugin version 1.5.2 this is all done through Gradle.

Since the Cordova plugin installer doesn't add all necessary changes to the AndroidManifest.xml, you might have to add some settings manually in that file. In any case, your application needs to be of class re.notifica.cordova.BaseApplication

<application 
   android:hardwareAccelerated="true" 
   android:icon="@drawable/icon" 
   android:label="@string/app_name" 
   android:name="re.notifica.cordova.BaseApplication">

Configure plugin

iOS

Edit the Notificare.plist and enter your keys from the Notificare Dashboard

Android

Edit assets/notificareconfig.properties and enter your keys from the Notificare Dashboard plus the SenderId from your Google API Console

Be aware that when you upgrade platforms or the plugin, you may need to change the contents of these files again. Always check after updating.

Basic Usage

Initialization

An instance of the plugin is accessible in JavaScript as Notificare.

To enable push notifications in your Cordova app, you only need to do 2 things in your deviceReady listener:

  • listen for a ready event to be emitted from Notificare, then call Notificare.enableNotifications().
  • listen for a registration event to be emitted from Notificare. This will give you a deviceId to be registered to the Notificare API with optional userId and userName that are specific for your user.

Example

onDeviceReady: function() {

	Notificare.on('ready', function(applicationInfo) {
		console.log(JSON.stringify(applicationInfo));
		Notificare.enableNotifications();
	});
	Notificare.on('registration', function(deviceId) {
		// Register the device on Notificare API
		Notificare.registerDevice(deviceId, '[email protected]', 'Test User', function() {
			console.log('registered with Notificare');
		}, function(error) {
			console.log(error);
		});
	});
	Notificare.start();
});

Location updates & geofences

By enabling location updates, the Notificare plugin will automatically take care of updating the device's location and fetching nearby geofences.

Be careful to only enable location updates after the device is registered, this will make sure all updates are registered correctly.

Example

onDeviceReady: function() {
	Notificare.on('ready', function(applicationInfo) {
		console.log(JSON.stringify(applicationInfo));
		Notificare.enableNotifications();
	});
	Notificare.on('registration', function(deviceId) {
		// Register the device on Notificare API
		Notificare.registerDevice(deviceId, '[email protected]', 'Test User', function() {
			console.log('registered with Notificare');
			Notificare.enableLocationUpdates();
		}, function(error) {
			console.log(error);
		});
	});
});

Tags

You can add, remove and clean tags for the device from within your Javascript code. Again, make sure you registered the device first before you call any of these methods.

Examples

Notificare.addDeviceTags(['tag1','tag2'], function() {
	console.log('added tags');
}, function(error) {
	console.log(error);
});
Notificare.removeDeviceTag('tag2', function() {
	console.log('removed tag');
}, function(error) {
	console.log(error);
});
Notificare.clearDeviceTags(function() {
	console.log('cleared all tags');
}, function(error) {
	console.log(error);
});
Notificare.fetchDeviceTags(function(tags) {
	console.log('tags registered for this device: ' + tags);
}, function(error) {
	console.log(error);
});

Disabling

Both locationUpdates and notifications can be disabled by calling disableLocationUpdates() and disableLocationUpdates()

Handling Notifications yourself

Android

In Android, simply add an intent filter to your (Cordova) Activity in the AndroidManifest.

   <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/app_name" android:launchMode="singleTop" android:name="MyCordovaActivity" android:theme="@android:style/Theme.Black.NoTitleBar">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
        <!--
        	This activity will receive notification opened intents
        -->
        <intent-filter>
            <action android:name="re.notifica.intent.action.NotificationOpened" />
            <category android:name="android.intent.category.DEFAULT" />
        </intent-filter>
    </activity>

iOS

In iOS, you only need to tell the plugin to handle notifications by calling Notificare.setHandleNotification(true) in JS. See below.

JS

In your device ready logic, tell the plugin to handle incoming notifications, then add an event listener for incoming notifications

onDeviceReady: function() {
	Notificare.setHandleNotification(true);
	Notificare.on('ready', function(applicationInfo) {
		Notificare.enableNotifications();
	});
	Notificare.on('registration', function(deviceId) {
	
		// ...

	});

	Notificare.on('notification', function(notification) {
		if (notification.extra.myTypeFlag == 'special') {

			// Here you could show notification in your view, or ignore it
			// In iOS, don't use any blocking calls like window.alert()
			// If you do want to log the notification as opened, you should call
			// Notificare.logOpenNotification(notification);

		} else {

			// open like normal
			Notificare.openNotification(notification);

		}
	});
	Notificare.start();
});

Troubleshooting

Android

If the app crashes or misbehaves, please check logcat for errors

Attempt to invoke virtual method 'android.content.pm.PackageManager android.content.Context.getPackageManager()' on a null object reference

This means that you didn't make your application to be a re.notifica.cordova.BaseApplication. Please change the android:name attribute of your element in your manifest

NotificareLogger: re.notifica.NotificareError: Authentication error, please check your keys

This means you didn't add the application keys and secrets to your notificareconfig.properties

iOS

If you see a modal dialog popping up at launch saying you have a mising or invalid plist, make sure you fill in application keys and secrets in Notificare.plist

Customizations

For more info on customizing the default behavior and looks of the Notificare UI, take a look at the platforms' respective docs:

Customizations

notificare-push-lib-cordova's People

Contributors

silentjohnny avatar

Watchers

James Cloos avatar DEO avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.