How to Add Push Notifcations to your Website

This week I released https://github-notifications.herokuapp.com/, a site that demos push notifications in Firefox. It uses Github web hooks to send notifications when there’s a commit to one of your repositories. Push notifications are currently implemented in Firefox as an experimental add-on.

This post shows the code I used to send push notifications from the site.

Get a Push URL

When you give a website permission to send push notifications, Firefox asks the Push Notification Service to create a URL for the site to contact you. That URL is returned through the mozNotification javascript API.

var notification = navigator.mozNotification;
if (notification && notification.requestRemotePermission) {
  var request = notification.requestRemotePermission();
  request.onsuccess = function() {
    var url = request.result.url;
    jQuery.post("/add-push-url", {"push-url": url});
  }
}

This code checks that navigator.mozNotification exists and then asks for permission to send notifications using requestRemotePermission(). When the onsuccess event fires, the callback POSTs your push URL back to the server.

(You can play with the mozNotification API by installing the add-on.)

Save the Push URL

The backend of my site is a simple Flask app. The User model stores the username and push URL:

class User(Model, db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(80), unique=True)
    push_url = db.Column(db.String(256), nullable=True)

Users are created with an empty push_url after they connect to Github through OAuth. The push_url is filled in by calling the /add-push-url view:

@app.route('/add-push-url', methods=['POST'])
def add_push_url():
    username = session['username']
    user = User.query.filter_by(username=username).first_or_404()
    user.push_url = request.form['push-url']
    db.session.add(user)
    db.session.commit()
    notify(user.push_url,
           'Welcome to Github Notifications!',
           'So glad to have you %s.' % user.username)
    return ''

Send a Notifcation

Sending a notification is as easy as POSTing to the push URL.

def notify(push_url, title, body, action_url=None):
    msg = {'title': title,
           'body': body}
    if action:
        msg['actionUrl'] = action_url
    requests.post(push_url, msg)

Using the requests library, notify sends a message back to the user’s push URL as a string of url-encoded parameters. After that, the push notification system takes care of getting the message to the user’s browser.

That’s all the code needed to send push notifications to Firefox; we’re trying to keep the system as simple as possible for developers. In the coming months the add-on will be integrated into the browser and our Push Notification Service will go live. If you have questions, feel free to contact me over email or twitter.