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 !
