Before launching a web push marketing campaign, every website owner should find out the best way of interaction with the audience. Both text content and notification design are important here.

Today we’ll review the appearance of web push notifications on different OS and browsers. We’ll introduce examples of notifications for various devices and systems. You will learn what your addressee sees after receiving an alert and how to approach campaign planning.

Read our ultimate guide on what web push notifications are.

What is a Web Push Notification?

Web push notification is a technology for fast communication between a website and its users. Its main feature is that the notification comes to the user’s device screen even after the website page is closed. Web push works via a browser for HTTPS websites.

TIP

The development of the technology includes a chain of program modules for interaction between the website server (JavaScript), the message server (Firebase Cloud Messaging) and the browser (HTML5).

There is the code lab from Google and specification of Push Notification API and Web Notifications API.

After a user subscribes to push notifications, a website can send him alerts. Subscription occurs with a visitor consent in one click in the service browser window.

Sample subscription widget on a desktop device (OS Windows, Chrome browser):

Sample subscription window on a mobile device (OS Android, Chrome mobile): 

The basic structure of web push: Besides, the extra buttons and big images are available for some browsers and OS. We’ll talk about the unique functions for different devices later.

To start collecting database for your website register by the link.

Free trial

After registration, our service provides a client with access to a personal account. Here you can create a campaign in a simple form, make a notifications preview, select various filters for subscribers’ segmentation.

Browsers and Devices that Support Web Push Notifications

Let’s see worldwide statistics of OS and browsers usage first. The most popular operating systems are Android and Windows (about 36% market share). iOS ranks third (13,99%).

Chrome is in the lead among desktop browsers by a wide margin (almost 72% market share). Chrome and Safari browsers are at the top of the list for mobile users. Now we know devices and browsers of the highest demand.

Next, we will find out which browsers and operating systems support push notifications. Our research will let us figure out the amount of users reached by this marketing channel.

You can send notifications to devices on Android OS, Mac OS, Windows, Ubuntu. iOS doesn’t support the technology for any browser, so iPhones owners can’t receive this alerts today. Still, it’s more than 80% mobile and desktop users with access to web push all over the world.

Starting from Chrome 42 version, the browser supports web notifications. Subsequent browser versions added functional extensions in the alerts displaying. For example, the big images and the action boxes were introduced in Chrome 56. The notifications after a subscription via Chrome come to the user’s device in the form supported by its operating system (Windows, Android, Mac OS). Below we added the screenshots showing notifications examples displayed on Chrome for different devices.

Opera and Firefox browsers support web push as well both for desktop and mobile devices. Safari allows the notifications for desktop only (Mac OS).

Learn more about Web Push Notification Statistics.

Examples of Web Push Notifications

Discover how a notification looks for users with different devices.

Chrome has the widest set of unique notification options in different operating systems. When creating campaigns for Chrome users, you can set big images (size 360×240), select icons for CTA buttons with UTM tags.

Web push examples in Chrome:

  • for Windows 7 with the banner image and the buttons
  • for Windows 10 with the big image and the button
  • for Android OS
  • for Mac OS (doesn’t support the big images and the extra buttons)        

Opera browser also allows sending not only the standard format (text, image, URL), but push notifications with extended properties too.

The browser notifications example in Opera:

  • for Windows 10 with the big image and the extra button
  • for Android with the banner image and the buttons

Firefox currently has the fewest number of display options for notifications. Here are some web push examples in this browser:

  • for Windows 10
  • for Android
  • for Mac OS

The last one is Safari browser and an example of notification for Mac OS:

‘Settings’ and ‘Close’ buttons appear on Mac OS while you move the cursor over the notification.

Since September 2018, all received push notifications in Windows 10, if they get no click, are redirected to the Notification Center. So, the subscriber can view unopened messages later. The same works for Mac OS.  The user can send alerts to the Action Center himself if the browser has the function for redirecting. In the Windows 10 Action Center, the last twenty alerts are saved. After the computer restarts, notifications still stay there. When you click on the web push from the Center, the browser opens (if it has not been opened before).

What notification will my subscriber receive?

After registering for web push, you can use the notification viewing function before launching the campaign. Create your personal account on the Gravitec.net website.

Click to Registrate

The notification preview example for each browser: You can select the separate user groups from the database by a browser type or operating system. During the subscription, this data is transmitted from the user’s device to the notification system.  Besides, you can create a live demo for push notification in our service and send it to your device. See it in action!

Try now

If you have any questions about how web push notifications work, please contact our support team.

Web Push Notifications Examples That Users Enjoy In Real
5 (100%) 2 votes