CODEWITHSUNDEEP
javascripthtmlwindowsnotifications
Nicholas Mott
Nicholas Mott

Reputation: 112

Create stacking windows desktop notifications from chrome website

I have a larger scale site that I would implement this on, but for simplicity I have a basic html web page that has 2 buttons that push down a notification to the windows desktop. These appear in the banner one at a time. If you click both buttons, only a single notification appears with the last button clicked being the latest notification shown.

In the action centre these show up as multiple notifications all stacked on one another.

Is there a way to have both notifications, shown at the same time in the banner (on ontop of the other). I have looked everywhere for a solution and have found nothing, is this something that can be fixed via the javascript or is it a limitation of windows desktop notifications?

Currently hosting the site on Netlify so I do get the notifications etc.

<body>
    <h1>Notification Tester</h1>
    <button id="btn1">Notification 1</button>
    <button id="btn2">Notification 2</button>
    
    <script>
        // Function to show notifications
        function showNotification(title, body) {
            // Request permission if not already granted
            Notification.requestPermission().then((permission) => {
                if (permission === "granted") {
                    // Create a new notification
                    new Notification(title, {
                        body: body,
                        icon: "https://static.vecteezy.com/system/resources/previews/030/762/552/non_2x/3d-message-notification-bell-icon-illustration-png.png"
                    });
                }
            });
        }
    
        // Add click event listeners to the buttons
        document.getElementById("btn1").addEventListener("click", () => {
            showNotification("Test 1", "This is test 1 notification");
        });
    
        document.getElementById("btn2").addEventListener("click", () => {
            showNotification("Test 2", "This is test 2 notification");
        });
    </script>

Upvotes: 1

Views: 29

Answers (0)

Related Questions