Painless Push Notifications with Pushover

I have to say that Push Notifications are just super cool.

Think how cool would it be to make your Mobile ding with a custom sound every time a really important event happened in one of your systems?

• Just sold another one of your apps? Cash Register Ding.
• Just crashed your production server? Death Spiral ding.
• Just crossed an 100k subs? Happy Sound ding.

Way cooler than SMS :-).

And it turns out adding such features into your app is totally trivial thanks to the good folk at Pushover.net. And today I’m going to show you how!

Enter Pushover

Pushover is a web service (and suite of platform specific mobile apps for Android, IoS and the Browser) that lets you easily push Notifications to all (or one) of your registered devices whenever you would like.

It’s a one-off $5 subscription cost per platform, then you’re free to send up to 7500 notifications month forever. That’s a lot of events!

Integrating with Ionic 2 or Angular 2 (or whatever)

Integrating the Pushover API into your app is a snack. There are node modules, and other third party API libs (Java, C#, Python and all the other good gear) to use out of the gate, but the API is simple form POST to an endpoint, so rolling your own is no big deal either. I’ll show you how.

In Angular 2, I’d create a pushover.service.ts file to host my service, and drag in my keys and endpoints:

@Injectable()
export class PushoverService {

    private PUSHOVER_ENDPOINT='https://api.pushover.net/1/messages.json';
    private PUSHOVER_TOKEN='your-magic-token-here';
    private PUSHOVER_USER_KEY='your-user-key-here';

    constructor(private http : Http) { }

}

And with my shell class in place, there’s just the small matter of performing that actual form POST and getting those notifications rolling in:

sendNotification(title : string, body : string) : Observable<Object>{
    let pushoverMessage = {
        token : this.PUSHOVER_TOKEN,
        user: this.PUSHOVER_USER_KEY,
        title: title,
        message: body
    };

    let options = {} as RequestOptionsArgs;
    options.headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
    let pushoverStr = this.mapToFormData(pushoverMessage);
    console.log(`Pushing message ${pushoverStr}`);
    return this.http.post(this.PUSHOVER_ENDPOINT, pushoverStr, options).map( resp => {
    if (resp)
        if (resp.status == 200) {
            return resp.json()
        } else {
            throw resp;
        }
    }).catch((err, other) => {
        console.log("Trouble in the land of POST", err);
        return Observable.throw(err);
    });

}

The only other magic I needed was a way to format my data into an old school form POST. There’s probably a better way in npm to do this stuff, but here’s my heavy hammer approach:

public mapToFormData(map: Object): string {

    let formData = '';

    for (var key in map) {
        if (formData)
            formData += '&';

        let eKey = encodeURIComponent(key);
        let eValue = encodeURIComponent(map[key]);
        formData += `${eKey}=${eValue}`;
    }

    return formData;

}

And will all the code happening, it’s a matter of calling it from my login form:

this.notificationsService.sendNotification(`Successful login for ${as.auth.email}`, "With all kinds of winning").

    subscribe( value => { console.log("Winning"; },
    err => { console.log("Observable threw", err); })

And then sit back and enjoy the greatness:

Having so much fun with this stuff. Thanks Pushover.net!