Push.js Tutorial – Javascript Desktop Notification
In this tutorial, we’ll talk about Push.js, a Javascript library that enable your website to push a notification to desktop very easily. Push.js is cross-browser support so it works on all modern browsers like Chrome, Firefox, Edge, IE (including the old IE9)
Setup
If you’re using npm just use install command below.
npm install push.js
But for this tutorial, we’ll do manually. Just download the latest release from github. Then copy over push.js and serviceWorker.js in bin folder to your web directory and include push.js to your webpage using script tag.
Create a Desktop Notification
To create a notification, just use a static method Push.create and pass the title text you want and that’s it.
Push.create("Hello world!");
On the first time, user will be asked to allow push.js to send the notification like this.
Additionally, you can manually check the permission using has() method (return boolean)
Push.Permission.has()
And here is the result of our very first notification
Playing with Options
You can customize the notification further by specifying options when creating it. Below is the example code from project page.
Push.create("Hello world!",{
body: "This is example of Push.js Tutorial",
icon: '/Logo_small.png',
timeout: 2000,
onClick: function () {
window.focus();
this.close();
}
});
You can add more detail text to your notification in “body” and also add image icon with “icon”. Please note that the notification style depend on the browsers and it’s not something we can change. You can define how long (in millisecond) the notification should stay before it disappear with “timeout”
The onClick event handler will trigger when the user click the notification. In this case, it will focus the browser window and close the current notification.
There are more options available for you to try out. Just checkout the document on Push.js project page. Now let’s test our new code.
If you want to clear all notification at once before the timeout, user clear()
Push.clear();
See all of them in action in video below:
So that’s all for this tutorial. Hope you enjoy and feel free to like or subscribe to our Facebook and Youtube Channel to stay tune!
Full source Code
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="jquery-2.1.4.js"></script>
<script src="push.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="navbar"><span>Push.js Tutorial</span></div>
<div id="wrapper">
<button id="notify-button">Notify Me!!</button>
<button id="clear-button">Clear All!</button>
<button id="check-button">Check Permission</button>
</div>
<script>
$("#notify-button").click(function(){
Push.create("Hello world!",{
body: "This is example of Push.js Tutorial",
icon: '/Logo_small.png',
timeout: 2000,
onClick: function () {
window.focus();
this.close();
}
});
});
$("#clear-button").click(function(){
Push.clear();
});
$("#check-button").click(function(){
console.log(Push.Permission.has());
});
</script>
</body>
</html>
Push.js Tutorial
Notify Me!!
Clear All!
Check Permission
$(“#notify-button”).click(function(){
Push.create(“Hello world!”,{
body: “This is example of Push.js Tutorial”,
icon: ‘/Logo_small.png’,
timeout: 2000,
onClick: function () {
window.focus();
this.close();
}
});
});
$(“#clear-button”).click(function(){
Push.clear();
});
$(“#check-button”).click(function(){
console.log(Push.Permission.has());
});
n aw,mfna,mnf a,msnf ,amwenf
Hi man,
I want send notification by curl.
From cmd, I run this command: curl http://localhost
And it still show notification.
May be I do that ?
AZsxdcv b
Why its not sporting HTML tag like
Push.create(“Hello world!”,{
body: “This is example of Push.js Tutorial“,
icon: ‘/Logo_small.png’,
timeout: 2000,
onClick: function () {
window.focus();
this.close();
}
});
output is same “This is example of Push.js Tutorial“;
can you have solution of this code
Why its not sporting HTML tag like
Push.create(“Hello world!”,{
body: “<a href=”https://mydomain.com” >This is example of Push.js Tutorial<a>“,
icon: ‘/Logo_small.png’,
timeout: 2000,
onClick: function () {
window.focus();
this.close();
}
});
output is same “<a href=”https://mydomain.com” >This is example of Push.js Tutorial<a>“;
can you have solution of this code
I was referred your blog. It looks good to understand the usage of the push.js.
I need some query on usage this api in my nodejs server code.
My task:
I need to show the notification on starting my server code.
For example, I like to show notification on starting the below Hello-world server.
var http = require(‘http’);
//create a server object:
http.createServer(function (req, res) {
res.write(‘Hello World!’); //write a response to the client
res.end(); //end the response
}).listen(8080); //the server object listens on port 8080
Could you please resolve my query, because i am new to the JS.
Hi,
how to integrate push.js in react