HTML5 Notifications Usage

Question

I have an angular real-time messaging application and I wanted to use HTML5 notifications. I tried the following inside my controller:

$rootScope.$on("message_recieved", function(event, data) {
  new Notification(data.sender_name, {
    body: data.body, icon: data.avatar, dir:'auto'
  });
}

and

$rootScope.$on("server_offline", function(event, data) {
  new Notification("Offline", {
    body: "You are offline. Refresh your page now.", dir:'auto'
  });
}

The notifications are not showing. Am I doing anything wrong here?

Answer 1

Chances are you are not permitted to display Notifications. You can request permission:

$rootScope.$on( 'message_received', function(event, data){
     Notification.requestPermission(function (permission){
          if (permission === "granted"){
               new Notification(data.sender_name, {
                    body: data.body, icon: data.avatar, dir:'auto'
               })
          }
      })
 })

src - https://developer.mozilla.org/en-US/docs/Web/API/notification