iOS / Android push notifications 100% free and self hosted for WordPress using Cordova and Ionic

Push notification is always a pain when it comes to find the perfect free service, there are several possibilities like pushwoosh, pushapps, pushover etc.

If you are hosting your WordPress website there is no need to subscribe any of those services. With your server you have already what it takes to send push notifications to your subscriber.

No third party service involved, just your WordPress server and your application.

It all start with installing Push Notifications for WordPress (Lite) plugin to your WordPress.

Send push notifications to iOS, Android, and Fire OS devices when you publish a new post. Straight from your WordPress site, in real-time.

Installation

  1. Search and install “Push Notifications for WordPress (Lite)” from the Plugins WordPress page
  2. Activate “Push Notifications for WordPress (Lite)” through the ‘Plugins’ menu in WordPress
  3. Configure the plugin by going to the Push Notifications menu that appears in your admin menu

Android

If you have not already done so, you’ll need to set up a Google API project, to generate your senderID. Follow these steps to do so.

Get the SenderID

Signing into https://developers.google.com/mobile/add and follow the steps to get Cloud messaging senderID and apiKey.

Tip: The senderID is a 12 digit number

Configure the WordPress plugin

Go to Push Notifications > Settings and check the following checkboxes:

  • Basic Options > Send push notifications when a new post is published
  • Basic Options > Android devices
  • Send Push Notifications for > Posts
  • Misc > In the Android notification payload add the message field

Then go to “Android Push Notifications (via GMC)” section and enter you Google Api key.

Do not forget to save.


iOS

Configure the WordPress plugin

Go to Push Notifications > Settings and check the following checkboxes:

  • Basic Options > Send push notifications when a new post is published
  • Basic Options > iOS devices
  • Send Push Notifications for > Posts

Do not forget to save.

Certificates and Provisioning profiles

This part is really painful (Generally when you have to use Apple’s service it is…). It is all well explained there: http://strangemilk.com/ionic-push-notifications-with-ios/

Create .pem

Get .perm files

Once you have got your .pem files upload them in the iOS Push Notifications section

Setup Ionic / Cordova

I recommend using NgCordova and the NgCordova pushNotifications plugin

Installation

cordova plugin add https://github.com/phonegap-build/PushPlugin.git

# Or if you are using Ionic CLI
ionic plugin add https://github.com/phonegap-build/PushPlugin.git

Register to “Push Notifications for WordPress (Lite)”

“Push Notifications for WordPress (Lite)” exposes a Web service API that you can access over HTTP.

It only takes the OS (iOS | Android) and the device token.

function register(os, token) {
        var baseUrl;
        baseUrl = 'http://yourDomainName.com/pnfw';
        if (!baseUrl) {
            return $q.reject();
        }
        return $http({
            method: 'POST',
            url: baseUrl + '/register',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            transformRequest: function(obj) {
                var p, str;
                str = [];
                for (p in obj) {
                    str.push(encodeURIComponent(p) + '=' + encodeURIComponent(obj[p]));
                }
                return str.join('&');
            },
            data: {
                os: os,
                token: token
            }
        });
    };

iOS

$cordovaPush.register(iosConfig).then(function(deviceToken) {
    register('iOS', deviceToken).success(function() {
        return $log.info('Push notif Token stored');
    });
    $log.debug('iOS push notification registration success', deviceToken);
}, function(err) {
    $log.error('iOS push notification registration error', err);
});

$rootScope.$on('$cordovaPush:notificationReceived', function(event, notification) {
    $log.debug('Push notif message', notification);
    if (notification.alert) {
        if (notification.foreground) { // If your user is using the app
            // Do something like opening the Post within the app
            // You have access to
            // notification.id which is the new Post ID
            // notification.alert which is the new Post Title
        } else { // If your user has clicked on the notification
            // Do something like opening the Post within the app
            // You have access to
            // notification.id which is the new Post ID
            // notification.alert which is the new Post Title
        }
    }
    if (notification.badge) {
        return $cordovaPush.setBadgeNumber(notification.badge).then(function(result) {
            $log.debug('Push notif badge ok', result);
        }, function(err) {
            $log.debug('Push notif badge error', err);
        });
    }
});

Android

