How to add a callback to a function in the moment when it is triggered?

Question

I would like to add a callback to this function: Notification.requestPermission(). The problem is I don't know when exactly it (that function) will be triggered, hence I think I have to bind the browser notification permission box on click or something like that, to achieve that everytime user clicks on "ALLOW", "BLOCK" or "X"(close) the javascript file finds out what button was clicked on and does something like this:

if (result === 'denied')
{
    console.log('Permission wasn\'t granted. Allow a retry.');
    return;
}
if (result === 'default')
{
    console.log('The permission request was dismissed.');
    return;
}
if (result === 'accepted')
{
    console.log('The permission request was accepted.');
    return;
}

My problem is I don't know how it can be binded to that browser notification permission box like the one below ↓

I do not want to call the permission prompt i.e. Notification.requestPermission() function. I just want to detect when Permission was changed and do something with that result.

Answer 1

You generally request for permission on page load. With jquery you can do something like

jQuery(document).ready(function() {
if (!("Notification" in window)) {
    console.log("This browser does not support desktop notification");
} else if (Notification.permission !== 'denied') {
    Notification.requestPermission(function(permission) {
        if (!('permission' in Notification)) {
            Notification.permission = permission;
        }
    });
}
});

Answer 2

soo, i'm not entirely sure, if i understand you right, but i don't think you need to bind your stuff to the notification permission box.

According to MDN there are two ways to do this: either use promises:

Notification.requestPermission().then(function(permission) { ... });

or the callback

Notification.requestPermission(callback);

I think it's more obvious for the promise how to get the value of the permission, but if you'd use a "normal" callback you could wrap your code into a function and check for the permission parameter:

function doStuff(result){
  if (result === 'denied')
   {
     console.log('Permission wasn\'t granted. Allow a retry.');
     return;
    }
  if (result === 'default')
 {
    console.log('The permission request was dismissed.');
    return;
  }
 if (result === 'accepted')
{
   console.log('The permission request was accepted.');
   return;
 }
}

and then call:

Notification.requestPermission(doStuff(permission));

then maybe save the result in a global var ( i don't know what you want to do with it, so yeah)

Answer 3

I was searching for the same thing and I found this answer here: How to listen for web notification permission change

I think this is what you are looking for. It is working for me.