Web push notifications on mobile and desktop: structure & examples (prt. 2)

In this article, we will have a closer look at the web push structure and see how notification looks on the screens of the subscribers that use different operating systems and browsers.

If you haven't read the first part of the article, I encourage you to check it out - Web push notifications on mobile and desktop: market reach.

Table of content

1. Web push notification structure
2. The appearance of web push notifications in the different operating systems:

• Android
• Windows 10
• MacOS Big Sur
• MacOS Catalina

Web push notification structure

Let’s have a look at the main elements of web push on the example of notification received in Google Chrome browser.

• [1] - an icon of the browser. Marks the browser in which notification was received. 
• [2] - notification icon where you can place a small icon/image or your logo. 
• [3] - big image. It is not an obligatory element. In fact, the feature is supported only by Google Chrome, Microsoft Edge and Opera browsers. 
• [4] - close or disable notifications from a particular site
• [5] - web push notification title. The visible length depends on the browser and operating system. Supports emojis.
• [6] - web push notification body. As well as with the title the visible length depends on the browser and operating system. Supports emojis.
• [7] - link of the site that sent the notification. Note, if you have Basic Integration, the domain of PushPushGo will be visible in the link (see the screenshot below).

• [8] - Action button. This feature is supported by Google Chrome, Microsoft Edge and Opera. Also, Google Chrome supports two action buttons.

• [9] - notification settings. The user can manage his web push preferences from the notification itself as is shown on the screenshot.

The appearance of web push notifications in different operating systems

We sent a web push campaign to users that use different devices, operating systems and browsers. Then we made screenshots of received notifications, so you can see with your own eyes how the same push notification changes on different screens.

Web push notifications on Android

Android, Google Chrome, rich push notification

• Recommended title length - up to 35 characters
• Recommended body length - up to 50 characters
• Recommended image size - 1000x500 px, up to 200 kB
• Supported image formats - png, jpg, svg, webp, ico, cur, bmp, gif (not animated / only the first frame will be displayed)
• Recommended icon size - aspect ratio 1:1, up to 200 kB
• Supported icon formats - png, jpg, svg, webp, ico, cur, bmp, gif (not animated / only the first frame will be displayed)
• Action buttons - yes (up to 2 action buttons)
• Other elements visible in the notification: Google Chrome logo and browser name, website address, time stamp.

Android, Samsung Internet, rich push notification

• Recommended title length - up to 35 characters
• Recommended body length - up to 50 characters
• Recommended image size - 1000x500px, up to 200 kB
• Supported image formats - png, jpg, svg, webp, ico, cur, bmp, gif (not animated / only the first frame will be displayed)
• Recommended icon size - aspect ratio 1:1, up to 200 kB
• Supported icon formats - png, jpg, svg, webp, ico, cur, bmp, gif (not animated / only the first frame will be displayed)
• Action buttons - yes (1 action button)
• Other elements visible in the notification: Samsung Internet browser logo and name, website address, timestamp.

Android, Firefox Mobile, standard push notification

• Recommended title length - up to 35 characters
• Recommended body length - up to 50 characters
• Big image - not supported
• Recommended icon size - aspect ratio 1:1, up to 200 kB
• Supported icon formats - png, jpg, svg, webp, ico, cur, bmp, gif (not animated / only the first frame will be displayed)
• Action buttons - not supported
• Other elements visible in the notification: Firefox logo and browser name, website address, timestamp.

Android Opera, rich push notification

• Recommended title length - up to 35 characters
• Recommended body length - up to 50 characters
• Recommended image size - 1000x500px, up to 200 kB
• Supported image formats - png, jpg, svg, webp, ico, cur, bmp, gif (not animated / only the first frame will be displayed)
• Recommended icon size - aspect ratio 1:1, up to 200 kB
• Supported icon formats - png, jpg, svg, webp, ico, cur, bmp, gif (not animated / only the first frame will be displayed)
• Action buttons - yes (1 action button)
• Other elements visible in the notification: Opera logo and browser name, website address.

Web push notifications on Windows 10

Windows 10, Google Chrome, rich push notification

• Recommended title length - up to 50 characters
• Recommended body length - up to 120 characters 
• Recommended image size - 1000x500px, up to 200 kB
• Supported image formats - png, jpg, svg, webp, ico, cur, bmp, gif (not animated / only the first frame will be displayed)
• Recommended icon size - aspect ratio 1:1, up to 200 kB
• Supported icon formats - png, jpg, svg, webp, ico, cur, bmp, gif (not animated / only the first frame will be displayed)
• Action buttons - yes (up to 2 action buttons)
• Other elements visible in the notification: Google Chrome logo and browser name, website address.

Windows 10, Microsoft Edge, rich push notification

• Recommended title length - up to 50 characters
• Recommended body length - up to 120 characters
• Recommended image size - 1000x500px, up to 200 kB
• Supported image formats - png, jpg, svg, webp, ico, cur, bmp, gif (not animated / only the first frame will be displayed)
• Recommended icon size - aspect ratio 1:1, up to 200 kB
• Supported icon formats - png, jpg, svg, webp, ico, cur, bmp, gif (not animated / only the first frame will be displayed)
• Action buttons - yes (up to 2 action buttons)
• Other elements visible in the notification: Microsoft Edge logo and browser name, website address.

