如何使用浏览器通知

Question

我是新增浏览器通知。如何使用浏览器通知？我无法弄清楚从哪里开始。任何人都可以提供关于如何开始这个建议。

Answer 1

对于浏览器通知工作您的网站或应用程序应通过https否则浏览器不会允许它

mesg = { 
    title: "notification title", 
    body: "notification body", 
    icon: "location to an .ico image", 
    timer: true //for auto closing 
} 

// Let's check if the browser supports notifications 
    if (!('Notification' in window)) { 

     console.log('Browser does not support this feature.'); 

    }else if (Notification.permission === 'granted') { 

     Notification.requireInteraction = false; 

     if (mesg.title !== 'undefined') { 

     const notification = new Notification(mesg.title, { 
      body: mesg.body, 
      icon: mesg.icon 
     }); 

     if (mesg.timer) { 

      setTimeout(function() { 
      notification.close(); 
      }, 5000); 
     } 

     return notification; 

     }// close if undefined 

    } else if (Notification.permission !== 'denied') { 

     alert('Please click Allow for enabling browser notifications'); 

     Notification.requestPermission(function (permission) { 
     // If the user accepts, let's create a notification 
     if (permission === 'granted') { 

      if (mesg.title !== 'undefined') { 

       const notification = new Notification(mesg.title, { 
       body: mesg.body, 
       icon: mesg.icon 
       }); 

       if (mesg.timer) { 
       setTimeout(function() { 
        notification.close(); 
       }, 5000); 
       } 

       return notification; 

      }// close if undefined 

      } else { 

      alert('Permission Denied :['); 

      } 
     }); 
     } 

我用这个我的应用程序，你可以重构它来除去重复的代码。

Answer 2

检查Notification API为引用

代码请求权限

document.addEventListener('DOMContentLoaded', function() { 
     if (!Notification) { 
      alert('Desktop notifications not available in your browser. Try Chromium.'); 
      return; 
     } 

     if (Notification.permission !== "granted") 
      Notification.requestPermission(); 
    }); 

和用于显示通知

 if (Notification.permission !== "granted") 
        Notification.requestPermission(); 
       else { 
        var notification = new Notification('Notification title', { 
         icon: 'Icon Link', 
         body: "Notification Body", 
        }); 

        notification.onclick = function() { 
         window.open("Href Here"); 
        }; 

       } 

Answer 3

例如

function notifyMe() { 
    // Let's check if the browser supports notifications 
    if (!("Notification" in window)) { 
    alert("This browser does not support desktop notification"); 
    } 

    // Let's check whether notification permissions have already been granted 
    else if (Notification.permission === "granted") { 
    // If it's okay let's create a notification 
    var notification = new Notification("Hi there!"); 
    } 

    // Otherwise, we need to ask the user for permission 
    else if (Notification.permission !== "denied") { 
    Notification.requestPermission(function (permission) { 
     // If the user accepts, let's create a notification 
     if (permission === "granted") { 
     var notification = new Notification("Hi there!"); 
     } 
    }); 
    } 

    // At last, if the user has denied notifications, and you 
    // want to be respectful there is no need to bother them any more. 
} 
notifyMe(); 

月re info https://developer.mozilla.org/id/docs/Web/API/notification