Sunday, April 1, 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 tutorial we will implement this push notification to be sent after every five minutes.

Send Browser Notifications from Website

index.html

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

style.css

*{
    box-sizing: border-box;
}
.section{
    padding: 15px;
}
.main-container{
    max-width: 1024px;
    margin: 0px auto;
}
.btn{
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #ddd;
}
.btn-green{
    background: #360;
    color: #fff !important;
}
.popup-chip{
    max-width: 300px;
    background: #222;
    color: #fff;
    padding: 10px;
    box-shadow: 0px 0px 10px rgba(100,100,100,0.5);
    position: fixed;
    bottom: 10px;
    left: calc((100% - 300px)/2);
    text-align: center;
    animation: moveUp .5s;
}
span.close{
    position: absolute;
    top: 2px;
    right: 5px;
    font-size: 20px;
    line-height: 20px;
    cursor: pointer;
}
.hide{
    display: none;
}
@keyframes moveUp{
    from{
        bottom: -50%;
    }
    to{
        bottom: 10px;
    }
}

javascript.js

var count = 0;
var icon = '//2.bp.blogspot.com/-7v3qAQI66Y8/XAAAy-4En4I/AAAAAAAABQs/PtR29OocuPghqkozt5FWcP71iD2cs9SNACK4BGAYYCw/s1600/codestacked-logo.png';
window.addEventListener('load',function(){
   // Initiate notification on page load
   init_notification();
   document.querySelector("span.close").onclick=function(){
       this.parentElement.classList.add("hide");
   }
   document.querySelector(".show-notification").onclick=function(){
      // Initiate notification on button click
      init_notification();
   }
});
// Set notification settings
var notifications = {
    0:{
        title:"Notification 1",
        body:"Notification message body 1",
        url:"https://www.codestacked.info"
    },
    1:{
        title:"Notification 2",
        body:"Notification message body 2",
        url:"https://www.codestacked.info"
    },
    2:{
        title:"Notification 3",
        body:"Notification message body 3",
        url:"https://www.codestacked.info"
    },
    3:{
        title:"Notification 4",
        body:"Notification message body 4",
        url:"https://www.codestacked.info"
    }
};
// Function to initiate notification
function init_notification(){
    // Check if browser allows notificatons
    if ("Notification" in window) {
        // If notifications are allowed in browser request permission
        Notification.requestPermission(function (permission) {
            if (permission === "granted") {
              // If permission is granted show notification
              send_notification(notifications[count]['title'],notifications[count]['body']);
            }
        });
    }else{
        document.querySelector(".popup-chip").classList.remove("hide");
    }
}
// Function to show notification
function send_notification(title,body){
    if (Notification.permission === "granted") {
        count++;
        if(count >= (Object.keys(notifications).length)){ count = 0;}
        var notes = new Notification(title,{icon:icon,body:body});
        notes.onclick=function(){
            window.location.assign(notifications[count]['url']);
        }
    }
}
// Show notification every five minutes
window.setInterval(function(){
    send_notification(notifications[count]['title'],notifications[count]['body']);
},(60000 * 5));