I have been trying to add a simple HTML5 desktop notification to my Meteor Web Application. Here is the code,
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");
}
});
}
But both the audio and the image is not getting displayed.
This is the error message I get for audio files,
"Uncaught (in promise) DOMException: Failed to load because no supported source was found."
If I comment out the audio part of the code, the image icon is throwing an error,
"Refused to load the image 'http://placekitten.com.s3.amazonaws.com/homepage-samples/96/139.jpg' 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"."
and no image is displayed.
Is there any other way to implement desktop notifications in a Meteor App?
Also, is there a way to make the notification come in the center of the page?
Found the solution! All the media has to be in the public folder in meteor to be accessed!
Related
I'm trying to implement a webview of my desktop notification. In desktop application I had already implemented the use of desktop notification using the following Javascript code
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.
}
When I opened the view in the android application an alert shown that this device does not support desktop notification. However, using the mobile browser (Chrome) this code let me allow to request notification but fails to give me the same notification in the desktop interface. Thank you so much :)
I use Notification desktop and I need to turn the sound off.
in Google Chrome and Firefox the sound is off but in Opera is on.
Test Notification
In the GUID is saying:
At the time of writing no browser has support for this option.
But why the sound is working in opera?
My code in JavaScript:
function notifyBrowser(title, desc, url) {
if (!Notification) {
console.log('Desktop notifications not available in your browser..');
return;
}
if (Notification.permission !== "granted") {
Notification.requestPermission();
} else {
var notification = new Notification(title, {
icon: "/img.png",
body: desc,
tag: 'Notification Desktop',
});
// Remove the notification from Notification Center when clicked.
notification.onclick = function() {
window.open("https://www.website.com");
};
// Callback function when the notification is closed.
notification.onclose = function() {
console.log('Notification closed');
};
}
}
I'm adding sound option like this but nothing changed
var notification = new Notification(title, {
icon: "/img.png",
body: desc,
tag: 'Notification Desktop',
sound: "",
// or sound : null,
});
The option sound isn't listed in specification. It imho only existed in the draft of the standard.
Some browser have still support of the sound option, but you must not use or relay on it anymore.
You have to use silent and vibrate to define if the system specific sound has to be played or not.
But the silent option still does not work everywhere.
I want to alert users of my website for new content from the forums, private messages, etc on my website using the chromium desktop notifications but I am not sure how to do it the right way. Is there like a library or jquery plugin that I can use because I was thinking about using ajax that refreshes a php script every 30 or something seconds. Also, another thing - can I send notifications to users that don't have my website opened or do I have to have a browser extension for this part?
So far I have found this script on another thread for sending notifications and asking for permission.
<script type="text/javascript">
// request permission on page load
document.addEventListener('DOMContentLoaded', function () {
if (!Notification) {
alert('Desktop notifications not available in your browser. Try Chromium.');
return;
}
if (Notification.permission !== "granted")
Notification.requestPermission();
});
function notifyMe() {
if (Notification.permission !== "granted")
Notification.requestPermission();
else {
var notification = new Notification('Notification title', {
icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
body: "Hey there! You've been notified!",
});
notification.onclick = function () {
window.open("http://stackoverflow.com/a/13328397/1269037");
};
}
}
</script>
<button onclick="notifyMe()">Notify me!</button>
I need to be able to show notification popups in the bottom right hand corner of the desktop, not the bottom right hand corner of the browser window like something like toastr can, needs to be the desktop bottom right hand corner. I have seen it done I think but can't recall where.
Anybody got any ideas?
I'm guessing javascript/jquery?
You're looking for notification() which can do that given the user gives the website permission to use it.
https://developer.mozilla.org/en-US/docs/Web/API/notification
from linked DOCS:
<button onclick="notifyMe()">Notify me!</button>
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.
}
I have gone through so many web pages but unable to find proper answer, can you help me with it. I want to know how one can create web push notification(not for android app, but for website only)??
You can simply add this line of code:
var myNotification = new Notification(title, options);
I give you a better example, you have to ask to the user if you can add notifications:
function notifyMe() {
// Let's check if the browser supports notifications
if (!("Notification" in window)) {
console.log("This browser does not support desktop notification");
}
// Let's check whether notification permissions have alredy 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.permission === "default") {
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.
}
You may consult the MDN's documentation and the MDN's specification.