I have the following test html with javascript, where the main interest is about notifications :
<head>
<title>Test Notifications</title>
</head>
<body>
<div >
<button style="margin: 0;position: absolute;top: 50%;left: 50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);"
onclick="askPermissionsAndSendNotification();" >Send Notification</button>
</div>
<script type="text/javascript" >
function askPermissionsAndSendNotification() {
if (!window.Notification) {
return false;
} else {
if (Notification.permission === 'default') {
Notification.requestPermission(function (p) {
if (p !== 'denied') {
sendNotification();
}
})
} else {
sendNotification();
}
}
}
function sendNotification() {
let title = "Test notification";
let message = "Test notification content";
let myNotification = new Notification(title, {
body: message
});
myNotification.addEventListener('click', function () {
window.open("https://stackoverflow.com/","_blank");
});
}
</script>
</body>
Is a simple notification , we send it by clicking on the button , and will open a new tab with an url . Everything works perfect until refresh.
If you have a notification not closed, if you refresh the page ,whatever will be code in your click event, the notification will open a new page with your website base url . I assume the listener is destroyed on page refresh, probably this is the default behaviour . Can something be done to have the original notification onclick action called after a page refresh if notification is created before the refresh ?