$cordovaPush.register(androidConfig).then(function(result) {
    $log.debug('android push notification registration success', result);
}, function(err) {
    $log.error('android push notification registration error', err);
});
return $rootScope.$on('$cordovaPush:notificationReceived', function(event, notification) {
    switch (notification.event) {
        case 'registered':
            if (!notification.regid.length) {
                return;
            }
            $log.debug('registration ID', notification.regid);
            register('Android', notification.regid).success(function() {
                return $log.info('Push notif Token stored');
            });
            break;
        case 'message':
            $log.debug('Push notif message', notification);
            if (notification.foreground) { // If your user is using the app
                // Do something like opening the Post within the app
                // You have access to
                // notification.payload.id which is the new Post ID
                // notification.payload.message which is the new Post Title
            } else { // If your user has clicked on the notification
                // Do something like opening the Post within the app
                // You have access to
                // notification.payload.id which is the new Post ID
                // notification.payload.message which is the new Post Title
            }
            break;
        case 'error':
            $log.debug('Push notif error', notification);
            break;
    }
});

All in one

angular.module('yourModuleName').run(function($log, $cordovaPush, $rootScope, $http, $ionicPlatform) {
    var androidConfig, iosConfig, register;

    androidConfig = {
        "senderID": ""
    };
    iosConfig = {
        "badge": true,
        "sound": true,
        "alert": true
    };

    register = function(os, token) {
        var baseUrl;
        baseUrl = 'http://yourDomainName.com/pnfw';
        if (!baseUrl) {
            return $q.reject();
        }
        return $http({
            method: 'POST',
            url: baseUrl + '/register',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            transformRequest: function(obj) {
                var p, str;
                str = [];
                for (p in obj) {
                    str.push(encodeURIComponent(p) + '=' + encodeURIComponent(obj[p]));
                }
                return str.join('&');
            },
            data: {
                os: os,
                token: token
            }
        });
    };
    return $ionicPlatform.ready(function() {
        if (ionic.Platform.isAndroid()) {
            $cordovaPush.register(androidConfig).then(function(result) {
                $log.debug('android push notification registration success', result);
            }, function(err) {
                $log.error('android push notification registration error', err);
            });
            return $rootScope.$on('$cordovaPush:notificationReceived', function(event, notification) {
                switch (notification.event) {
                    case 'registered':
                        if (!notification.regid.length) {
                            return;
                        }
                        $log.debug('registration ID', notification.regid);
                        register('Android', notification.regid).success(function() {
                            return $log.info('Push notif Token stored');
                        });
                        break;
                    case 'message':
                        $log.debug('Push notif message', notification);
                        if (notification.foreground) { // If your user is using the app
                            // Do something like opening the Post within the app
                            // You have access to
                            // notification.payload.id which is the new Post ID
                            // notification.payload.message which is the new Post Title
                        } else { // If your user has clicked on the notification
                            // Do something like opening the Post within the app
                            // You have access to
                            // notification.payload.id which is the new Post ID
                            // notification.payload.message which is the new Post Title
                        }
                        break;
                    case 'error':
                        $log.debug('Push notif error', notification);
                        break;
                }
            });
        } else if (ionic.Platform.isIOS()) {
            $cordovaPush.register(iosConfig).then(function(deviceToken) {
                register('iOS', deviceToken).success(function() {
                    return $log.info('Push notif Token stored');
                });
                $log.debug('iOS push notification registration success', deviceToken);
            }, function(err) {
                $log.error('iOS push notification registration error', err);
            });
            return $rootScope.$on('$cordovaPush:notificationReceived', function(event, notification) {
                $log.debug('Push notif message', notification);
                if (notification.alert) {
                    if (notification.foreground) { // If your user is using the app
                        // Do something like opening the Post within the app
                        // You have access to
                        // notification.id which is the new Post ID
                        // notification.alert which is the new Post Title
                    } else { // If your user has clicked on the notification
                        // Do something like opening the Post within the app
                        // You have access to
                        // notification.id which is the new Post ID
                        // notification.alert which is the new Post Title
                    }
                }
                if (notification.badge) {
                    return $cordovaPush.setBadgeNumber(notification.badge).then(function(result) {
                        $log.debug('Push notif badge ok', result);
                    }, function(err) {
                        $log.debug('Push notif badge error', err);
                    });
                }
            });
        }
    }, false);
});

WordPress Hybrid Client

If you want your WordPress website available on iOS and Android there is a simple free and Open Sourced solution: WordPress Hybrid Client

With WPHC (WordPress Hybrid Client), your WordPress website application (iOS and Android) is just a build away.

Here is the features already available and a lot more is coming:

  1. Push Notifications
  2. Social buttons
  3. About Page
  4. Params Page
  5. Language switch [French|English|Chinese]
  6. Accessibility (Post font size)
  7. App rate
  8. Docker support for easier installation
  9. Syntax highlighter for tech blogs

MISC: Test Push Notifications on Android

If you want to test that GMC is correctly setup and that your device receive notifications you can follow this tutorial: Sending push notifications to Android via Gulp

Sending push notifications to Android via Gulp

