Shopify Ecosystem

MacOS Big Sur Brings Changes To Mac Web Push Notification Design

macos-big-sur-brings-changes-to-mac-web-push-notification-design

The appearance of web push notifications are constantly evolving as platforms and browsers make native changes. The Big Sur update in November 2020 brought a few changes, including how a Mac web push notification is viewed and interacted with.  

Here’s everything you need to know about the Big Sur changes made to Mac web push notifications and how you can easily optimize your web push campaigns to fit these changes on the PushOwl dashboard.

Changes to Mac Web Push Notifications

There are 5 crucial updates to Mac web push notifications that you need to know about: 

1. Hero image support for Chrome

Previously, hero image support was only available for Windows and Android. With the Big Sur update, subscribers on Chrome can also view a hero image within their Mac web push notification.  

When the web push notification is first sent, it appears as a preview, with the hero image collapsed. Once the notification is expanded, the hero image is shown in its actual size. Subscribers can view the image properly and read any text on it. 

Here’s how the Mac web push notification on Chrome looks when it first appears and then once it is expanded: 

2. Longer character lengths 

Previously, Mac notifications only allowed 23 characters and less for its title and message length. Now, you can add up to 40 characters for the title and 88 characters for the message.

The text is initially truncated when the notification first appears. Once expanded, subscribers are shown the entire web push message. 

Read more about best practices for web push character length.

3. Click interaction to expand the notification

Previously, a Mac web push notification would expand when hovered over. With the Big Sur update, the recipient needs to click the arrow icon at the top right corner of the web push notification to expand it.

4. Expanded notification displays 4 buttons

Once the notification is expanded, shoppers are shown 4 buttons, two custom buttons (CTAs) added by the sender, and two default buttons by the browser— “Settings” and “More”. 

Note: The “More” button takes subscribers to the primary link that is added to the web push notification.

5. Smaller browser icon

The browse icon on the Mac web push notification used to be aligned with the text on the left and was larger in size. 

Now, the icon is smaller and placed at the top left of the notification. The text starts from the left margin of the notification, taking up more space within the notification.

While this isn’t a big update, it does signify that platforms are prioritizing visual appeal and readability more and will continue to optimize the appearance of web push notifications in the future.

How PushOwl supports these Mac web push notification changes

The PushOwl dashboard provides support for these Mac web push notification changes, ensuring that your web push notifications are optimized. 

Within the “Notification Creator”, merchants can add a custom hero image that is optimized for the Mac web push— 704px (Width) x 512px (Height). 

Once the image is added, it can be previewed in the collapsed as well as expanded manner within the “Notification Preview” section.

Our team is dedicated to maximizing your growth through web push marketing. This is why we’re constantly keeping an eye on the latest changes to web push notifications, their opt-in process, and different factors that impact their performance.

If you aren’t using web push to increase your sales and retaining customers, you can get started now.

Special thanks to our friends at PushOwl for their insights on this topic.
I'm also on