Push notification js

How to make notifications for a computer browser and for a smartphone. A working example of a script for sending notifications to a browser.

Push notification js
Push notification

Often the question arises of how to make the browser send notifications when working with your site. I myself faced this issue, so below I want to attach a JS code that shows how it works. I hope it will be useful for you.

To work, we need a JS plugin (library) from this link.

JS files that we need to work are here.

This is what our script will look like.

  • timeout - This item is unnecessary for me, I want the message to be closed manually.
function start(){
	Push.create("Hello world!", {
    body: "How's it hangin'?",
    icon: '/avatar.png',
	//timeout: 10000,
	requireInteraction: true,
	vibrate: [200, 100],
    onClick: function () {
        window.focus();
        this.close();
    }
});
}

Full page with the code for sending push notifications to the browser.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Push nof</title>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	<script src="push.min.js"></script>
	<script src="serviceWorker.min.js"></script>
	   
</head>
<body>
<h1> PUSH NOTIFICATION</h1>
<a href="javascript:void(0)" onclick="start()">Active</a>
</body>
</html>

<script>
function start(){
	Push.create("Hello world!", {
    body: "How's it hangin'?",
    icon: '/avatar.png',
	//timeout: 10000,
	requireInteraction: true,
	vibrate: [200, 100],
    onClick: function () {
        window.focus();
        //this.close();
    }
});
}
</script>

You can download all files from the link below.



on the site are taken from open sources. The site does not contain files for download. All links to files from open sources. Owners of copyrights to the material may request removal of the post from the site.


Buy me a coffee ----- Download -----