If you ever wondered how to test that your push notifications work on Android without setting up any server here is how to do.

Install

npm install gulp node-gcm

Get Api key, Sender ID and Device ID

In order to be able to send push notifications we need only need the Google Cloud Api key, and the device ID(s).

To get the Api key and the senderID you can register there: https://developers.google.com/mobile/add

As for the device ID it can be found once your device is registered.

If you are using this Cordova plugin https://github.com/phonegap-build/PushPlugin you can get it like this (note that the senderID is used here):

document.addEventListener("deviceready", function() {
    var pushNotification = window.plugins.pushNotification;
    pushNotification.register(
        successHandler,
        errorHandler, {
            "senderID": "replace_with_sender_id (12 digits number)",
            "ecb": "onNotification"
        });

    function onNotification(e) {
        switch (e.event) {
            case 'registered':
                if (e.regid.length > 0) {
                    // Your GCM push server needs to know the regID before it can push to this device
                    // here is where you might want to send it the regID for later use.
                    console.log('Device id', e.regid);
                }
                break;
        }
    }

    function successHandler() {}

    function errorHandler() {}
});

Script

Now that you have both Device ID and Api key let’s create a script that send push notifications.

gulp.task('push:android', function() {
    if (!gutil.env.apiKey || gutil.env.apiKey === true) {
        throw new Error('You must specify the android Api key, refer to the documentation');
    }
    if (!gutil.env.deviceId || gutil.env.deviceId === true) {
        throw new Error('You must specify the android ID, refer to the documentation');
    }

    console.log('apiKey', gutil.env.apiKey);
    console.log('deviceId', gutil.env.deviceId);

    var gcm = require('node-gcm')

    var message = new gcm.Message({
        collapseKey: 'demo',
        delayWhileIdle: true,
        timeToLive: 3,
        data: {
            key1: 'message1',
            key2: 'message2'
        }
    });

    var sender = new gcm.Sender(gutil.env.apiKey);

    sender.send(message, (gutil.env.deviceId instanceof Array) ? gutil.env.deviceId : [gutil.env.deviceId], 5, function(err, result) {
        if (err) {
            console.error('Failed, status code', err);
        } else {
            console.log('Success', result);
        }
    });
})

Run

You can run the script like like this on one or several devices:

# One device
gulp push:android --apiKey YOUR_API_KEY --deviceId YOUR_DEVICE_ID

# Two devices
gulp push:android --apiKey YOUR_API_KEY --deviceId YOUR_DEVICE_ID --deviceId YOUR_DEVICE_ID

If everything is fine you should have your push notifications working.

Commun error

If your api key and senderId are not ok you will get this error message:

Success { multicast_id: 7412383159195664000,
  success: 0,
  failure: 1,
  canonical_ids: 0,
  results: [ { error: 'MismatchSenderId' } ] }

If so regenerate a api key using this link https://github.com/phonegap-build/PushPlugin.

How to install “Nike+ Fuelband” app on Android when not available in your country

In june Nike introduced it’s “Nike+ Fuelband” app for Android. This was actually a great news for the Android community that was waiting for this day to come, but unfortunately this app is only made available to certain versions of Android, and in only five countries…

With 30 million users, NikeFuel is rapidly becoming the universal measure of activity. Now, with the launch of the Nike+ FuelBand App for Android we’re delighted to help even more athletes get better […] This is another important step in the continued growth of our powerful ecosystem of digital products and services.

Stefan Olander Nike’s VP of Digital Sport

Available on some Androids

Jelly Bean 4.3 or higher and support Bluetooth LE technology are mandatory. The following devices are therefore already compatible:

  • Samsung Galaxy S3
  • Samsung Galaxy S4
  • Samsung Galaxy S5
  • HTC One
  • Nexus 5
  • Moto X

Available in five countries

IMG_20140831_201257

If you want to download the app from another country you will be disappointed to see the following message: “this item is not available in your country”

A downside of this announcement is that the app is only made available on five countries: US, UK, Canada, Germany and Japan. If you want to download the app from another country you will be disappointed to see the following message: “this item is not available in your country”.

Unfortunately this is not explained when you buy a “Fuelband SE” but no worries alternatives exist.

Install Aptoide

Aptoide is an alternative marketplace for Android applications where you can add different trusted stores. All you need to do is to download the apk and to follow the instructions. Once you have done that it is not over yet.

Add HUSSAMYAR store

HUSSAMYAR store has more than 210 applications and most of all contains the “Nike+ Fuelband” apk.

Install Nike+ Fuelband

Now open the Aptoide market and install the “Nike+ Fuelband” application, the way you would do it on Google Play.

Sources