Send Browser Push Notifications with Push.js

By Jake Rocheleau. in Toolkit. Updated on July 4, 2017.

Native mobile apps always had support for push notifications. But, these notifications were absent from the web until the Notifications API popped up.

The Notifications API works through JavaScript. It allows you to send push notifications directly to the user’s computer through their browser window. It’s not that hard to set it up yourself, but why reinvent the wheel?

Push.js is a free notifications library that handles all the basic push notifications features with a few lines of JavaScript.

These browser-based notifications are still very new and they have ways to go before catching on. Users need to allow notifications from certain websites before they will appear, so unless your audience already trusts your website, it can be tough getting people to accept.

But, the best way to learn is to try and see what happens. You can send visitors links to your newest blog posts, or information about new updates to the site or even requests to sign up for your newsletter. And, with Push.js it’s crazy simple to get this working.

You can download the library from npm or Bower, or just grab it directly from GitHub.

From there, you add some basic JavaScript to your page to create the push notification. If the user accepts the request from your site then they’ll consistently get all new notifications you send. Pretty cool!

You can set the notification header, the main content, and other features like the auto-close time.

Here’s a sample snippet from the Push.js website:

Push.create("Hello world!", {
    body: "How's it hangin'?",
    icon: 'icon.png',
    timeout: 4000,
    onClick: function () {
        window.focus();
        this.close();
    }
});

You don’t need to know much JavaScript to get this library working on your site. If you just copy/paste or work through the documentation you should have push notifications running in less than 15 minutes.

Not everyone likes these browser notifications and this library certainly won’t be useful on every website. But, if you’re willing to give this a try it’s super easy to set up and will make push notifications a heck of a lot easier.