ブラウザ通知の使い方

Question

ブラウザ通知を追加するのが初めてです。ブラウザ通知の使い方は？私はどこから始めるべきか分からなかった。誰でも私にこれを始める方法についての提案を提供することはできますか？あなたのサイトやアプリケーションがHTTPSを介して提供されなければならない仕事をする、ブラウザの通知のために

Answer 1

それ以外のブラウザでは、文句を言わない私は自分のアプリケーションのためにこれを使用することが

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 :['); 

      } 
     }); 
     } 

、あなたが重複したコードを削除し、それをリファクタリングすることができますことができます。参照

コード

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 2

チェックNotification API情報https://developer.mozilla.org/id/docs/Web/API/notification

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(); 

カ月の通知を表示するための許可を要求するための