CODEWITHSUNDEEP
node.jsherokupush-notificationweb-push
Mike Marks
Mike Marks

Reputation: 10139

Web Push Notifications not working for Firefox, but are for Chrome and Edge

I'm writing an app in Heroku that sends push notifications to the web browser. I have this working 100%, except that Firefox is not receiving any push notifications. Chrome and Edge are, but Firefox isn't. I've made sure that Firefox allows notifications. So, my question isn't really around the coding part of it, since that appears to be working, but it's more of "is there anything with Firefox that I need to be aware of when developing a web push notification app for it"? I know that each major browser treats push notifications a bit differently, and that's what I suspect the issue is.

Here's the console output for Firefox on the site I subscribed to push notifications for. I get the same JSON syntax error in all browsers, by the way - but the JSON does parse correctly:

Service worker successfully registered. subscribeUser.js:22:13
email catpured = [email protected] test.html:33:17
Received PushSubscription:  {"endpoint":"https://updates.push.services.mozilla.com/wpush/v2/gAAAAABesF3MuanJl_xHII9ya_KSkLSe0CmR4ZZqnlT5HNv4qwV24Zv1hkCe7eGuPsh3HLRm2g0u_vbw_-f6Nw4Gk_SpFW9QcGX3DQMSqX5z_bJUfV_Ws5oHY-A8Q_Nfqcv7iji-_89BtaM0wmde3gx2exJsXbE_uxfr6daFInUKgWLkb3BtmhI","keys":{"auth":"n8yCVyUqhYkOGamajx03Pg","p256dh":"BDgmGLotx4N2BQdqdsIkFjRhycZW1NisTktz-Lyvg094LbDDjMiZEQlLpeuDQCD030Lzx-FleNPewDglpnYS2Wo"}} subscribeUser.js:62:15
SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

notificationText Object Stringified: {"notification":{"body":"this is coolfgsdfsfdsfdsdfsdfsfds","title":"Whoa","actions":[{"action":"Yes","title":"Yes","icon":"./images/notification_icon.png"},{"action":"No","title":"No","icon":"./images/notification_icon.png"}],"data":{"url":"http://www.yahoo.com"},"requireInteraction":true}} service-worker.js:9:11
NotificationText Object Not Stringified:  
Object { notification: {…} }
service-worker.js:10:11
NotificationText.Notification Object:  
Object { body: "this is coolfgsdfsfdsfdsdfsdfsfds", title: "Whoa", actions: (2) […], data: {…}, requireInteraction: true }
service-worker.js:11:11
TypeOf notificationText: object service-worker.js:12:11
Notification:  Whoa

Here's the console output for Chrome:

email catpured = [email protected]
subscribeUser.js:62 Received PushSubscription:  {"endpoint":"https://fcm.googleapis.com/fcm/send/ekyiCymm_cE:APA91bGTjb4ccnWyiLZ5JIi99rIllciNnnVWt0DvL7emfgpP9Ft_CppxakL_xbB2lH-Xacu1rhov8LXbGCfes4ym0tvObNUSUvwDLA6cr9-0ANSUpUfmLBUq_WxV2DGNTBoDn93jFc8U","expirationTime":null,"keys":{"p256dh":"BMUz_sHi9NWQeuBy5gNmlkPv2PP04A_sbiee01EzuMdCrW14da4r0C2-eVA-tjzNDFxLF1wd1F-I852t8Hl7mb4","auth":"xDNUaKR8gMAhmSG6rbQS5w"}}
test.html:1 Uncaught (in promise) SyntaxError: Unexpected token O in JSON at position 0
Promise.then (async)
sendSubscriptionToBackEnd @ subscribeUser.js:84
(anonymous) @ subscribeUser.js:64
Promise.then (async)
subscribeUserToPush @ subscribeUser.js:61
(anonymous) @ subscribeUser.js:42
Promise.then (async)
askPermission @ subscribeUser.js:41
(anonymous) @ test.html:34
service-worker.js:9 notificationText Object Stringified: {"notification":{"body":"this is coolfgsdfsfdsfdsdfsdfsfds","title":"Whoa","actions":[{"action":"Yes","title":"Yes","icon":"./images/notification_icon.png"},{"action":"No","title":"No","icon":"./images/notification_icon.png"}],"data":{"url":"http://www.yahoo.com"},"requireInteraction":true}}
service-worker.js:10 NotificationText Object Not Stringified:  {notification: {…}}
service-worker.js:11 NotificationText.Notification Object:  {body: "this is coolfgsdfsfdsfdsdfsdfsfds", title: "Whoa", actions: Array(2), data: {…}, requireInteraction: true}
service-worker.js:12 TypeOf notificationText: object
service-worker.js:15 Notification:  Whoa

And here's the notification I get for Chrome:

And here's the notification I get: enter image description here

Upvotes: 0

Views: 5617

Answers (1)

Mike Marks
Mike Marks

Reputation: 10139

The answer is here: https://www.askvg.com/tip-enable-disable-mozilla-firefox-notifications-to-show-in-windows-10-action-center/. Turns out that notifications in Firefox to display in the Windows 10 Action Center is disabled by default.

Upvotes: 2

Related Questions