DEV Community


Posted on • Originally published at


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:

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">
    <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>
    <button id="btn">Test</button>
        document.getElementById('btn').onclick = notify
        function notify(){
            Notification.requestPermission().then(permission => {
                if (permission === "granted"){
                    new Notification("Test Notification", {
                        body: "More Text",
Enter fullscreen mode Exit fullscreen mode

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.


I hope you enjoyed this tutorial!

This post was posted first on my personal blog:

Oldest comments (10)

vulcanwm profile image

Nice! I’ll try this out later!

acode123 profile image

Thanks Medea, please tell me how it goes!

zeeshanali0704 profile image

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

acode123 profile image

Tell me how it goes!

kalifasenou profile image
Kalifa SENOU

Thanks you for sharing

acode123 profile image

You are welcome!

sarma_akondi_746f338b83b7 profile image
Sarma Akondi

Nice share

acode123 profile image

Thanks Sarma!

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

acode123 profile image

Well, that will complicate issues a lot more.

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!