Using Push.js to Display Web Browser Notifications

Using Push.js to Display Web Browser Notifications
1and1 placeholder image

The Notifications API for the web gives us the ability to send custom notifications to our users that we can control using JavaScript. As you might already know, notifications are used to alert the user about important information, and in this tutorial we'll learn how to send them ourselves.

Setup

Since there isn't too much to sending custom notifications, this will be a relatively simple project. However, it will require a web server of some kind, and if you don't already have one, this tutorial shows you how to set up a local one using Node.

Our app is going to be pretty simple, just a button to request permissions to send notifications, then another button that actually sends the notification.

Feel free to check out the demo before we begin. Here is a picture of how it looks:

A demo using Push.js
A demo using Push.js

To make things simpler, instead of working with the native Notifications API, we'll be using the open-source library Push.js, which adds a thin wrapper around the native API that makes working with notifications much easier.

Let's start with a barebones index.html:

	
    <!DOCTYPE html>
    <html>
        <head>
        	<title>Using Push.js to Display Web Browser Notifications</title>
        </head>
        <body>
            <h1>Using Push.js to Display Web Browser Notifications</h1>
            <p>This is a demo showcasing the use of web notifications using the open-source <a href="https://github.com/Nickersoft/push.js" target="_blank">Push.js</a> library.</p>
            <button class="request-button">Request permissions</button>
            <button class="show-button">Show notification</button>
        </body>
    </html>
	

So far this is what you should see:

Barebones Push.js demo
Barebones Push.js demo

If you've done that so far, congrats, you can move on to requesting permission from the user.

Requesting Permission

First, import the Push.js library using a CDN link:

	
    <script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/1.0.5/push.js"></script>
	
	
    Push.Permission.request(onGranted, onDenied);
	
onGranted and onDenied are both functions to be called if the user grants or denies our request to allow notifications. Inside a new file, javascript.js, place this:
	
    var requestButton = document.querySelector(".request-button");

    function onGranted() {
        requestButton.style.background = "green";
    }

    function onDenied() {
        requestButton.style.background = "red";
    }

    requestButton.onclick = function() {
        Push.Permission.request(onGranted, onDenied);
    }
	

The request button will turn green if the user is cool with notifications and red if they're not. Of course, you can do whatever you want when they grant or deny the request. Import your javascript.js file, serve up your files using a web server of any kind, and click on the request button.

If done correctly, you should get this familiar dialog appear:

The notification request dialog.
The notification request dialog.

Upon clicking Allow or Block, the button should change colors indicating your choice.

namecheap placeholder image

Creating a Notification

Now that we've asked the user for permission, we can send them a notification using Push's create function. All of the properties here should be self-explanatory, so we'll just show the code for it:

	
    Push.create("Hello from Sabe.io!", {
        body: "This is a web notification!",
        icon: "/icon.png",
        timeout: 5000,
        onClick: function() {
            console.log(this);
        }
    });
	

This code creates and sends a new notification with a title of Hello from Sabe.io!, a body text of This is a web notification!, using an icon named icon.png, and automatically closes after 5,000 milliseconds. There is also a function you can pass in to execute code if the notification is clicked on, which in this case we just log the object to the console.

Here is a look at the notification:

A web browser notification
A web browser notification

Putting It All Together

Now that we have the code for a new notification, let's add it to our javasript.js file. The entire file should now look like this:

	
    var requestButton = document.querySelector(".request-button");
    var showButton = document.querySelector(".show-button");

    function onGranted() {
        requestButton.style.background = "green";
    }

    function onDenied() {
        requestButton.style.background = "red";
    }

    requestButton.onclick = function() {
        Push.Permission.request(onGranted, onDenied);
    }

    showButton.onclick = function() {
        Push.create("Hello from Sabe.io!", {
            body: "This is a web notification!",
            icon: "/icon.png",
            timeout: 5000,
            onClick: function() {
                console.log(this);
            }
        });
    };
	

Let's make things pretty by adding these styles in a new file called styles.css:

	
    body {
        font-family: sans-serif;
        color: white;
        line-height: 1.5;
        text-align: center;
        padding: 2rem;
        background-color: #593f6e;
    }
    a {
        color: white;
    }
    h1 {
        max-width: 30rem;
        margin: 0 auto 3rem;
    }
    p {
        max-width: 30rem;
        margin: 0.5rem auto;
    }
    button {
        padding: 1rem;
        color: white;
        background-color: #1E88E5;
        outline: 0;
        border: 0;
        font-size: 1rem;
        text-transform: uppercase;
        cursor: pointer;
        opacity: 0.9;
        border-radius: 0.25rem;
        margin: 2rem 1rem 0;
        display: inline-block;
        font-weight: bold;
    }
    button:hover {
        opacity: 1;
    }
	

After you import these new styles, your final index.html should look like this:

	
    <!DOCTYPE html>
    <html>
        <head>
            <title>Using Push.js to Display Web Browser Notifications</title>
            <link rel="stylesheet" href="/styles.css">
        </head>
        <body>
            <h1>Using Push.js to Display Web Browser Notifications</h1>
            <p>This is a demo showcasing the use of web notifications using the open-source <a href="https://github.com/Nickersoft/push.js" target="_blank">Push.js</a> library.</p>
            <button class="request-btn">Request permissions</button>
            <button class="show-btn">Show notification</button>
        </body>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/1.0.5/push.js"></script>
        <script src="/javascript.js"></script>
    </html>
	

Finally, for your icon.png we used the following image, but you're free to use anything you'd like!

The Sabe.io notification icon!
The Sabe.io notification icon!

If all goes well, after you save all the files and again serve it up using a web server, your app should function exactly the same as our demo here.

Thanks for reading and have fun sending notifications! ๐Ÿ””๐Ÿ””๐Ÿ””

Another look at the demo!
Another look at the demo!

Further Reading

If you learned from this tutorial, follow us on Facebook, Twitter and LinkedIn! ๐Ÿ˜Š Also, join the conversation over at our official forum!