Browser Notification: not showing up

Question

I seem to be following the code as suggested by Google Labs to create serviceWorker and have written the code for pushing notifications, yet it does not seem to be showing up. It seems like the push event from the server does reach the browser, however the showNotification function is just ignored.

// in sw.js
self.addEventListener('push', function(event) {
 console.log('Push Received'); // this shows up
 event.waitUntil(self.registration.showNotification('Hello World'));
 // tried  self.registration.showNotification('Hello World') but still does not show up
});

Further to check whether the showNotification works I have put the following in the main.js.

//in main.js
console.log(Notification.permission) // shows granted
if (Notification.permission == 'granted') {
 console.log('will show notification') // this gets logged
 navigator.serviceWorker.getRegistration().then(function(reg) {
   Console.log('reached here'); // this too gets logged
   reg.showNotification('Hello world!');
 });

Lastly I came across this site that some folks have used for testing

https://gauntface.github.io/simple-push-demo/

as well as

https://web-push-book.gauntface.com/demos/notification-examples/

After permitting notifications from this site, I find no notifications appearing using the screen or the given curl command.

I have tried in both Chrome and Firefox and the results are the same. I am using Chrome 68.x and Firefox 61.x on Mac OS 10.13.6

I find that the site I am using has notifications enabled in the Chrome Settings (advanced section). Even clicking on the secure part of the address bar shows that notifications have been set to allow. Is there some other settings that I am missing? Thanks

Answer 1

It was such a silly error. Mac OS X has a notifications settings which was (I think default) set to 'DO NOT DISTURB`. Disabling that showed the push notifications. Thought other folks, like me, who may not have realised this should know.

Answer 2

Some additional advice for Windows 10 desktop users:

• Not a -browser- notification - The notifications caused by self.registration.showNotification will not show up in the browser as you might expect. These notifications show up in the Windows Action Center.

• Focus Assist - There is a "Focus Assist" setting in Windows that (analogous to the Apple setting mentioned above) determines whether notifications to the Action Center are silent or result in a toast. It does not mention Action Center.

• More than one type of "Notification" Just to confuse things, the Windows "Notifications" area is a different, but related feature. The Action Center has an icon in the Taskbar Notification Area. You can read more here.

• Dual Monitors - If you have more than one monitor, you will only see the Action Center icon on the task bar of your primary monitor. Further, you will only see the Action Center toast on the primary monitor.

• Existing notifications suppress toasts - If the domain for your site is already listed in the Action Center, you won't see an additional toast for new messages. However, you will still see the item your site created in the Action Center. Clear that item, and your next notification will result in a toast.