April 01, 2018

Send Browser Notifications from a Website (Deliver Real-Time Alerts)

Modern web applications use browser push notifications to deliver real-time alerts to their users. These notifications are sent to users' devices even when the browser window is closed. Learn how to implement them using the Notification API. 

Send Browser Notifications from Website
Demo Download

The Notification API allows websites to display desktop notifications to end users, even when the page is not active. These notifications can also be sent when the browser window is closed, when used with the Push API and Service Workers.

 

Difference Between Web Push and Notification API

The Web Push/Push API allows servers to send alerts to user devices, although the user is not on site. The Notification API displays local alerts to website visitors. The API can send browser notifications if the browser window is in the background, but not if the browser is closed. Web Push can notify users even when the browser is closed.

 

How to Implement Browser Notifications Using The Notification API?

The Notification API works in a secure context in most or some browsers, even if we are working in a local environment. This API is supported by all major browsers. How desktop notifications are displayed can vary from browser to browser and operating system. This post demonstrates how to send browser notifications every five minutes as an example. We will be using the Notifications interface of this API, and we will create the following files:

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

Create a Button to Send a Browser Notification

Create an HTML page with a button to send a desktop notification. When this button is clicked, a notification will be displayed. We will add an event listener for that in the next step.

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Send Browser Notification from a Website - Demo</title>
        <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
        <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport" />
        <link rel="stylesheet" href="css/style.css" />
        <script src="js/javascript.js" type="text/javascript"></script>
    </head>
    <body>
        <section class="section py-4">
            <div class="container">
                <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>
        </section>
    </body>
</html>
 

Send Browser Notifications with JavaScript Notification API

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

The init_notification function will be triggered when the document is loaded, or for demo purposes, when the show notification button is clicked. This function will check if the browser supports notifications; it will request permission to show them. Otherwise, it will show a pop-up to the user, notifying them that the browser does not support notifications.

The send_notification function will show a notification every five minutes. It checks if notification permission was granted or not. If the user has allowed browser notifications to be displayed, it will send one from 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 for HTML Interface

We also need our layout to look good, so we add CSS styles for the entire web page and pop-up 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;
}
.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.container {
    max-width: 1140px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
}
.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;
    }
}

We are now able to send browser notifications to users from a website. Even though the code snippet in this post sends timed notifications, it can be modified according to the application's specific needs to display real alerts/messages to the users.

Home