I have deployed my javascript desktop notification code on the web server but it is not working. It's working on my localhost properly. Can somebody help me out?
JavaScript Snippet
function showNotifaication() {
if (!("Notification" in window)) {
alert("Desktop notifications is not supported by this browser. Try another.");
return;
} else if (Notification.permission === "granted") {
var myNotification = new Notification("Twitter", {
icon: "https://pbs.twimg.com/profile_images/875087697177567232/Qfy0kRIP_400x400.jpg",
body: "Follow me on Twitter."
});
myNotification.onclick = function () {
window.open("https://twitter.com/google");
};
} else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (userPermission) {
if (userPermission === "granted") {
var myNotification = new Notification("Google", {
icon: "https://pbs.twimg.com/profile_images/839721704163155970/LI_TRk1z_400x400.jpg",
body: "Search on the Web."
});
myNotification.onclick = function () {
window.open("http://www.google.com");
};
}
});
}
}
and the button code
<button onclick="showNotifaication();">Show Notification</button>
All the above code works fine for the local machine whenever I have deployed it on the Apache server it will not work. One thing that I have noticed that my browser has already blocked the Notification and it is disabled also. No option for enables it.
From MDN, it looks like starting from Chrome 62, notificatin API is available in secure contexts only, i.e. only through localhost or a website running on HTTPS.
JavaScript desktop notification only works with HTTPS connection.
Related
Web push works fine from iframe in local but when i uploaded to cloud server then it does not work in only chrome or chromium browser.
I have developed a webpush micro-service that serve from a Iframe. That works fine in local but when i uploaded to cloud server then it does not work in only chrome or chromium browser. You can check from https:alemran.me (click ^ icon from bot).
Web Worker:
self.addEventListener('push', function (event) {
if (!(self.Notification && self.Notification.permission === 'granted')) {
return;
}
const sendNotification = (title, body ) => {
return self.registration.showNotification(title,
body
);
};
if (event.data) {
const message = JSON.parse(event.data.text());
event.waitUntil(sendNotification(message.title,message.message));
}
});
There is no error show in console
You can open a new window with a url and get permission from user....
Like :
let win = window.open("your url", "_blank");
let winInterval = window.setInterval(function() {
if (win.closed !== false) {
window.clearInterval(winInterval );
//check your api for user subscription status
}
}, 200);
I'm trying to add Desktop Notifications to my site using the W3C Notifications API, documented at MDN. For an initial test and playing around, I have been using this fiddle I got from this question on Stackoverflow. All works out fine, except when the notification shows up and I click on it while using Firefox, the landing URL opens in a new tab and immediately Firefox switches to the page from which the notification was triggered.
This weird behavior was not seen on Chrome. It works just fine there. What is causing this behavior? Am I doing something wrong?
Here's the code from that fiddle:
<button onclick="notifyMe()">Notify me!</button>
<script>
// request permission on page load
document.addEventListener('DOMContentLoaded', function () {
if (Notification.permission !== "granted")
Notification.requestPermission();
});
function notifyMe() {
if (!Notification) {
alert('Desktop notifications not available in your browser. Try Chromium.');
return;
}
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>
Replace:
window.open("http://stackoverflow.com/a/13328397/1269037");
with:
var myWindow = window.open("http://stackoverflow.com/a/13328397/1269037");
myWindow.focus();
I'm writing a chat webapp that needs to be able to trigger desktop push notifications through the notifications API: https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API
Unfortunately, it seems that the notifications don't show up until I flush it all out by making another notification with this fiddle: https://jsfiddle.net/yoshi6jp/Umc9A/
This is the code that I am using:
function triggerDesktopNotification() {
function makeNotification() {
var notification = new Notification('AppName', {
body: 'You have a new message!',
icon: '/favicon.ico',
});
notification.onclick = () => {
notification.close();
};
}
if (Notification.permission === 'granted') {
makeNotification();
}
else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (permission) {
if (permission === 'granted') {
makeNotification();
}
});
}
}
I can confirm that the code is executing properly by placing console.log() immediately after the new Notification call. Interestingly, if I put an alert() there instead, the notification shows up when I see the alert box (after navigating back into my tab).
If I understood you right ;
Alert interrupts program stack where it placed i think.Why dont you try to fire it async with setTimeout function like that ?
setTimeout( function(){
alert("asd");
})
edited js fiddle here
hello all i am using this code for browser/desktop PushUP Notification
document.addEventListener('DOMContentLoaded', function () {
if (Notification.permission !== "granted")
Notification.requestPermission();
var notification = window.Notification || window.mozNotification || window.webkitNotification;
notification.requestPermission(function(permission){});
});function notifyMe(titleisthi,contentbody,linktoopen) {
if (!Notification) {
alert('Desktop notifications not available in your browser. Try Chromium.');
return;
} if (Notification.permission !== "granted")
Notification.requestPermission();
else {
var notification = new Notification(titleisthi, {
icon: 'avator/small-icon.png',
body: contentbody,
});
notification.onclick = function () {
window.open(linktoopen);
};}}
The Problem is that this code sometimes sends many notifications or its too frequent can there be something which dosent sends more than 2 notification within 30 minutes. and also users dont need to allow the browser to receive the notification or not.
any help is appreciated.
i know sending notifications too frequently depends on my code or calling the function but i was wondering if there is something which can prevent them globally.
Is there any fix yet for chrome version 35 desktop notification pop up ?
I have tried this also but no success.
Here is my code of html file
<html>
<head>
<title>Simple Notification example</title>
</head>
<button onclick="notifyMe()">Notify me!</button>
<script type="text/javascript">
function notifyMe() {
if (!("Notification" in window)) {
alert("This browser does not support desktop notification");
}
else if (Notification.permission === "granted") {
var notification = new Notification("Hi there!");
}
else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (permission) {
if(!('permission' in Notification)) {
Notification.permission = permission;
}
if (permission === "granted") {
var notification = new Notification("Hi there!");
}
});
}
}
</script>
</html>
This code is asking to "allow" or "deny" notification pop up. But not working after it.
Anyone else experiencing this problem or any fix of this?
You forgot to show the notification.
var notification = new Notification("Hi there!");
notification.show();
I have tested the code an works fine.
Optionally you can register the onclick event to dismiss notification:
notification.onclick = function () {
notification.close();
}
Please check allow or block status in browser. copy the following url and paste into your chrome browser.
chrome://settings/contentExceptions#notifications