I've been attempting to incorporate a basic HTML5 desktop notification into my Meteor Web Application. Below is the code snippet I've tried:
if (!("Notification" in window)) {
alert("This browser does not support desktop notification");
}
// Checking if notification permissions have 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",
});
}
// Asking for permission if not granted or denied
else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (permission) {
if (permission === "granted") {
var notification = new Notification("Granted Permission for Notifications");
}
});
}
However, both the audio and image are not showing up. Regarding the audio files, I'm receiving this error message:
"Uncaught (in promise) DOMException: Failed to load because no supported source was found."
If I disable the audio section of the code, I encounter an error related to the image icon:
"Refused to load the image '' because it violates the following Content Security Policy directive: "img-src data: 'self' http://.googleapis.com https://.googleapis.com http://.gstatic.com https://.gstatic.com http://.bootstrapcdn.com https://.bootstrapcdn.com"."
Is there an alternative method to implement desktop notifications in a Meteor App? Additionally, can notifications be positioned at the center of the page?