{"id":17592,"date":"2019-07-24T18:19:25","date_gmt":"2019-07-24T10:19:25","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=17592"},"modified":"2025-04-24T17:19:18","modified_gmt":"2025-04-24T09:19:18","slug":"osx-notification-center-for-website","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/osx-notification-center-for-website\/","title":{"rendered":"How to Add Notification for Your Website (Updated)"},"content":{"rendered":"

The notification interface has become a common part of our digital interaction, both on the desktop, mobile devices, and on the Web. Specifically on the web, this capability is enabled by the Notification API available in browsers.<\/p>\n

The Notification API was first introduced in OS X Mountain Lion<\/a> and is now available in all modern browsers, including Edge and Opera. This enables regular websites and web applications such as Slack<\/a> and Intercom<\/a> to send out notifications when there\u2019s an incoming message or a mention<\/em> in your account. In macOS, this notification appears at the top right of the screen, as shown below. It disappears after a certain amount of time and is then stored in the Notification Center<\/strong>.<\/p>\n

\"macOS<\/figure>\n

Let\u2019s see how we can utilize this API on our website.<\/p>\n

Recommended Reading:<\/strong> How to Create Hide \/ Show Notification Bar With CSS3<\/a><\/p>\n

The Notification Permission<\/h2>\n

First, let\u2019s walk through the permissions. Before a website can show notifications, users must explicitly grant permission. There are three permission levels for notifications: default<\/code>, granted<\/code>, and denied<\/code>. To check the current permission level, you can run the following code in the browser console:<\/p>\n

\nwindow.Notification.permission<\/pre>\n
This code logs the current permission level to the console. In my case, it returns 'granted'<\/code>.<\/p>\n
\"Browser<\/figure>\n
Users can deny notifications at any time through the browser\u2019s preferences or site settings.<\/p>\n
\"Browser<\/figure>\n
Running the Notification<\/h2>\n
Notifications are created using the window.Notification<\/code> object. The following code, slightly modified for demonstration purposes, is borrowed from a Mozilla Developer Network example<\/a>:<\/p>\n
\nfunction notifyMe(title, options) {\n  \/\/ Check if the browser supports notifications\n  if (!('Notification' in window)) {\n    $('.support, .no-permission, .notify-click').hide();\n    return;\n  }\n\n  $('.no-support').hide();\n\n  \/\/ Check whether notification permissions have already been granted.\n  if (Notification.permission === \"granted\") {\n    $('.no-permission').hide();\n    var notification = new Notification(title, options);\n  }\n  \/\/ Otherwise, we need to ask the user for permission.\n  else if (Notification.permission !== \"denied\") {\n    Notification.requestPermission().then(function (permission) {\n      if (permission === \"granted\") {\n        $('.no-permission').hide();\n        var notification = new Notification(title, options);\n      }\n    });\n  }\n}<\/pre>\n
In the preceding code, we created a function named notifyMe<\/code> that wraps the Notification<\/code> constructor, allowing us to pass two arguments: title<\/code> and options<\/code>.<\/p>\n
Then, simply call this function with the desired arguments. In this example, we set the title<\/code> to \u201cHi, there! \ud83d\udc4b\u201d<\/strong> and the notification body to \u201cWelcome to our website\u201d<\/strong> within the options<\/code> object, like so.<\/p>\n
\nnotifyMe('Hi, there! \ud83d\udc4b', { body: 'Welcome to our website' });<\/pre>\n
If the user hasn\u2019t yet set the permission, the browser (like Safari shown here) will first prompt them to Allow<\/strong> or Don\u2019t Allow<\/strong> notifications from this site.<\/p>\n
\"Safari<\/figure>\n
Once granted, the notification will appear, as shown in the following screenshot.<\/p>\n
\"Website<\/figure>\n
Event<\/h2>\n
Furthermore, notifications can be triggered by events. For example, using the jQuery .on<\/code> method, we can trigger a notification when a user clicks a button:<\/p>\n
\n$('.button').on('click', function() {\n  notifyMe('Hi, there \ud83d\udc4b', { body: 'You've just clicked the button.' });\n});<\/pre>\n
Further Reference<\/h2>\n
As you can see, using the Notification API is quite straightforward. Although the code shown here covers the basics, you\u2019ll likely need to adapt it to suit your specific needs. Browser support is quite good; it works in all major desktop browsers and many mobile browsers. You can see it in action and download the source code from the links below:<\/p>\n
\n    View Demo<\/a>\n    Download Source<\/a>\n<\/div>\n
Follow these references to explore the API further.<\/p>\n