April 01, 2018

Send Browser Notifications from Website

Many web applications use browser push notifications to notify their users. These notifications are useful to send reminders or notify users instantly even if the browser window is not active. In this post we will implement this push notification to be sent after every five minutes.

Send Browser Notifications from Website
Demo Download

The Notifications API allows websites to display desktop notifications to end users. These notifications work outside the current view port which means even if the current page document is not active or in view it will still send website notifications to user. Learn in this post how to send browser push notifications from website to visitors using Notifications API.

How to Implement Browser Notifications Using Notifications API?

The notifications API works in secure context in most or some browsers even if you are working in a local environment. All major browsers support Notifications API. How desktop notifications are displayed can vary from browser to browser and operating system. This post will explain in simple steps how to send browser notifications. We will be using Notifications interface of this Notifications API. Notifications are supported by almost all latest browsers. For this post we will create following files:

  • index.html: Contains the main web page elements which will initiate notifications.
  • javascript.js: Which will check if browser supports notifications then trigger website notifications at a specific interval.
  • style.css: Contain document styles.
 

Create a Button to Send Browser Notification

Create an HTML page with button to send desktop notifications from website.

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Send Browser Notification from Website - Demo</title>
        <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
        <script src="js/javascript.js"></script>
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
        <div class="container">
            <div class="py-4">
                <div>
                    <button type="button" class="btn btn-green show-notification">Show Notification</button>
                </div>
                <div class="popup hidden">
                    <span class="close" data-dismiss="popup">&times;</span>
                    Your browser does not support notifications
                </div>
            </div>
        </div>
    </body>
</html>

Send Browser Notifications with JavaScript Notification API

We set a static notification object and display browser notification every five minutes. We are using two functions init_notification() and send_notification(). 

The init_notification will be triggered when document is loaded or for demo purpose when show notification button is clicked. This function will check if the browser supports notifications, it will request permission to show notifications, Otherwise it will show a popup to user informing the browser does not support notifications. 

The send_notification will show the notification after every five minutes. It checks if notification permission was granted or not. If user had allowed browser notifications to be displayed it will send the browser notification using the static notification object we created.

javascript.js

let notification_object = {
    url: "https://www.codestacked.info",
    title:"Notification Title",
    options: {
        icon: "https://assets.codestacked.info/images/codestacked-logo.png",
        body: "This is notification body"
    }
}

document.addEventListener("DOMContentLoaded",function(){
    init_notification();

    document.querySelector("[data-dismiss=popup]").addEventListener("click", function(){
        this.parentElement.classList.add("hidden");
    });

    document.querySelector(".show-notification").addEventListener("click", function(){
        init_notification();
    });
});

function init_notification(){
    if("Notification" in window){
        // If notification permission is granted then send notification
        if (Notification.permission === "granted") {
            send_notification(notification_object);
        }
        // If notification permission is not denied then request for permission
        else if(Notification.permission !== "denied"){
            Notification.requestPermission().then((permission) => {
                if (permission === "granted") {
                    send_notification(notification_object);
                }
            });
        }
    }
    else{
        document.querySelector(".popup").classList.remove("hidden");
    }
}

function send_notification(notification_object){
    if(Notification.permission === "granted") {
        let notification = new Notification(notification_object.title, notification_object.options);
        notification.onclick = function(){
            window.location.assign(notification_object.url);
        }
    }
}

// Send out notification every five minutes
window.setInterval(function(){
    send_notification(notification_object);
}, (60000 * 5));
 

Add CSS Styles

Add CSS styles for whole web page and popup notification.

style.css

*{
    box-sizing: border-box;
}
html,body{
    margin: 0;
    padding: 0;
}
body{
    background-color: #f6f6f6;
    font-family: "Segoe UI", "Roboto", "Helvetica", sans-serif;
    font-size: 15px;
    font-weight: normal;
    font-style: normal;
}
a{
    text-decoration: none;
    color: #3778cd;
}
.container{
    max-width: 1140px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
}
.py-4{
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.btn{
    display: inline-block;
    padding: 5px 10px;
    cursor: pointer;
    font: inherit;
    border-radius: .25rem;
}
.btn-green{
    background: #009549;
    border: 1px solid #009549;
    color: #fff;
}
.popup{
    max-width: 300px;
    background: #e65442;
    color: #fff;
    padding: 10px;
    position: fixed;
    inset: auto 0 10px 0;
    margin: 0 auto;
    text-align: center;
    animation: moveUp .5s;
}
span.close{
    font-size: 20px;
    line-height: 20px;
    cursor: pointer;
}
.hidden{
    display: none;
}
@keyframes moveUp{
    from{
        bottom: -50%;
    }
    to{
        bottom: 10px;
    }
}
Home