Desktop Notification not appearing in Chrome

Question

I've verified that Notification.permission === 'granted', and, 'Notification' in window == true, altho the following Javascript does not make a notification appear in my Chrome browser, Version 70.0.3538.77 (Official Build) (64-bit).

var notif = new Notification('title', {
    icon: 'https://placehold.it/120x120',
    body: 'body'
});

I've executed the above in Chrome Console on the site that I know I've previously Allowed for Desktop Notifications. I've also verified that it's set to Allow in this location:

Make sure it doesn't just appear on another monitor or gets hidden underneath a window. That happens sometimes — Sv443, Oct 26 '18 at 15:12
@Sv443, I am on a laptop (single monitor). @ Sheng, I tried (1) resetting my browser using https://www.asus.com/us/support/FAQ/1007476/, then (2) uninstalled and reinstalled Chrome. After both of those attempts, I tried the link you provided (https://web-push-book.gauntface.com/demos/notification-examples/), and it still does not work. FIrefox does work tho. Perhaps the version of Chrome I have is buggy when it comes to notifications? It's odd. — Ian Davis, Oct 26 '18 at 16:52
@sheng its not working in chrome neither for desktop nor mobile. But Firefox works on mobile and desktop — Merv, Apr 24 '19 at 02:44
Just seeing both of these comments. @Merv I retested the page on Chrome 73, Windows 10, and this worked correctly. What platform are you running on? Could you have your system notifications snoozed? (It looks like Chrome delivers through the system tray, while Firefox creates their own interface FWIW.) — sheng, Apr 24 '19 at 11:35
@sheng yes sorry now it works but apparently just like you said chrome uses whatever notification system your platform has. I had notifications disabled in windows 10... oops. Didn't know that. But on my webapp and on mobile its still not working so I guess it has something to do with my code or settings on my android. Maybe you have any ideas on how the configurations must be done on android? The same thing applies to mobile that on firefox mobile it works but not on chrome. — Merv, Apr 24 '19 at 15:17

score 21 · Answer 1 · answered Oct 25 '20 at 14:25

21

Okay, I'm writing just in case anyone finds it useful.

I encountered this problem as well and I tried different sites without success. However, @Don Reptile answer gave me a hint as to what may be wrong (I blocked native notifications).

I'm on Windows 10 and this was where I enabled native notifications from Chrome.

answered Oct 25 '20 at 14:25

eastmael

371
3
7

2

The worst for me... From Chrome perspective there is no a single clue about it - origin of this block: windows's settings. – Market Jan 21 '21 at 10:40
1

Windows also has a feature called "Focus assist" that when enabled disables all notifications without priority. In my case, I didn't remember I ever enabled this (must have done it at one point and I probably didn't know it won't enable itself again after some time), and it was the cause of my issue. Solution is either adding Chrome to priority list or disabling the Focus assist altogether if you don't use it. – Jackenmen Feb 19 '21 at 16:55
This was my issue. Clutch af – Spankied Nov 14 '21 at 01:46

score 17 · Answer 2 · answered Sep 28 '19 at 12:06

17

Had same issue recently. Solution for me was disabling "Enable native notifications" in chrome://flags . And the reason why I wasnt able to see notifications is because browser wanted to show native notification, and I disabled all windows notifications. Hope it will help someone in future :)

answered Sep 28 '19 at 12:06

Don Reptile

189
1
4

3

This should be the selected answer – Luminous Apr 09 '20 at 19:14

score 6 · Answer 3 · answered Jul 12 '22 at 13:26

6

On my machine, MacOS had chrome notifications blocked at an OS level.

Fix was: System Preferences > Notifications & Focus > Enable Chrome

answered Jul 12 '22 at 13:26

Joe Roddy

729
6
12

score 4 · Answer 4 · edited Apr 11 '19 at 11:04

Issue of not opening dialog box is http. Chrome desktop notification work only on https protocol.

I have faced this issue and I have spend many time to solved that. Finally I got solution using https.

Here I shared code so you can run on https and it will working fine.

// request permission on page load
document.addEventListener('DOMContentLoaded', function() {
  if (!Notification) {
    alert('Desktop notifications not available in your browser. Try Chromium.');
    return;
  }

  if (Notification.permission !== "granted")
    Notification.requestPermission();
});

function notifyMe() {
  if (Notification.permission !== "granted")
    Notification.requestPermission();
  else {
    var notification = new Notification('Notification title', {
      icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
      body: "Hey there! You've been notified!",
    });

    notification.onclick = function() {
      window.open("http://stackoverflow.com/a/13328397/1269037");
    };
  }
}

notifyMe();

Call notifyMe(); to show notification

score 4 · Answer 5 · answered Jul 19 '22 at 07:47

4

In MacOS, you need to change the settings in your laptop.

Open "System Preferences".
Search for "Notifications & Focus".
Select "Google Chrome" from list of applications.
Enable "Allow Notifications"

answered Jul 19 '22 at 07:47

Pooja

43
5

Desktop Notification not appearing in Chrome

5 Answers5

Linked