How to send notifications in JavaScript(in less than 10 lines of code)

#javascript #webdev #tutorial #codenewbie

Disclaimer: What the title means by 'in less than 10 lines of code' is referring to the number of lines of JavaScript code.

You know those annoying notifications popping up at the least wanted time? Today, I'll be teaching you how to make a desktop/mobile responsive push notification with less than 10 lines of Javascript.

Step 1 (Setting up)

Open up Visual studio code, if you have not installed it yet, you can install it below:
https://code.visualstudio.com/

After that, open a blank folder(file>open folder), and in that folder, add a file called index.html.

Step 2 (Coding)

Copy this code into your html file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Notification Test</title>
</head>
<body>
    <button id="btn">Test</button>
    <script>
        document.getElementById('btn').onclick = notify
        function notify(){
            Notification.requestPermission().then(permission => {
                if (permission === "granted"){
                    new Notification("Test Notification", {
                        body: "More Text",
                    })
                }
            })
        }
    </script>
</body>
</html>

Step 3 (Running the code)

Select the extension button from the sidebar, then search live server.

Select the first option and install it. Now open your index.html file, right click it, and select open with live server. Remember to enable notifications by clicking the lock button in your browser.

Conclusion

I hope you enjoyed this tutorial!

This post was posted first on my personal blog:
https://freetechnologyhelp.com/how-to-send-notifications-in-javascriptin-less-than-10-lines-of-code/

Top comments (10)

Marco Colli • Oct 14 '22

That is only to display a notification from a web page that is open.

If you need to display the notifications when the web app / website is closed you need a stack of technologies that is more complex (Push API, WebPush, Service Workers, etc.):

blog.pushpad.xyz/2022/03/web-push-...