HTML5 Web 通知权限问题

Question

我正在尝试在我的聊天应用程序中实现 HTML5 通知 API。当我在本地主机上工作时，一切正常（浏览器提示我是否需要允许来自该站点的通知）。

但是当我尝试从所有连接在同一网络中的其他计算机访问我在本地计算机上运行的应用程序时。浏览器没有提示任何内容。

总结我的问题：

http://localhost:3000/home - 这行得通！

http://10.1.0.126:3000/home - 这行不通。 （即使从我的计算机或其他计算机尝试我的）

这是我用于通知 api 实现的代码

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)
}

P.S：我正在使用 ReactJS、Redux 进行前端开发。

Answer 1

在 Chrome 62 和更新版本中，除非站点是 https:// 安全的，否则您根本无法请求通知 api。 （参见问题 779612）如果您在网站上有 https，您应该能够使用通知和后台推送通知。

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