I'm currently on the hunt for new client projects. If you have something interesting cooking, let me know!

How I monitor my sites while on the go

Development Aug 21, 2017

A while back I tweeted this:

And a couple of people messaged me asking how it was actually done, so I sent this...

But I thought I'd go into a touch more detail about how it works. So, here's a tutorial for how exactly you can set it up for your apps.

In this tutorial we'll create a neat PHP function you can put into your apps to send a notification to your phone.

1. Create a Pushover account

Pushover is the tool used to send the actual push notifications. You could also use something like IFTTT to similar ends but Pushover has a few options such as custom sound effects which are nice to have.

Once you've done that, download the app on your phone. You'll have to pay a small fee but it's well worth it in my opinion.

2. Make a simple webpage

I'd recommend putting this at https://yoursite.io/alerts.php or something similar. This is where you'll send POST requests to send your alerts to Pushover.

I found it easier to create this middle-man for a few reasons:

  1. Pushover requires all requests be delivered via HTTPS. Making the middle-man means you can send your requests to it via HTTP and it can relay them securely.
  2. I use this in pretty much all of my web apps. If I ever needed to change something, it's likely I could just change it on the middle-man server rather than having to go into each webapp and re-write the function.

A note about security: Be sure not to send anything sensitive. Never send names, emails or account information to a third-party like Pushover. Keep things vague in your alerts.

This is what my middle-man looks like for delivering alerts to Pushover...

Note that there's nothing stopping somebody POSTing to your middle-man a ridiculous amount and sending you thousands of notifications... so I'd recommend protecting it somehow.

3. Setup the function in your app

The function looks like this...

Note that there are two parameters: a $message one and a $sound one. The sound one is optional. You can find the full list of sound effects in Pushover's API docs if you want to use it.

To send a notification, just fill in THE TITLE OF YOUR APP and THE LINK TO YOUR MIDDLEMAN with your details and run the function like so...

alertMe('This is just an example');

If you want to send a notification with a custom sound effect, like if someone bought something on your site for example, just do this...

alertMe('Someone bought something!', 'cashregister');

Conclusion

That's basically it. You could of course go without the middle-man and just put all that code into the one function inside your app, but you'd only be able to send alerts when your site is running on SSL (which you should probably be doing anyway but that's another story for another time).


As of July '17 I'm freelancing full time! If you'd like to work together, please get in contact with me. I do all sorts of projects from UX design right through to web development

Keep reading
Sign up to my (infrequent) newsletter
If you want news and early access to products, this is where to get it.