HTML5 Web通知权限问题

时间:2018-06-19 13:04:45

标签: javascript html5 reactjs frontend html5-notifications

我正在尝试在聊天应用程序中实现HTML5 Notification 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进行前端开发。

1 个答案:

答案 0 :(得分:1)

  

在Chrome 62及更高版本中,除非该网站受到https://的保护,否则根本无法请求通知api。 (请参阅问题779612)如果站点上确实有https,则应该可以使用通知和后台推送通知。

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