I am trying to make a chatroom and have everything up and running, but am getting stuck when it comes to desktop notifications. Whenever I request permission for notifications and get the access set to 'granted', the permission will reset to 'default' not allowing notifications to be displayed. Is there a way to get the permission to stay set as 'granted' or would I have to get them to keep allowing notifications every time a new message is sent? Is it a protection involved with running it as a local file (on ChromeOS)? Here is the code for the part about notifications:
function showNotification() {
var title = "New Message!";
var messageValueNotif = document.querySelectorAll(".message");
if (messageValueNotif.length !== 0) {
messageValueNotif = messageValueNotif[messageValueNotif.length - 1].innerHTML;
} else {
return false;
}
var currentFavicon = document.querySelector('link').href;
var notif = new Notification(title, {
body: messageValueNotif,
icon: currentFavicon
});
notif.onclick = () => {
notif.close();
window.parent.focus();
}
}
function requestAndShowPermission() {
if (Notification.permission === 'granted') {
showNotification();
} else if (Notification.permission !== 'denied') {
Notification.requestPermission().then(function(permission) {
showNotification()
});
}
}
window.onload = requestAndShowPermission();
It is apparently a file protection with ChromeOS.
Related
My website currently sends push notifications to users when accessing the site for the first time, is there a way to remove this push notification request?
TIA
Use this in your .js file
Notification.requestPermission();
Create a button for "Enable Notification" in .html file
<button id="enable">Enable notifications</button>
When pressing this button app requests notification for the app (.js file)
function askNotificationPermission() {
// Asking for permissions
function handlePermission(permission) {
// button set for shown or hidden, depending on the user's selection
if(Notification.permission === 'denied' || Notification.permission === 'default') {
notificationBtn.style.display = 'block';
} else {
notificationBtn.style.display = 'none';
}
}
// Check if the browser actually supports notifications
if (!('Notification' in window)) {
console.log("This browser does not support notifications.");
} else {
if(checkNotificationPromise()) {
Notification.requestPermission()
.then((permission) => {
handlePermission(permission);
})
} else {
Notification.requestPermission(function(permission) {
handlePermission(permission);
});
}
}
}
what i wanted to do is only show the notification after the notification allowed.
what i have right now is, every after refresh on page it is always showing the notifications
this is my javascript
function notifyMe() {
function AutoRefresh( t ) {
setTimeout("location.reload(true);", t);
}
// 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('{!! $myname->body !!}');
notification.onclick = function(event) {
event.preventDefault(); // prevent the browser from focusing the Notification's tab
window.open('http://localhost:8000/spektra/spektra-memberikan-aneka-tawaran-di-jakarta-fair-kemayoran-2018', '_blank');
}
}
// Otherwise, we need to ask the user for permission
else if (Notification.permission !== "denied") {
Notification.requestPermission().then(function (permission) {
// If the user accepts, let's create a notification
if (permission === "granted") {
var notification = new Notification('{!! $myname->body !!}');
notification.onclick = function(event) {
event.preventDefault(); // prevent the browser from focusing the Notification's tab
window.open('http://localhost:8000/spektra/spektra-memberikan-aneka-tawaran-di-jakarta-fair-kemayoran-2018', '_blank');
}
}
});
}
}
what should i do to make the notification only once, even after refresh.
You have to track if the user has already seen the notification and, if so, skip the rest of your notifyMe function. For example, you could store the information in localStorage.
function notifyMe() {
function AutoRefresh(t) {
// passing strings to setTimeout makes me shiver
// too many years of avoiding eval and stuff i guess :)
setTimeout(function () { location.reload(true); }, t);
}
if (localStorage.getItem('userHasSeenNotification')) {
return; // early return, exits the function
}
if (!('Notification' in window)) {
alert('Notifications ... ');
return; // early return, lets us get rid of the "else"
}
// Let's check whether notification permissions have already been granted
if (Notification.permission === "granted") {
// save seen state
localStorage.setItem('userHasSeenNotification', 1);
// If it's okay let's create a notification
var notification = new Notification('{!! $myname->body !!}');
notification.onclick = function(event) {
event.preventDefault(); // prevent the browser from focusing the Notification's tab
window.open('http://localhost:8000/spektra/spektra-memberikan-aneka-tawaran-di-jakarta-fair-kemayoran-2018', '_blank');
};
return; // ... again ...
}
// Otherwise, we need to ask the user for permission
if (Notification.permission !== "denied") {
// save seen state
localStorage.setItem('userHasSeenNotification', 1);
Notification.requestPermission().then(function (permission) {
// If the user accepts, let's create a notification
if (permission === "granted") {
var notification = new Notification('{!! $myname->body !!}');
notification.onclick = function(event) {
event.preventDefault(); // prevent the browser from focusing the Notification's tab
window.open('http://localhost:8000/spektra/spektra-memberikan-aneka-tawaran-di-jakarta-fair-kemayoran-2018', '_blank');
};
}
});
}
}
}
Hint: You might want to move that last localStorage.setItem call into the callback passed to .then(function (permission) { ... }).
I want to send the desktop notification to my customer dynamical from the server side. For example I have one website based on the e-commerce platform. I want to send the desktop notification to my customer what are the new offers are available. I created the notification with following code.. But I want to call the notification without any user activity.
$(window).load(function(){
if(!window.Notification){
console.log('sorry Notification not supported');
}
else {
Notification.requestPermission(function(p){
if(p === 'denied') {
} else if(p === 'granted') {
} else {
}
console.log(p);
});
}
var notify;
if(Notification.permission === 'default') {
console.log('Please allow Notification');
} else {
notify = new Notification('Cashback Notification..',{
body : 'Get assured cashback on purchases made via Getex.com',
icon : 'images/notification_getex.png'
});
}
});
Here i trigger notification only for the window load, but i want to notify from the server side like execute or call any API link.
Please help me Thanks!
I have the following JS code used to send the desktop notification to the user, but it will only run when the page is open in the browser. Is it possible to show the desktop notification even when the page is not open, but has been previously opened (like Facebook is doing).
document.addEventListener('DOMContentLoaded', function () {
if (Notification.permission !== "granted")
Notification.requestPermission();
});
function displayDesktopNotification(note, datetime) {
if (!Notification) {
alert('Desktop notifications not available in your browser. Try Chromium.');
return;
}
if (Notification.permission !== "granted")
Notification.requestPermission();
else {
var notification = new Notification('', {
icon: '/Images/share.png',
body: note + ' ' + datetime,
});
notification.onclick = function () {
window.open("http://localhost/home?");
};
}
}
displayDesktopNotification("testing", "2017-07-06 09:56:00");
My application is powered by jQuery mobile and uses geolocation.
After my application attempts to get the user's location, the (Chrome) browser prompts the user:
Example.com wants to track your physical location [allow] [deny]
My goal is:
If the user clicks "Allow", function 1 is called (location is used
by app).
If the user clicks "Deny", function 2 is called (address form
appears).
How can I bind a function to the event that occurs (if any) when the user clicks the "Allow" or "Deny" button?
The getCurrentPosition function accepts two function arguments. Heck, the first is executed when you allow and the other when you deny!
Documentation
http://jsfiddle.net/pimvdb/QbRHg/
navigator.geolocation.getCurrentPosition(function(position) {
alert('allow');
}, function() {
alert('deny');
});
Link to Docs
function handlePermission() { navigator.permissions.query({name:'geolocation'}).then(function(result) {
if (result.state == 'granted') {
report(result.state);
geoBtn.style.display = 'none';
} else if (result.state == 'prompt') {
report(result.state);
geoBtn.style.display = 'none';
navigator.geolocation.getCurrentPosition(revealPosition,positionDenied,geoSettings);
} else if (result.state == 'denied') {
report(result.state);
geoBtn.style.display = 'inline';
}
result.onchange = function() {
report(result.state);}});}function report(state) {
console.log('Permission ' + state);}
I hope this works.