Push Notifications with Ionic Framework

Question

I'm trying to implement Push Notifications with Ionic and I'm pretty confused. Until now, I've tried the following alternatives with no success:

Ionic Push

Seems to be the best solution. It "simulates" the notifications in browser making easy test. There are two versions:

1. Version 1.0: the docs are avaiable at http://docs.ionic.io/v1.0/docs/push-overview. The page displays an warning at the bottom saying to check the latest version (2.0beta). If I keep in the page and try to follow the instructions, everything seems to work fine, but if I send the push to https://push.ionic.io/api/v1/push no message arrives. Looking at firebug I found that $ionicPush is querying the 2.0alpha API instead of query the 1.0 API.

2. Version 2.0: the docs are avaiable at http://docs.ionic.io/docs/push-overview. It is very similar to 1.0 and it works fine in browser, Android (development and production) and iOS development enviroments. But, I can't get messages on IOS production (after publish the app to store). I searched hard for a solution, but I found some answers saying that it is alpha and should not be used.

So, if version 1.0 does not exists (it is using the v2.0 API) and v2.0 is alpha and should not be used, I concluded Ionic Push can't be used.

Question 1: is possible use ionic push to send notifications to iOS and Android?

Question 2: using the 2.0 setup, can I send messages with Apns PHP instead of Ionic Push ?

Cordova Phonegap Plugin Push

This plugin is used by Ionic Push behind the scenes I guess. But, I can't figure out how use it. The tutorials and docs I found are obsolete and references an deprecated version (https://github.com/phonegap-build/PushPlugin.git). Even ngCordova references this deprecated version (http://ngcordova.com/docs/plugins/pushNotifications/). ngCordova suggests Ionic Push also. I can't find an full example showing how to use https://github.com/phonegap/phonegap-plugin-push with ionic.

Question 3: how setup Cordova Phonegap Plugin Push with ionic?

Answer 1

I didn't use Ionic Push yet, so I can only try to answer your third question.

Actually I think the examples on the GitHub plugin page are pretty good so I'm gonna reference those. If you have any further questions feel free to comment and I will elaborate on it.

To start, include the example script in your index.html inside a deviceready listener callback and initialize the plugin with your settings. In the registration event handler, you get the device ID of the current user via data.registrationId which you can save in your database.

To actually send out push messages, I use node-gcm (Android) and apnagent (iOS) server-sided. There are also some good example at least for Android on the plugin page.

Answer 2

I had been struggling with this for a couple of days, until I found this guide which seems to be really useful: https://github.com/yafraorg/yafra/wiki/Blog-Ionic-PushV5

Hope that can help someone else too!

This is the unofficial documentation for cordovaPushv5, see the actual implementation here: https://github.com/driftyco/ng-cordova/blob/master/src/plugins/push_v5.js

Answer 3

I was able to send/receive push notifications on IOS and Android with Ionic 1 using Google Firebase and https://github.com/arnesson/cordova-plugin-firebase/. Following what I did:

1. Created the DEV/PROD provisioning profiles on developer.apple.com. Checked my developer/team certificates when creating the provisioning profiles.
2. Created the DEV/PROD APS certificates on developer.apple.com.
3. Installed developer/team certificates on dev machine.
4. Installed DEV/PROD APS certificates on dev machine.
5. Installed provisionig profiles on dev machine.
6. Installed plugin with "cordova plugin add [email protected]".

7. Added code to my app:

   window.FirebasePlugin.grantPermission(); window.FirebasePlugin.getInstanceId( function(token) { thiss.saveToken(token); }, function(error) { console.log(error); } );

   window.FirebasePlugin.onNotificationOpen( function(notification) {
   //alert("Yeahh!"); }, function(error) { //alert("Error"); } );

8. Created Google GCM/Google Firebase Account.

9. Added my app to Firebase with iOS/Android platforms.
10. Added APS certificates to "Cloud Messaging" section on firebase project settings.
11. Downloaded GoogleService-Info.plist e google-service.json and placed them in my app root folder.
12. Builded the app.
13. IOS only: In XCode enabled "Push Notifications" and "Background Modes: Receive notifications".

To send notification I use the following php script:

$data = Array
(
    [to] => <token>
    [priority] => high
    [notification] => Array
        (
            [title] => My Title
            [text] => Notification test
            [sound] => default
            [vibrate] => 1
            [badge] => 0
        )

)

$jsonData = json_encode($data);
$ch     = curl_init("https://fcm.googleapis.com/fcm/send");
$header = array(
  'Content-Type: application/json',
  "Authorization: key=".$gcmApiKey
);

curl_setopt($ch, CURLOPT_HTTPHEADER, $header);
curl_setopt( $ch,CURLOPT_SSL_VERIFYPEER, true );
curl_setopt( $ch,CURLOPT_RETURNTRANSFER, true );

curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $jsonData);

$result = curl_exec($ch);
curl_close($ch);

echo $result;