DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

acode123
acode123

Posted on • Originally published at freetechnologyhelp.com

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

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.

Adding file

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>
Enter fullscreen mode Exit fullscreen mode

Step 3 (Running the code)

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

Sidebar

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)

Collapse
 
collimarco profile image
Marco Colli

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-...

Collapse
 
acode123 profile image
acode123

Well, that will complicate issues a lot more.

Collapse
 
kalifasenou profile image
Kalifa SENOU

Thanks you for sharing

Collapse
 
acode123 profile image
acode123

You are welcome!

Collapse
 
zeeshanali0704 profile image
ZeeshanAli-0704

something different... good to knw such stuff.. will try this out for sure

Collapse
 
acode123 profile image
acode123

Tell me how it goes!

Collapse
 
sarma_akondi_746f338b83b7 profile image
Sarma Akondi

Nice share

Collapse
 
acode123 profile image
acode123

Thanks Sarma!

Collapse
 
vulcanwm profile image
Medea

Nice! I’ll try this out later!

Collapse
 
acode123 profile image
acode123

Thanks Medea, please tell me how it goes!

Create an Account!

πŸ‘€ Just want to lurk?

That's fine, you can still create an account and turn on features like 🌚 dark mode.