Browser Notifications: What Are They, and How Do They Work?

Ninety percent of the world’s population owns a smartphone, giving users infinite avenues to access the internet.  Mobile apps make it easier to interact with digital tools and brands, allowing for a seamless experience tailored to each person’s device.

But there are almost as many apps out there as there are stars in the sky. Nobody checks all their apps every day, which is why notifications are so important. Notifications are snippets of information that display prominently on the screen to alert the user about something, giving them different avenues for engaging with your app.

But what if you don’t want to build an app to send these notifications? What do you do then?

It’s time to take things back to the pre-smartphone era with browser notifications. This type of notification is a smart way to increase sales and brand visibility to both desktop and mobile users—without the need to download an app.

In this guide, we’ll explain how browser notifications work, break down the ins and outs of the most popular browser notifications, and share expert best practices for designing effective push notifications that convert.

What Are Browser Notifications?

A browser push notification is a notification sent to a user’s device by a web application or website. Web push notifications essentially have the same functionality as mobile app notifications. In fact, you can integrate notifications for web and mobile apps so the system pushes notifications to whichever device is actively in use.

Why Browser Notifications Are Still Relevant

When you think of notifications, app notifications probably come to mind first. While mobile app notifications definitely have a place in your integrated communications strategy, browser notifications come with unique benefits. Adding browser notifications to the mix allows you to:

• Increase user engagement
• Directly communicate with users—even when they aren’t on your website
• Send real-time updates
• Increase website traffic
• Boost website conversion rates

Not all users are willing to download an app, after all. Offering browser notifications gives you another avenue to reach app-resistant users who still want to engage with your brand. As long as you make the notifications worth their while, these users will reward you with traffic, conversions, and (hopefully) long-term loyalty.

How Web Push Notifications Work

The exact process differs by browser and operating system, but most push notification systems require you to supply some kind of technical infrastructure for everything to run correctly.

Sending browser notifications requires a few things, including:

• HTTPS certification: All browsers require you to provide a secure HTTPS site certificate. This is a website best practice anyway, but it’s a must-have for browser notifications.
• VAPID: Voluntary Application Server Identification (VAPID) requires you to create public and private keys that establish a secure connection between your application server and the push service.
• Backend services: Developers set this up using various programming languages and frameworks, which handle the logic for sending push notifications.
• Service workers: This is necessary for handling push notifications. The service worker runs in the background, acting as an intermediary between your web application and push service. When you send a notification, the service worker intercepts it and takes action, whether that’s showing a notification or taking users to a specific page.
• User permission: You must ask users for permission to send push notifications. This usually involves displaying a prompt where the user can tap “Accept” to grant consent. Once they subscribe, the system uses the user’s device ID and your VAPID key to send notifications.

Chrome, Firefox, Opera, and Safari all support web push notifications, although with varying degrees of functionality and aesthetics. Safari tends to have more limitations and privacy requirements, but it’s still a popular browser for push notifications.

Sending Notifications from the Five Most Popular Browsers

Google Chrome is the browser most people are probably familiar with, but it’s far from the only game in town. Let’s look at the nuances of sending notifications from the five most popular browsers.

1. Chrome Notifications

As of December 2023, Google Chrome owned 65% of the global browser market. That means over 3 billion people use Chrome, making it the most popular browser on the planet. Chrome also has the distinction of being the first internet browser to implement a notification system that works similarly to notifications on a smartphone.

It’s pretty simple to send notifications over Chrome, too. Developers can configure notifications to deliver to the Google Chrome browser using Firebase Cloud Messaging (FCM), previously known as Google Cloud Messaging. To send messages, you have to link your web app or site server to the FCM service.

Best of all, you can access Firebase Cloud Messaging for free, as long as you only use it to send push notifications. Here’s a quick overview of  how browser notifications work in Chrome:

• The website sends an intimation to the FCM push service.
• FCM creates a push event and sends the information to the respective service worker on the web browser.
• The browser sends a fetch call to the website’s server.
• The website sends the push notification content to the browser.
• Google Chrome pushes the notification content from the web server to the user’s device.

2. Safari Notifications