Windows 10, Firefox, standard push notification

• Recommended title length - up to 54 characters with spaces (title will always have 1 line)
• Recommended body length - up to 200 characters with spaces
• Big image - not supported
• Recommended icon size - aspect ratio 1:1, up to 200 kB 
• Supported icon formats - png, jpg, svg, webp, ico, cur, bmp, gif (not animated / only the first frame will be displayed)
• Action buttons - not supported
• Other elements visible in the notification: website address.

Windows 10, Opera, rich push notification 

• Recommended title length - up to 50 characters
• Recommended body length - up to 120 characters
• Recommended image size - 1000x500px, up to 200 kB
• Supported image formats - png, jpg, svg, webp, ico, cur, bmp, gif (not animated / only the first frame will be displayed)
• Recommended icon size - aspect ratio 1:1, up to 200 kB
• Supported icon formats - png, jpg, svg, webp, ico, cur, bmp, gif (not animated / only the first frame will be displayed)
• Action buttons - yes (up to 2 action buttons)
• Other elements visible in the notification: Opera logo and browser name, website address.

Web push notifications on macOS Big Sur

MacOS system does not support rich push notifications (notifications with big images).

MacOS Big Sur, Safari, standard push notification

• Recommended title length - up to 50 characters
• Recommended body length - up to 120 characters
• Big image - not supported
• Recommended icon size - aspect ratio 1x1, up to 200 kB
• Supported icon formats - png, jpg, svg, webp, ico, cur, bmp, gif (not animated / only the first frame will be displayed)
• Other elements visible in the notification: Safari logo and browser name, website address, timestamp.

MacOS Big Sur, Google Chrome - standard and extended web push notification

• Recommended title length - up to 80 characters
• Recommended body length - up to 150 characters
• Big image - not supported
• Recommended icon size - aspect ratio 1x1, up to 200 kB
• Supported icon formats - png, jpg, svg, webp, ico, cur, bmp, gif (not animated / only the first frame will be displayed)
• Other elements visible in the notification: Google Chrome logo and browser name, website address, timestamp.

MacOS Big Sur, Firefox - standard and extended web push notification

• Recommended title length - up to 80 characters
• Recommended body length - up to 150 characters
• Big image - not supported
• Recommended icon size - aspect ratio 1x1, up to 200 kB
• Supported icon formats - png, jpg, svg, webp, ico, cur, bmp, gif (not animated / only the first frame will be displayed)
• Other elements visible in the notification: Firefox logo and browser name, website address.

Web push notifications on macOS Catalina

MacOS Catalina, Safari, standard push notification

• Recommended title length - up to 30 characters
• Recommended body length - up to 50 characters 
• Big image - not supported
• Recommended icon size - aspect ratio 1x1, up to 200 kB
• Supported icon formats - png, jpg, svg, webp, ico, cur, bmp, gif (not animated / only the first frame will be displayed)
• Other elements visible in the notification: Safari logo, website address.

MacOS Catalina, Google Chrome - standard and extended web push notification

• Recommended title length - up to 22  characters
• Recommended body length - up to 30 characters
• Big image - not supported
• Recommended icon size - aspect ratio 1x1, up to 200 kB
• Supported icon formats - png, jpg, svg, webp, ico, cur, bmp, gif (not animated / only the first frame will be displayed)
• Action button - yes (1 action button)
• Other elements visible in the notification: Google Chrome logo, website address.

MacOS Catalina, Firefox, standard push notification

• Recommended title length - up to 30 characters
• Recommended body length - up to 40 characters 
• Big image - not supported
• Recommended icon size - aspect ratio 1x1, up to 200 kB
• Supported icon formats - png, jpg, svg, webp, ico, cur, bmp, gif (not animated / only the first frame will be displayed)
• Other elements visible in the notification: Firefox logo, website address.

MacOS Catalina, Opera, standard push notification

• Recommended title length - up to 30 characters
• Recommended body length - up to 40 characters 
• Big image - not supported
• Recommended icon size - aspect ratio 1x1, up to 200 kB
• Supported icon formats - png, jpg, svg, webp, ico, cur, bmp, gif (not animated / only the first frame will be displayed)
• Other elements visible in the notification: Opera logo, website address.

Please, note there are no specific requirements from browsers regarding the lengths of the text in web push messages. We gave recommendations regarding the number of characters but there is a possibility that your message may be too long because some characters take more space than others, for example, “iii”  VS “mmm”. So, try to keep it short and remember brevity is the soul of wit :)

To sum up

Even though every device, operating system and browser affect the appearance of a web push notification, you can use the preview of notification in the PushPushGo application while preparing your campaign.

Moreover, in order to provide a better user experience, you can send the campaign to particular tags that have similar requirements to the web push notification, for example, you can choose a segment “desktop+Windows+Chrome+Edge+Opera” (as you, probably, noticed, notifications received in Chromium-based browsers (Google Chrome, Edge, Opera) do not differ significantly). In this way, you can be sure subscribers will receive notifications where all the text is visible along with a big image.

If you send the campaign to all subscribers, pay attention to which group prevails, for example, if it is Android/Google Chrome users, prepare the notification by orienting on this segment.