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 !
Related
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 :)
I want to alert users of my website for new content from the forums, private messages, etc on my website using the chromium desktop notifications but I am not sure how to do it the right way. Is there like a library or jquery plugin that I can use because I was thinking about using ajax that refreshes a php script every 30 or something seconds. Also, another thing - can I send notifications to users that don't have my website opened or do I have to have a browser extension for this part?
So far I have found this script on another thread for sending notifications and asking for permission.
<script type="text/javascript">
// request permission on page load
document.addEventListener('DOMContentLoaded', function () {
if (!Notification) {
alert('Desktop notifications not available in your browser. Try Chromium.');
return;
}
if (Notification.permission !== "granted")
Notification.requestPermission();
});
function notifyMe() {
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>
<button onclick="notifyMe()">Notify me!</button>
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 an extension where I authenticate the user when they enable to app. The server then returns a channel token, which I use to establish a channel. The code for the authentication occurs in script.js, where-as the channel creation is in background.html. My question is how would I get the channelToken into background.html, when the authentication runs after background.html is loaded?
I want to note that I am running Google App Engine (Python) as my server. I have also copied the javascript code from here and placed it in my manifest as oppose to putting <script type="text/javascript" src="/_ah/channel/jsapi"></script> in background.html.
//background.html
var channel = new goog.appengine.Channel(channelToken);
var socket = channel.open()
socket.onopen = function() {
// Do stuff right after opening a channel
console.log('socket opened');
}
socket.onmessage = function(evt) {
// Do more cool stuff when a channel message comes in
console.log('message recieved');
console.log(evt);
}
You should use messagePassing to inform the background.html if a channelToken is received.
http://code.google.com/chrome/extensions/messaging.html