Push Notification with Ionic 3

01 May 2017 on Ionic2. 5 minutes

One of the things that makes using instagram and pinterest so rewarding is when someone likes your post / photo. That instant gratificaiton when you get a little notification on your device that your friend liked the picture you took keeps you going back for more.

With 38Plank, we wanted to bring that same reward to people when they workout. We established push notifications when someone “likes” your workout results, and push notifications if someone completes a workout you created.

I can attest to the rewarding nature of this notifications as it always keeps a little smile on my face.

Well luckily Ionic offers the exact same service and you can configure it to work for both iOS and Android with Ionic Cloud Push Notifications.

Initial Setup

Now the initial setup for both iOS and Android is a bit convoluted, and I want to focus on actual implementation in your app. For now I will point you at a few references that have dove into this for you. Apple’s developer experience for generating APN Certificates is particularly convoluted, but that is generally the experience that I have had with most of Apples developer experience.

1) Setup Ionic Cloud Services in your app Ionic Cloud

2) Configure both a Dev profile and a Prod profile for Ionic Push Services link

3) Configure Push Ceritificates for Android and iOS

Keep in mind that this setup is Non-Trivial. I think it took me somewhwere in the ballpark of 3 tries and about 2 hours to get this correct. After you have completed this setup though, we can move on to actual implementation.

Registering The Device

The first things we should do to test our setup is to register our device with push notification services. There are three parts to this registration process. First you must add the push notification plugin to your app.

ionic plugin add phonegap-plugin-push --variable SENDER_ID=12341234 --save

In this case “SENDER_ID” is the FCM (android) sender id from your cloud settings that you configured in step 1 of our initial setup.

The next step is connecting your device with ionic and with your own service. I think this is where the ionic framework documentation is lacking in specifics. I’ll show the code, then explain what is happening. Personally, I put this code in my app.component.ts file, and called it whenever I heard a login event fire. (I’ll show that specific implementation later).

import {Component} from '@angular/core';
import {
  Push,
  PushToken
} from '@ionic/cloud-angular';

@Component( ... )
export class MyApp {
  constructor(public push: Push) {
    this.platform.ready().then( () => {
        this.registerPush();
    });
  }
  ...
  registerPush() {
      // Check that we are on a device
    if (this.platform.is('cordova')) {
        // Register push notifications with the push plugin
      this.push.register().then((t: PushToken) => {
        console.log('Generated Token' + JSON.stringify(t));
        // Save the user with Ionic's user auth service
        return this.push.saveToken(t);
      }).then( (t: PushToken) => {
        console.log('Token Saved', t);
        this.listenForPush();
      }).catch( (err) => {
        console.log('Error Saving Token: ' , err);
      });
     }
  }
}

First, always validate that the platform is using cordova. In many cases when testing on virtual devices or with ionic serve, I ran into issues and it broke my developement environment. You will need to do all of this testing ON DEVICE, which is annoying but neccesary for now.

Ok so there are two things going on here that we need to talk about. Issue number 1 is how to register the device and app with the native push plugin. This is where push.register() comes in.

this.push.register().then( (t: PushToken) => {})

Then we need to register this specific token and device with Ionic’s services. This is so that we can send push notifications through their dashboard, or on our own using their API.

this.push.saveToken(t))

If all goes well, you should have succesfully registered the device with both the native plugin and Ionic’s services. Now we can move on to Part 2: Using Ionics Platform

Ionic Push Services

Ok, so we started up our app and we get a nicely logged message in from adb logcat or some other service that tells us that we are registered our device, how do we test this?

This is where we use Ionic’s dashboard to make it quick and easy. Go to the Push section in ionic dashboard and create a new push request.

There are only a few things you need to worry about. One is clicking the “Content Available option in the device options section. This will let the notification pop-up on iOS in the background.

Before you send off your first push message, make sure you close your app. If you app is open, it will intercept the push notification, and we have not setup that piece yet.

When it asks which profile to send it to, select “Dev”. Whenever you deliver a build to the phone directly (using xcode, or ionic run android), the device will be listed under a dev profile. When the app is delivered through the Beta program for google, or through Test Flight, it is only then that it is a “Prod” device.

Click Send and now you have sent your first push notification!

In the next article, we will go over how to setup and send push notifications to one device at a time using the API.


Previous

Making a Calendar with Ionic2

One of the most usefull piecies of functionality for any application is to schedule events. All sorts of apps need to schedule things or display schedules such as an event planning appliation, an enterprise coordination app, or maybe even a app for shift work.

Next

Part 2: Push Notifications with Ionic 3

In Part 1 of this blog post, we looked at how to configure push notifications on iOS and Android with Ionics Push notification service. Then we sent a push notification to every device using Ionic push.