How to send Web Push Notification using push.js?

  773 views   2 weeks ago Javascript

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.

Author : Harsukh Makwana
Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on harsukh21@gmail.com

Related Articles