Safari is the second most popular browser, with roughly 18% of the world's market share. Apple has more requirements than Google, so developers have to integrate their apps with Apple Push Notification Service (APNS) to send Safari browser notifications.

All Apple devices and software require APNS for notification systems, whether you’re sending messages from a browser or mobile app. APNS is more complex than FCM, so check Apple’s latest documentation for developing push notifications for Apple users.

One important caveat regarding Safari browser notifications: With the release of iOS 17.4, Apple no longer supports Home Screen web apps, known as Progressive Web Apps or PWAs, for users in the EU in order to comply with the Digital Markets Act (DMA). So, while you can send Safari browser notifications, they won’t reach your EU users on mobile. 

3. Microsoft Edge Notifications

Edge is the third most popular browser. It’s packaged with the Windows operating system, where it’s the system default, but Edge is also available on other systems, too.

If Edge sounds new to you, that’s because it replaced Windows’ old Internet Explorer browser. Its popularity still pales in comparison to Chrome and Safari, but Edge has been increasing in popularity.

Microsoft built it on the Chromium engine, giving the browser many of the same features as Google Chrome with the benefit of surfing the web with a Microsoft product.

As far as development goes, Edge borrowed Mozilla’s push notification system. If you know how to push messages in Firefox, you can do it in Edge.

4. Firefox Notifications

Firefox might not be the most popular browser in the world, but it supports all forms of browser notifications—with one big caveat. Unlike browsers like Chrome, Safari, and Edge, Firefox can’t send push notifications for inactive websites.

That’s a big bummer since users have to be actively visiting your website to get notifications, limiting the benefit of sending notifications in the first place. Like Apple users, Firefox users must also opt in to receive browser notifications.

The benefits aren’t as good, but it’s still worthwhile to set up Firefox push notifications. This browser API adheres to W3 standards, so you’ll need to familiarize yourself with these requirements.

W3C "is an international community that develops open standards to ensure the long-term growth of the Web." W3C standards are open in nature, meaning they can be adopted or modified by anyone without any licensing fee.

5. Opera Notifications

Opera isn’t very popular, but many users like this browser’s security features. Recent iterations added a Chromium engine to Opera, giving it more Chrome-like features that users love.

Opera relies on the operating system's native messaging system to send notifications. Like Firefox, Opera's notification system is implemented using the W3 specification.

Five Tips for Designing Actionable Browser Notifications

Users receive an average of 80 app notifications per day—and that’s a lot! While opting for browser notifications will definitely improve user engagement, your notifications still need to stand out from the crowd.

Follow these best practices to design engaging, compliant browser notifications that turn heads for all the right reasons.

1. Optimize Opt-Ins

Opt-ins are a must for legal compliance, but you actually have a lot of freedom to customize the opt-in process how you see fit.

Before presenting the user with an official browser prompt or pop-up, do a “soft ask” first. It’s a less intrusive way to gauge someone’s interest before disrupting their experience with a pop-up.

A soft ask could be as simple as a message on your site explaining the benefits of opting in. It’s a small step, but it can actually lead to higher opt-in rates because it gives users more context before asking for a commitment out of the blue.

Of course, timing matters, too. Don’t ask people for permission immediately after they land on your site. They just met you, after all.

Wait until they engage with your site first. Set rules to display the opt-in after a user reads an article, browses products, or spends a certain amount of time on the site.

This strategy is more effective because users who have already found value in your site are more likely to want updates or notifications.

2. Create Engaging Messages

Push notification content is critical to engagement. As a general guideline, keep titles under 60 characters and messages under 120 characters. If appropriate, convey a sense of urgency or timeliness to get subscribers to take action quickly.

Personalization is also a must. Gather user data to write personalized messages that make it feel like you’re having a one-on-one conversation with subscribers. Most push services use data on customer shopping history, browsing habits, and more to customize their experiences.

Once you’ve created your messages, see how they work with MagicBell’s Web Push Notifications Demo. It tests standards-based web-push notifications on all platforms—including iOS.

3. Watch Your Messaging Frequency

More notifications might seem better, but in reality, that’s going to drive your subscribers away. Excessive notifications lead people to unsubscribe or disable notifications altogether, and you definitely don’t want that.

