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

Search and install “Push Notifications for WordPress (Lite)” from the Plugins WordPress page Activate “Push Notifications for WordPress (Lite)” through the ‘Plugins’ menu in WordPress 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:

Push Notifications Social buttons About Page Params Page Language switch [French|English|Chinese] Accessibility (Post font size) App rate Docker support for easier installation 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