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 :)
Related
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.
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!
Hi i want to send desktop notifications to guest which is visited my web site.
So i need to use Chrome apis for this. Because only chrome browser has the desktop notification.
Here is my Codes to send notification. I checked out this Chrome Desktop Notification Example
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!");
}
});
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="check.js"></script>
</head>
<body>
<input type="button" onclick="notifyMe()" value="Send Notification"></input>
</body>
</html>
When i clicked the button a notification appears just for me. But i want to make an admin panel and when i clicked the button that notification should be appear for all users who visited my web site and allow for notification.
For example in the May 21 i need to send notification like "Today is May 21 you can get cheap stuffs !" This message must be appear for all users who allowed for notifications. Thank you.
EDIT : The following code will send the notification only if the browser is open. If you want to send notifications on a closed web app check this tutorial that presents the push API and how to implement it :https://developers.google.com/web/updates/2015/03/push-notifications-on-the-open-web
This is my suggestion : you can use socket.io in your web application. Socket.io enables real-time bidirectional event-based communication between your server and all the users of your website.
In order to make it work you should have a server that runs with nodejs. Every time an user will load your page a socket connection will be created between him and your server.
You will be able to emit events on those sockets, that you will catch in the javascript code that you will provide on your page. For your case you can broadcast an event "send_notification" to all your users when you want. In your front js script send the notification when you receive this event from the server.
The cool part with socket.io is that you can broadcast an avent and attach to it data. In your case it could be your notification message.
Example Code :
app.js (server part)
var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);
server.listen(8080);
app.get('/', function (req, res) {
res.sendfile('index.html');
});
io.on('connection', function (socket) {
io.sockets.emit('notification', { message: 'Hello the world' });
socket.on('my other event', function (data) {
console.log(data);
});
});
index.html. (the front Part)
<html>
<head>
</head>
<body>
<h1>HELLO</h1>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script>
function notifyMe(message) {
// Let's check if the browser supports notifications
if (!("Notification" in window)) {
alert("This browser does not support notifications");
}
// 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(message);
}
// Otherwise, we need to ask the user for permission
else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (permission) {
// We store the authorization information
if(!('permission' in Notification)) {
Notification.permission = permission;
}
// If the user accepts, let's create a notification
if (permission === "granted") {
var notification = new Notification(message);
}
});
}
}
// Connect to the server
var socket = io.connect('https://socket-io-notif-maximilienandile.c9users.io:8080');
// WHEN we receive the notification event execute the notifyMe function
socket.on('notification', function (data) {
notifyMe(data.message);
});
</script>
</body>
</html>
In order to implement it take a look at this official socket.io tutorial link :
http://socket.io/docs/#using-with-the-express-framework
In your app.js you should then decide when to broadcast the event. Here the event is broadcasted each time an user load the index.html page of your app.
Here is the example i made with cloud9. Here the notification is fired after the connection. https://ide.c9.io/maximilienandile/socket_io_notif
You can view the live application here :
https://socket-io-notif-maximilienandile.c9users.io/
I hope it will help you !
I am working on a web app.
I am using chrome notifications that are switched on once chrome asks for permissions.
Once Notification.permission is granted, The button switches to on.
What I want to do is switch off this button, and - as a result of this - also switch the dektop notifications or at least re-prompt the notification alert.
Here is my code
$scope.desktopNotificationSettings=function(){
// If browser doesnt support notifications
if (!("Notification" in window)) {
alert("This browser does not support desktop notification");
}
// This is entered if permission is already there and button is triggered :: That means user wants to switch of desktop notifications
else if (Notification.permission === "granted") {
console.log("Entered granted");
Notification.requestPermission(function (permission){
if (('permission' in Notification)) {
console.log(permission);
Notification.permission = denied;
}
});
this.allowDesktopNotification = false;
return;
}
// This triggers a chrome alert to block or allow notifications
else if (Notification.permission !== 'denied') {
console.log("Entered denied");
Notification.requestPermission(function (permission){
if (!('permission' in Notification)) {
Notification.permission = permission;
}
});
}
}
Now if the permission is denied then request permission works fine for the first time.
If I click on the button it doesn't trigger the permission alert in chrome.
Kindly help. Thanks