What are browser push notifications?

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 (marketing in a coordinated fashion across multiple channels) becomes ever more popular, the unique benefits of browser push notifications can offer are becoming clearer. These include super simple sign ups, cost effective promotional campaigns, ROI-friendly abandoned cart recovery and much more.

So let’s take a deep dive into the world of web push notifications. Here’s what will be covered:

What is a web push notification? How does a web push notification work? What are web push notifications used for? How do browsers display push notifications? What are the different elements of a web push notification?

Example of browser push notification

Browser push notifications are messages that you can send to people who visit your website. These messages can be received on either desktop or mobile devices. Push notifications are based on service workers that are operated in background. 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. In order to receive browser push notifications, web page visitors will need to subscribe to them on your site.

Flyout widget for web push example in puravida homepageTo 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.

New to web push notifications? Book a 15 minute demo to learn more

Book my demo

How does a push notification work, and what’s the 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.

Web push notifications example on desktop and mobile screensPush 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 notification example using MAC Safari browserWeb 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.

Web push notification example using Windows 10 PC Chrome browserWeb push notifications on Chrome are clearly displayed in the bottom right corner of your users’ desktop

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

Web push notification example using Android mobile phoneOn Android mobiles, mobile push notifications display just like a notification from an app

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

Web push notification example using Windows 10 PC Firefox browserWeb push notifications on Firefox are eye catching, popping up on the right hand side of the screen

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

Web push notification example using MAC Opera browserThe Opera browser displays web push notifications prominently in the top right hand corner of the desktop screen

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

Web push notification example using Windows 10 Microsoft Edge browserWith 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

What are the 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.

Web push notification breakdown title, description, website url, icon, image, ctaFrom 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.

See for yourself - try web push notifications for free with Firepush’s FREE Plan

Get FREE pushes

Share

Ready to drive more sales?
Get Firepush today!