Enable browser notification on localhost

Your code should be working.. may be you missed something else.. Please try this code..

Usage

sendNotification({
  title: 'New Notification',
  message: 'Your message goes here',
  icon:'https://cdn2.iconfinder.com/data/icons/mixed-rounded-flat-icon/512/megaphone-64.png',
  clickCallback: function () {
    alert('do something when clicked on notification');
  }
});

Function

function sendNotification (data) {
    if (data == undefined || !data) { return false }
    var title = (data.title === undefined) ? 'Notification' : data.title
    var clickCallback = data.clickCallback
    var message = (data.message === undefined) ? 'null' : data.message
    var icon = (data.icon === undefined) ? 'https://cdn2.iconfinder.com/data/icons/mixed-rounded-flat-icon/512/megaphone-64.png' : data.icon
    var sendNotification = function (){
        var notification = new Notification(title, {
            icon: icon,
            body: message
        })
        if (clickCallback !== undefined) {
            notification.onclick = function () {
                clickCallback()
                notification.close()
            }
        }
    }

    if (!window.Notification) {
        return false
    } else {
        if (Notification.permission === 'default') {
            Notification.requestPermission(function (p) {
                if (p !== 'denied') {
                    sendNotification()
                }
            })
        } else {
            sendNotification()
        }
    }
}

In ubuntu, you should run the chrome instance this way

whereis google-chrome to find your executable

/usr/bin/google-chrome --unsafely-treat-insecure-origin-as-secure=http://your-domain.dev:80

Remember to close all other instances of chrome before doing that (pkill -9 chrome)

On MacOS you may edit the UserNotificationPermissions.plist in the ~/Library/Safari. You may use Xcode in sudo

sudo /Applications/Xcode.app/Contents/MacOS/Xcode

Open the file (use CMD+SHIFT+. to display hidden folders/files) Duplicate or create a new item here by using localhost or anything else

A good implementation for TypeScript could be

  export const browserNotification = (title: string, body: string = "", options = {}) => {
    try {
      if (typeof window === "undefined" || !Notification) {
        return;
      }

      Notification.requestPermission().then(permission => {
        if (permission === "granted") {
          new Notification(title, { ...options, body });
        }
      });
    } catch (error) {
      // Safari doesn't return a promise for requestPermissions and it
      // throws a TypeError. It takes a callback as the first argument
      // instead.
      if (error instanceof TypeError) {
        Notification.requestPermission(() => {
          new Notification(title, { ...options, body });
        });
      } else {
        throw error;
      }
    }
  };

Open up the console then enable notifications on localhost with

window.Notification.requestPermission();

Click on "Allow" in the top left.

Then you can send notifications like this

new window.Notification(
    'Notification title text',
    {
        body: 'notification body text',
        badge: '/img/some-image.png',
        icon: '/img/some-image.png',
    },
);