Paul Lewis [X](https://twitter.com/aerotwist) [Homepage](https://aerotwist.com/) ![Stephen McGruer](https://web.dev/images/authors/smcgruer.jpg) Stephen McGruer [GitHub](https://github.com/stephenmcgruer)

<br />

Starting in Chrome 59, notifications sent via the [Notifications API](https://developer.mozilla.org/docs/Web/API/Notifications_API) or the
[chrome.notifications extensions API](https://developer.chrome.com/docs/extensions/reference/api/notifications.md.txt) will be shown
directly by the macOS native notification system instead of Chrome's own system.

This change makes Chrome on macOS feel much better integrated into the platform
and fixes a number of long standing bugs, such as Chrome not respecting the
system Do Not Disturb setting.

Below we'll look at the differences this change introduces to the existing
API's.

## Notification center

One of the benefits of this change is that notifications will be displayed in
macOS's notification center.
![Google Chrome Notifications will be displayed in the macOS notification center](https://developer.chrome.com/static/blog/native-mac-os-notifications/image/google-chrome-notificatio-0dd272728498d.png) Google Chrome Notifications will be displayed in the macOS notification center

## Differences

### Icon size and positioning

The appearance of icons will change. They'll be smaller in size and padding is
applied. You may want to consider switching to a transparent background icon
instead of a solid color to be aesthetically pleasing.
![Before and after for Chrome on Mac notification icons displayed by Chrome vs. displayed by
macOS.](https://developer.chrome.com/static/blog/native-mac-os-notifications/image/before-after-chrome-ma-8f7a9faf4b135.png) Before and after for Chrome on Mac notification icons displayed by Chrome vs. displayed by macOS

### Action icons

Before this change action buttons and icons would be displayed in the
notification. With native notifications the action button icons will not be
used and the user will need to hover over the notification and select the "More"
button to see the available actions.
![Before and after of notification action buttons with icons displayed by
Chrome vs. displayed by macOS.](https://developer.chrome.com/static/blog/native-mac-os-notifications/image/before-after-notificati-acefa2d32d351.png) Before and after of notification action buttons with icons displayed by Chrome vs. displayed by macOS

### Chrome logo

The Chrome logo will always be displayed and cannot be replaced or altered. This
is a requirement for third-party applications on macOS.

### Images

The `image` option will no longer be supported on macOS. If you define an image
property the notification will still be displayed, but it will ignore the image
parameter (See example below).
![Before and after of notification image for Chrome on macOS.](https://developer.chrome.com/static/blog/native-mac-os-notifications/image/before-after-notificati-35cb1f20a7481.png) Before and after of notification image for Chrome on macOS

You can feature detect image support with the following code:

```javascript
if ('image' in Notification.prototype) {  
  // Image is supported.
} else {  
  // Image is NOT supported.
}
```

## Chrome extension changes

Chrome extensions have the concept of [notification templates](https://developer.chrome.com/docs/extensions/reference/api/notifications.md.txt#type-TemplateType)
which will behave differently with this change.

The image notification template will no longer show the image. You should ensure
that images are supplemental and not required to be useful to your users.
![Before and after for image templates in the chrome.notification API.](https://developer.chrome.com/static/blog/native-mac-os-notifications/image/before-after-image-temp-ea8d68fe9acc.png) Before and after for image templates in the chrome.notification API

The list notification template will only show the first item in the list. You
may want to consider moving back to the basic notification style and using body
text to summarize the set of changes.
![Before and after for list templates in the chrome.notification API.](https://developer.chrome.com/static/blog/native-mac-os-notifications/image/before-after-list-templ-58a8124f4c8f9.png) Before and after for list templates in the chrome.notification API

Progress notifications will append a percentage value to the notification title
to indicate the progress instead of a progress bar.
![Before and after for progress templates in the chrome.notification API.](https://developer.chrome.com/static/blog/native-mac-os-notifications/image/before-after-progress-t-aeb9eb61ae795.png) Before and after for progress templates in the chrome.notification API

The last difference in notification UI is that the `appIconMarkUrl` will
no longer be used on macOS.
![Before and after for appIconMarkUrl in the chrome.notification API.](https://developer.chrome.com/static/blog/native-mac-os-notifications/image/before-after-appiconmar-74e3f48314cd4.png) Before and after for appIconMarkUrl in the chrome.notification API