What are Browser Push Notifications?

While web push notifications have been around for a few years, the ways they can be applied to your ecommerce marketing is constantly evolving. And as omnichannel marketing becomes ever more popular, the benefits of browser push notifications are becoming clearer. These include super simple sign ups, cost effective promotional campaigns, abandoned cart recovery, and more.

Let’s explore them and take a deep dive into the world of web push notifications. 

In this post:

• What is a Web Push Notification?
• Difference Between Web and App Push Notifications
• What Are Web Push Notifications Used For?
• How Are Web Push Notifications Displayed On Different Browsers and OSs?
• Different Elements of a Web Push Notification

Before we do that, feel free to give our Push Notification Length tester a go. Just type in notification text, and see how it looks on Windows, Android, and Mac devices.

Title

0 of 75 used

Description

0 of 200 used

Button #1

0 of 22 used

Button #2

0 of 22 used

+ Add button - Remove button

Upload logo

Image size: 192 × 192 pixels

Browse

Upload hero image

Image size: 720 × 240 pixels

Browse

Remove

Windows

Android

Mac

Hero image

Google Chrome

Yay! Your order is on its way

Thanks for your purchase! Your order has now been dispatched and will be with you on Thursday.

getfirepush.com

Get Firepush Check delivery

Chrome· getfirepush.com· Now

Long time no speak!

We miss seeing you around. Can we tempt you back with a 15% discount on your next purchase?

Hero image

Get Firepush Products Settings

Glad to have you on board!

getfirepush.com

Thanks for joining our newsletter. We’ll keep you up-to-date with product news, discounts and more!

Generated automatically

Close

More

What is a Web Push Notification?

Web push notifications are messages that you can send to people who visit your website and subscribe to receiving them. These messages can be received on either desktop or mobile devices. On desktop, they appear as alerts in either the top right or bottom right hand corner of the screen. On mobile devices, mobile push notifications look virtually the same as push notifications sent from apps.

To receive browser push notifications, web page visitors will need to subscribe to them on your site. This web push notification example shows how this looks like.

To receive push notifications, customers need to sign up on your website. A two-step sign up process (as shown above) ensures a better quality subscriber base.

Sent via a web site, or a web app, one of the benefits of web push notifications is that these content rich messages can be delivered to your user’s device (desktop or mobile), even when that user is not on your site. Browsers that support web push notifications are: Chrome, Firefox, Safari, Opera, and Edge.

Difference Between Web and App Push Notifications

No doubt you’re familiar with app push notifications. These are notifications sent from any apps that you have downloaded onto your device. But there are some key differences between web and app-based push notifications:

• Need for a company app: Clearly the biggest difference between web and app-based notifications is that for app push notifications your company or store needs to have an app which your customers download. So, if you only have a website, then web push notifications are your only option.
• User reach: Web push notifications have another big advantage - they can reach users on desktop. Mobile app push notifications work on tablets and phones, provided the app is downloaded onto these. But web pushes work through opt-in browsers prompts, which means any device that has the browser installed on it can receive web push notifications, including desktop. For example, if a customer has Chrome installed on their smartphone and computer and they sign up to your web push notifications, they will receive these messages through the Chrome app on both their phone and their browser. This means that web push notifications have a higher chance of reaching your audience, whatever device they are using.
• Device feature integration: App push notifications can make use of a lot more device features such as cameras, GPS, accelerometers, compass, contact list etc. These can’t be used with web push notifications yet.
• Rich Media: Images, videos, gifs, audio and other interactive media can only be used with app push notifications at the moment. Web push notifications can support large images, although on Chrome this is limited to Chrome 56 and above.

What Are Web Push Notifications Used For?

As web push notifications are sent directly to your user’s device, they are easy to see and simple to respond to. This makes them an effective way for you to keep your audience engaged, even when they are not on your site.

Push notifications are highly visible and easy to respond to on mobile or desktop

