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();
Related
Add to Home Screen feature of google is not working after setting any value in window.location.
What has been done so far?
Refer : web-fundamentals-app-install-banners
During this implementation I am capturing the 'beforeInstallPromptEvent' of window and using it later whenever required.
PFB the Code Snippet for the same:
window.addEventListener('beforeinstallprompt', (e) => {
deferredPrompt = e;
// Update UI notify the user they can add to home screen
showInstallPromotion();
});
btnAdd.addEventListener('click', (e) => {
// hide our user interface that shows our A2HS button
btnAdd.style.display = 'none';
// Show the prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
deferredPrompt.userChoice
.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
deferredPrompt = null;
});
});
This above code works perfectly in normal journey but it stopworking as soon as I include something in window.location to go to some app which in install in the device,
When the below code for Truecaller functionality is added in tandem with Add to Home Screen, it stops working:
window.location='xxxxxsdk://some-url/';
I have also tried with other options to redirect to app like location.assign() but still same issue.
Hi) try to put it after the app is installed:
window.addEventListener('appinstalled', function() {
// window.location = ...
});
Here is the doc: https://developer.mozilla.org/en-US/docs/Web/API/Window/appinstalled_event
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.
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