In this article, I will share with you how to send web push notifications using push.js with a simple example. you all know what is web push notification? and what needed push notification in our web application.
Right now you can see many web applications use the web base push notification in web applications for some more user engagement. so, in this article, i will share how to send web-based push notifications to your web application in a very simple way. here I'm using PushJs to send push web notifications.
I also uploaded one simple demo of web push notification on GitHub so, you can also download it from here Download Demo
Preview :
Example :
<!DOCTYPE html>
<html>
<head>
<title>Web push notification using push.js - LaravelCode</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="push.js"></script>
<script src="serverWorker.js"></script>
</head>
<body>
<div class="container text-center">
<h1>Web push notification using push.js - LaravelCode</h1>
<div>
<button class="btn btn-info" id="sendPushNotification">Send Push Notification.</button>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#sendPushNotification').on('click', function(){
Push.create("Hello world!", {
body: "This is my first notification :)",
icon: '/notification.png',
timeout: 40000,
onClick: function () {
window.focus();
this.close();
}
});
});
});
</script>
</body>
</html>
i hope it will be help in your web development.