Strike a balance. Notifications should be frequent enough to keep users informed and engaged, but not so frequent that they become a nuisance.

Start with a lower frequency and gradually increase based on engagement and feedback. You can always personalize frequency based on user engagement data, chatting more frequently with customers who respond well to multiple touchpoints.

4. Always Follow Privacy Requirements

Failing to request opt-ins or protect user data can result in hefty penalties. Build a browser notification system that complies with the General Data Protection Regulation (GDPR) in Europe, the California Consumer Privacy Act (CCPA) in the U.S., and other regional data protection laws.

Privacy laws differ a lot by location, so it’s best to work with a lawyer or compliance officer in your area. If most of your users are in a different location, work with a compliance expert in that area.

It might sound like an extra step, but auditing your browser notifications for compliance will save you the headaches of fines and regulatory action.

5. Monitor, Test, and Optimize

Technology and subscriber preferences will change over time, so regularly analyze notification performance. This includes tracking metrics like open rates, click-through rates, conversion rates, and opt-out rates. Monitoring these metrics helps you understand how users are interacting with your notifications and what impact they're having.

A/B testing, or split testing, is an effective way to compare different versions of notifications head-to-head. You can test variations in wording, timing, frequency, visual elements, audiences, and just about anything else.

It takes a lot of work to set up the technical side of browser notifications, but the user-facing elements still matter. Optimize these notification elements to see which messages get more traction from subscribers:

• Title: The message title should be short, catchy, and relevant. This is the first thing subscribers see, so make it attention-grabbing. Most push notification services require you to keep this at 60 characters or less.
• Content: Play with the push notification messaging to see what resonates most with subscribers. Longer messages tend to get truncated based on device and browser, so again, keep the messaging short. It should only be a teaser of what users can expect once they return to your site or web app.
• URL: This might seem like a small consideration, but adding a URL to the push notification can impact engagement rates. Instead of using a URL shortener, always send URLs directly from your domain to preserve trust.
• Icons and images: Most push services allow you to attach images to notifications. Use a recognizable icon, like your brand logo, to establish credibility. Some services allow you to attach larger images, which can make the notification more appealing and informative. Work with a graphic designer or marketer to create eye-catching graphics that complement the messaging.

Over time, you’ll learn which elements have the biggest impact on performance and design more effective messages for your users.

Support User Mobility With MagicBell

Developers follow different standards for various browsers, platforms, and devices. That’s great for users, who like switching from desktop to mobile to web. With browser notifications, developers can send notifications across different platforms seamlessly.

Browser notifications are a smart solution to multi-platform communications, but they aren’t perfect. Subscribers can still miss notifications from across different devices. But what if they could access all of their notifications in one place?

The best solution is to integrate an inbox with your applications that:

• Collates all notifications in one place
• Updates in real-time, whether notifications go to a user’s browser, app, or desktop
• Recognizes when users read a notification on another device

This inbox setup normally requires a lot of time and resources, but MagicBell puts the technology into developers’ hands in just a few clicks.

MagicBell's inbox aggregates all user messages and allows users to select the messages they want to receive—all without defining browser settings. Collate browser notifications, emails, SMS, and even Slack messages in one place.

Integrated inboxes are a win-win for both developers and users. See the magic firsthand: Create your free MagicBell account to experience the future of real-time engagement.

Frequently Asked Questions

Can browser notifications work on any operating system?

Browser notifications are cross-platform, which means they work on various operating systems, including Windows, macOS, Linux, and mobile operating systems like iOS and Android.

However, a user’s browser needs to support push notifications, which is where compatibility issues come into play.

How do privacy laws like GDPR and CCPA affect browser notifications?

Privacy laws like GDPR and CCPA have significant implications for browser notifications. Most of these privacy laws require companies to have explicit user consent before sending push notifications.

The laws also require securely storing user data and allowing users to opt out of push notifications.

Can browser notifications be personalized for individual users?

Absolutely! Personalization is a key feature of effective browser notifications. You can tailor notifications to suit individual users by analyzing their behavior, preferences, shopping history, and other data points.

However, it’s important to balance personalization with privacy. Always respect user preferences and data protection laws.