Web push notification not showing

Question

I registered a service worker and am trying to test a web notification in the browser. Chrome (and Firefox) claim the service worker is successfully registered.

On load of the React App, I've granted permission to receive notifications.

In my sw.js, I am listening for a push event, and attempting to send a sample push message from the Chrome Application tab, as shown in the screenshot above.

self.addEventListener("push", receivePushNotification);

When clicking Push in the Chrome Application Tab, the push event fires, calling receivePushNotification. However, when I attempt to show a notification in the browser, nothing happens and no error is reported.

function receivePushNotification(event) {
  // This prints "Test push message from DevTools."
  console.log("[Service Worker] Push Received.", event.data.text());

  var options = {
    body: "This notification was generated from a push!"
  };

/*****
  I would expect the following line to display a notification, since I've already 
  granted permission to allow for notifications. Yet, nothing happens and there is 
  no error in the console.
*****/

  event.waitUntil(self.registration.showNotification("Hello world!", options));
}

Does this happen in production only or locally as well? I do suggest you create 2 vapid sets, one locally for testing and another for production. Make sure you handle calling the right vapid keys based on your environment. I have a gist on github that has what you need. https://gist.github.com/waelio/6f2a792e60c0e5ea9441af0cbb4f554c — Waelio, Jul 04 '21 at 18:32
Check if the OS' do-not-disturb mode is on, as described in this answer: https://stackoverflow.com/a/61651174/3112241 — ack_inc, Jan 13 '22 at 16:15

score -1 · Answer 1 · answered Sep 19 '20 at 22:32

-1

You seem to have gone one step too far in defining your function separately / not defining it as an async function. You are also not passing the event to the function call.

What happens if you rewrite it like this?

self.addEventListener("push", function(event) {
  console.log("[Service Worker] Push Received.", event.data.text());
  var options = {
    body: "This notification was generated from a push!"
  };
  event.waitUntil(self.registration.showNotification("Hello world!", options));
});

answered Sep 19 '20 at 22:32

miknik

5,748
1
10
26

The `event` is implicitly passed to the function reference. Notice I left a comment on the first line of my function that states how I do, indeed, receive the text being pushed from the Chrome Devtools. – Andy Hoffman Sep 21 '20 at 22:29
If you want to keep the service worker alive then the event.waitUntil method must be initially called within the event callback and has to be passed a promise. The browser will then keep the worker alive until the promse settles. So if you want to use a named function it needs to be async and return a value upon resolve/reject. What happens if you try my example code above? – miknik Oct 06 '20 at 20:31
Downvote reason: there's no difference between your example code and the code in the question. Specifically: the event handler function in your example code is not async either. – ack_inc Jan 13 '22 at 16:12

score -1 · Answer 2 · answered Jul 04 '21 at 18:39

-1

This is the code that I use. It is pretty generic, and it works.

self.addEventListener('push', function (e) { 
  console.log('Push Received...')
  const data = e.data.json()
  self.registration.showNotification(data.title, {
    body: 'Notified by Waelio.com!',
    icon: 'https://picmymenu.s3.eu-west-3.amazonaws.com/waelio_logo.png',
  })
})

answered Jul 04 '21 at 18:39

Waelio

59
1
9

I added in the comments a link to a gist that handles the subscribe and unsubscribe functions. https://gist.github.com/waelio/6f2a792e60c0e5ea9441af0cbb4f554c – Waelio Jul 04 '21 at 18:44

Web push notification not showing

2 Answers2