Browser notifications invoked website

Question

So lately on some websites I have seen these browser level invoked notifications that popup even if you didn't open that certain website. You have to allow those notifications to be displayed and then they are pretty much everywhere, even when you first open a browser without tabs.

I don't know how to use for these browser level notifications invoked by my website. A name and some code examples would be appreciated, I don't even know what programming language it's written in (assuming Javascript).

This is a screenshot of what I'm talking about (top right corner):

As you see, they still appear even though the browser is minimized!

Answer 1

These are implemented using the Notification API - some recent documentation can be found here:

https://developer.mozilla.org/en-US/docs/Web/API/notification

You can easily try it from the console of most current browsers -

Notification.requestPermission();

Approve the notification permission and then try

new Notification('Hello, you have been notified!');

The documentation has more detailed usage examples.

Answer 2

As pvg said, there is a Browser API named Notification, which allows you to send notifications to your users. You must request permission first, and if granted, build a new Notification.

I have built a micro library in javascript that does exactl that as an object, go check it out here: https://github.com/jsmrcaga/miniNotif

Usage is simple, you make a new notification as an object like so:

var yourNotif = new miniNotif.notification('title', {body: 'your body', icon: 'URL'});

, and call yourNotif.show() whenever you want it to be displayed.

I believe that the readme on GitHub is out of date though