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
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