CODEWITHSUNDEEP
javascriptgoogle-chromefirefoxpush-notificationnotifications
daydreamer
daydreamer

Reputation: 91939

Cannot stack multiple push notifications

I am working on a code to push notifications to the browser. My code to display notifications look like below

const imageWithTextNotification = (reg) => {
            // more options at https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/showNotification#Syntax
            const options = {
                icon: "imgs/notification.png",

                // 07 - Notification with a body
                body: "Alert!! This is image notification",

                // 09 - Actions on notification click (see sw.js for log)
                actions: [
                    { action: "search", title: "Try Searching!" },
                    // 10 - More Actions
                    { action: "close", title: "Forget it!" },
                ],
                data: {
                    notificationTime: Date.now(),
                    githubUser: "hhimanshu"
                }
            }
            reg.showNotification("Counter=" + counter++, options)
        }

After reading the documentation from MDN, the code should stack multiple notifications since I am not using the tag property in the options object.

However, in my observation, multiple notifications do not stack. The same notification is replaced (see counter value increased in the demo below). Please see below

web push notification

The reproducible codebase is available at https://codesandbox.io/s/charming-hellman-8q4t3 and the demo is available at https://8q4t3.sse.codesandbox.io/

I have tested this on

Google Chrome => Version 80.0.3987.163 (Official Build) (64-bit)
Firefox => 75.0 (64-bit)

Could someone please help me understand how can I get the multiple stacked notifications?

Thank you

Upvotes: 0

Views: 236

Answers (1)

daydreamer
daydreamer

Reputation: 91939

I was also in touch with @gauntface on twitter and with his help, I was able to fix this issue.

Here is the Twitter thread

And here is the solution Stack Push Notifications

Upvotes: 1

Related Questions