And because they can be sent immediately and directly to your users, they are perfect for time sensitive marketing, like notifying customers of abandoned carts.

Here are some of the most common uses cases for Web Push Notifications:

For ecommerce:

• Retargeting abandoned carts
• Delivering personalized content
• Engaging users

For Content Publishers:

• Welcoming your audience
• Recovering lost video watch time
• Recovering lost website browse sessions

How Are Web Push Notifications Displayed On Different Browsers and OSs?

Studies have shown that one of the greatest advantages of web push notifications is that they "send a push" directly to the user even when they are not on the website. Notifications are sent to the user’s browser and appear next to the taskbar. Here’s how Safari, Chrome, Android and Firefox display them:

Safari Push Notifications

OS X Maverick was the first OS to provide web push notification functionality. Messages are sent via the Apple Push Notifications Service to your users’ Mac desktop, even when their Safari browser isn’t running. Messages can include an icon and message that users can click to gain direct access to your website. Messages are displayed in the MAC OS Notification Center. It is important to note that so far Safari Push Notifications can only be delivered to Mac and not iPhone (although this functionality is coming).

Web push notifications appear on Macs even when the Safari browser isn’t running, and are highly visible for users

Chrome Push Notifications

From Chrome 59 onwards Chrome Push Messaging became native. This means they became more visually integrated into the media format they appear. This is most clearly apparent in the way that Chrome 68 integrates with Windows 10, with notifications being directly delivered to the Windows Action Center.

Android push notificationsWeb push notifications on Chrome are clearly displayed in the bottom right corner of your users’ desktop

On Android devices, the mobile push notifications are shown in the notification tray. This means they have the same visibility as app notifications.

Firefox push notificationsOn Android mobiles, mobile push notifications display just like a notification from an app

Web push notifications are displayed on the right hand side of the Firefox browser.

Opera push notificationsWeb push notifications on Firefox are eye catching, popping up on the right hand side of the screen

On Opera, push notifications are displayed in the top right hand corner of your desktop browser.

Microsoft Edge push notificationsThe Opera browser displays web push notifications prominently in the top right hand corner of the desktop screen

Push notifications are shown on Edge in a large pop-up in the bottom right corner of the browser screen.

With Microsoft Edge, customers will see your web push notifications in the bottom right corner of their desktop monitor

Remember, users can only receive web push notifications if they have already opted into the service and gave permission to send notifications

Different Elements of a Web Push Notification

Each push notification consists of 6 essential elements. These are the Notification Title, Notification Description, Notification URL, Notification Icon, Banner Image and a Call to Action Button. It’s really important to note that the last two features are only available on Chrome.

From smart titles and compelling copy through to eye-catching visuals, there’s a lot to consider when composing your web push notifications

Here’s a more detailed breakdown:

• Notification title: A lot of brands choose to only use their names here. But a catchy title to grab attention will probably be more effective.
• Notification description: Although push notification character count varies from browser to browser, the rule is simple - the shorter, the better. Your copy should catch the user’s eye and hook their interest.
• Notification URL: This is the website domain that has sent the notification.
• Notification Icon: You can choose to use your logo or an image here. The default icon for this is usually a bell. It is a good idea to insert your logo as this will help you to distinguish your message from the barrage of notifications your users receive on a daily basis. It also means you don’t need to write your brand name in the title, freeing up characters for a more captivating message. We recommend that your icon should be 100*100px and less than 20kb in size.
• Image: Banner images came in with Chrome 56 and above. On top of having a catchy message, adding a banner will really help you generate more clicks. So it’s important to take advantage of this feature.
• CTA Buttons: At present this can only be used in Chrome Web Push notifications. Neither Safari nor Firefox support this yet. You can include up to 2 CTA buttons in a message, and can use these buttons to trigger a number of actions.

Michael Pennock

Michael is a professional copywriter and trainer. He has written extensively on consumer electronics, e-commerce, fintech and many other subjects. When he is not writing copy, Michael writes music and also enjoys playing football and reading history books.