Meteor Web Appliation에 아이콘 및 오디오가있는 바탕 화면 알림 추가

Meteor Web Application에 간단한 HTML5 데스크탑 알림을 추가하려고했습니다. 코드는 다음과 같습니다.Meteor Web Appliation에 아이콘 및 오디오가있는 바탕 화면 알림 추가

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") { 
      var date = new Date(); 
      var audio = new Audio(); 
      audio.src = "../../../universal/bells.wav"; 
      audio.load(); 
      audio.play(); 
      var notification = new Notification("Allow Notifications!", { 
           dir: "auto", 
           lang: "hi", 
           tag: "testTag"+date.getTime(), 
           icon: "../../../assets/notification.png", 
           }); 
      } 

     // Otherwise, we need to ask the user for permission 
     else if (Notification.permission !== 'denied') { 
      Notification.requestPermission(function (permission) { 
      if (permission === "granted") { 
      var notification = new Notification("Granted Permission for Notifications"); 
      } 
     }); 
     }

그러나 오디오와 이미지가 모두 표시되지 않습니다. 오디오 파일에 대해 얻는 오류 메시지입니다.

"잡히지 않습니다 (약속 있음) DOMException : 지원되는 소스가 없기 때문에로드하지 못했습니다." IMG-SRC : 나는 코드의 오디오 부분을 주석 처리하면 이미지 아이콘이 오류를 던지고있다

"은 다음과 같은 내용 보안 정책 지침을 위반 이미지 'http://placekitten.com.s3.amazonaws.com/homepage-samples/96/139.jpg를'로드 거부" 데이터 : '자체'http : // .googleapis.com https : // .googleapis.com http : // .gstatic.com https : // .gstatic.com http : // .bootstrapcdn.com https : // .bootstrapcdn.com "."

이미지가 표시되지 않습니다.

유성 앱에 데스크톱 알림을 구현하는 다른 방법이 있습니까? 또한 알림을 페이지 중앙에 올리는 방법이 있습니까? 밤새 이것을 위해 고심하고 있습니다. 감사합니다!

출처

2016-11-25 user3082806