How to get Web Notification when browser or tab is closed

Question

I need to get a Web Notification when the browser is closed or the browser tab is closed.

My code is below; the notifications work when the site is open, but not when the browser or tab is closed:

 <!DOCTYPE html>
    <html>
    <head>
    <title>Display browser Notification from Web Application Demo</title>
    <script type="text/javascript">

var articles = [
["HOW TO GET RS 2000 LENSKART GIFT VOUCHER FOR 890 USING NEARBUY LENSKART OFFER.","http://www.findyoursolution.in/get-rs-2000-lenskart-gift-voucher-890-using-nearbuy-lenskart-offer/"],
["HOW TO GET RS 100 CASHBACK ON RS 500 RECHARGE AND BILLS PAYMENT AT PAYZAPP APP.","http://www.findyoursolution.in/get-rs-100-cashback-rs-500-recharge-bills-payment-payzapp-app/"],
["HOW TO GET 500MB 3G-2G DATA FOR FREE BY USING AIRCEL FREE INTERNET TRICK","http://www.findyoursolution.in/get-500mb-3g2g-data-free-using-aircel-free-internet-trick/"],
["HOW TO AVAIL NEARBUY PVR CINEMA OFFER","http://www.findyoursolution.in/avail-nearbuy-pvr-cinema-offer/"],
["GIVE STRATEGIC IMPORTANCE TO INDIAN TELECOM SECTOR: DELOITTE HASKINS SELLS ON BUDGET EXPECTATIONS.","http://www.findyoursolution.in/give-strategic-importance-to-indian-telecom-sector-deloitte-haskins-sells-on-budget-expectations/"],
["AIRTEL TRICK UNLIMITED GUJRAT 3G 4G UDP TRICK","http://www.findyoursolution.in/airtel-trick-unlimited-gujrat-3g-4g-udp-trick-4920012-port/"],
["HOW TO DOWNLOAD MYVODAFONE APP AND GET 100MB 3G DATA.","http://www.findyoursolution.in/download-myvodafone-app-get-100mb-3g-data/"],
["HOW TO GET RS 20 FREE RECHARGE FROM AGROSTAR APP.","http://www.findyoursolution.in/get-rs-20-free-recharge-agrostar-app/"],
["WHAT ARE THE NAMES OF SNOW WHITE SEVEN DWARFS.","http://www.findyoursolution.in/names-snow-whites-seven-dwarfs/"]
];    

setTimeout(function(){ 
var x = Math.floor((Math.random() * 10) + 1);
var title=articles[x][0];
var desc='Most popular article.';
var url=articles[x][1];
notifyBrowser(title,desc,url);
}, 200000);    

document.addEventListener('DOMContentLoaded', function () 
{

if (Notification.permission !== "granted")
{
Notification.requestPermission();
}

document.querySelector("#notificationButton").addEventListener("click", function(e)
{
var x = Math.floor((Math.random() * 10) + 1);
var title=articles[x][0];
var desc='Most popular article.';
var url=articles[x][1];
notifyBrowser(title,desc,url);
e.preventDefault();
});

//===================================
setInterval(function(e){ 
var x = Math.floor((Math.random() * 10) + 1);
var title=articles[x][0];
var desc='Most popular article.';
var url=articles[x][1];
notifyBrowser(title,desc,url);
e.preventDefault();

}, 5000);
//===================================
});

function notifyBrowser(title,desc,url) 
{
if (!Notification) {
console.log('Desktop notifications not available in your browser..'); 
return;
}
if (Notification.permission !== "granted")
{
Notification.requestPermission();
}
else {
var notification = new Notification(title, {
icon:'http://i2.wp.com/www.findyoursolution.in/wp-content/uploads/2016/06/cropped-Logo-512.jpg?fit=180%2C180',
body: desc,
});

// Remove the notification from Notification Center when clicked.
notification.onclick = function () {
window.open(url);      
};

// Callback function when the notification is closed.
notification.onclose = function () {
console.log('Notification closed');
};    
}
}

</script>    

<style type="text/css">
.hover{background-color: #cc0000}
 #container{ margin:0px auto; width: 800px} 
.button {
 font-weight: bold;
    padding: 7px 9px;
    background-color: #5fcf80;
    color: #fff !important;
    font-size: 12px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    cursor: pointer;
    text-decoration: none;
    text-shadow: 0 1px 0px rgba(0,0,0,0.15);
    border-width: 1px 1px 3px !important;
    border-style: solid;
    border-color: #3ac162;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: middle;
    zoom: 1;
    border-radius: 3px;
    box-sizing: border-box;
    box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;
}
.authorBlock{border-top:1px solid #cc0000;}
</style>
</head>
<body>
<div id="container">
<h1>Display browser Notification from Web Application Demo</h1>  

<h4>Click notification button</h4>
<a href="#"  id="notificationButton" class="button">Notification</a>
</div>   

</body>
</html>

Could you please explain more? Do you want to notify user when he is going to close tab (Or clocked the close tab button)? — Mohammad Kermani, Aug 23 '16 at 05:38
Yes If I am Close Browser then need to come Notification But in Above Code Not Coming Notification When Browse Close — Jitesh, Aug 23 '16 at 05:40
Onbeforeunload Is The Event You'Re Looking For - Maybe - Hard To Say Because I Don'T Know What Your Code Has To Do With Your Question — Jaromanda X, Aug 23 '16 at 05:44
try this one http://stackoverflow.com/questions/33687298/how-to-send-push-notification-to-web-browser — Karthi, Aug 23 '16 at 05:58
I have reworded your question to make it a bit more readable. If you have any more clarification, the please feel free to [edit] your question to improve it further. — Vince Bowdren, Aug 25 '16 at 10:35
hey @Jitesh have you got solution for that? i also looking for same. — vikash, Aug 23 '17 at 06:33

Mohammad Kermani · Answer 1 · 2016-08-23T06:27:56.220

0

If I understood you correctly, you can listen to onbeforeunload or onunload to detect when the user is closing the tab or clicked on go back button.

Here is a simple example

There are some ways to do it, you can set the onbeforeunload as an HTML attribute, like:

<body onbeforeunload="return showAlert()">

Note: showAlert() is a function that will return string, and the string will be the message just in some browsers (I saw, just Microsoft Edge is not supporting the custom message)

Or you can do it by addEventListener. But you can't have your own message on Firefox or Chrome (Edge will show your message that your function will return, it should be a string)

For

edited Aug 23 '16 at 06:27

answered Aug 23 '16 at 05:45

Mohammad Kermani

5,188
7
37
61

I am not getting Notification When Browser is closed. How can I Get Notification When Browser or tab is Close. You can Run My Code And Check – Jitesh Aug 23 '16 at 05:48
@KarthiVenture Right, but He said: **How to get Web Notification when I have close Browser or Close Tab**, and the only way you have access to *browser close event* is using `onbeforeunload` or `onunload`. – Mohammad Kermani Aug 23 '16 at 05:52
yea right but notification differ from alert right? `onbeforeunload` just say STAY or LEAVE . @Kermani – Karthi Aug 23 '16 at 05:56
@KarthiVenture, Yes, web notifications are different, but the only way to access user browser "close" event is onbeforeunload or onunload – Mohammad Kermani Aug 23 '16 at 06:00
1

@KarthiVenture Here there is a very good article from David Walsh about **Web Notifications API** https://davidwalsh.name/demo/notifications-api.php – Mohammad Kermani Aug 23 '16 at 06:11

How to get Web Notification when browser or tab is closed

1 Answers1