HTML5 Web Notification Permission Issue

Question

I'm trying to implement HTML5 Notification API in my chat application. When I'm working on my localhost, everything works fine (The browser prompts me whether i need to allow notification from this site or not).

But when i try to access my application running in my local machine from some other machine which all connected in the same network. The browser is not prompting anything.

To Sum up my problem:

http://localhost:3000/home - This works!

http://10.1.0.126:3000/home - This doesn't works this way. (Even if try my from my computer or from other computer)

This is the code I'm using for notification api implementation

function createNotification(response){
  if(!('Notification' in window)){
    console.log("This browser does not Notification")
  }else{
    if(Notification.permission === 'granted'){
         createNotification(response) // function to createNotification from response
    }else if(Notification.permission !== 'denied'){
     Notification.requestPermission((permission) => {
       if(permission === 'granted'){
         createNotification(response)
       }
     })
 }



function createNotification(response){
    // Construct the Notification
    let title = response.sender_name
    let notificationOptions = {
        body: response.message,
        icon: default_profile_pic
    }

    // Close the Notification after 3 seconds
    let notification = new Notification(title, notificationOptions) 
    setTimeout(notification.close.bind(notification),3000)
}

PS: I'm using ReactJS, Redux for my front-end development.

Answer 1

In Chrome 62 and newer you cannot request notification api at all unless the site is https:// secured. (see issue 779612) If you do have https on the site you should be able to use notifications and background push notifications.

https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API