Chrome 59 has brought in the much-awaited feature of Native Notification through the Notification API as well as the Chrome’s Notification Extension API. Google Chrome Browser now when produces a notification, one can see the notification in the notification tray in macOS as well as one can see the Native look and feel to the Notification. Earlier chrome shipped its own notification box bundled along with chrome.

Starting Chrome 59 one can see the notification persistent on the notification tray in chrome and event the look and feel will adhere to the native notification of the chrome because that is what is being used. The below image shows how a typical notification looks like.

This works only in Chrome 59 and above. Else please use Chrome Canary Latest build or enable the flag in the earlier browsers.

Native Notification macOS

Native Notification macOS

If you want to try out this sample, you can go down to the JSFiddle link in order to get this example code. You can use the sample below on a Mac Machine and trigger a notification, it may ask permission please provide and proceed. You can open the tray and see the Notification stacked as shown in the above image.

As you see the chrome logo on the Notification, if you put a default Logo it will appear on the right hand corner. Since its the native notification on macOS, It’s a requirement to show the chrome logo or as mentioned any third party app have to show their logo as per macOS mandates. So your custom image will come on the left hand side.

You can have a look at the code and find that it’s using the same set of Notification API as expected but now since Chrome 59 uses the Native Notification in macOS the way things appear is a bit different.

Also published on Medium.

Join our 2500+ fellow readers

Join our 2500+ fellow readers

Joining our mailing list will for sure keep you at the top of Web Development Ecosystem. Connect with us and also other fellow developers.

You have Successfully Subscribed!

Pin It on Pinterest

Share This