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

Browsers are the gateway to the internet. In the pre-smartphone era, the browser was the only gateway. With 91% of the world population owning smartphones today and with the proliferation of mobile applications, there are many avenues to access the internet. Mobile apps make it easier to interact with digital tools and brands. They allow a seamless experience tailored to the mobile device. The key piece of technology that mobile applications have is notifications.

Notifications are essentially snippets of information placed prominently on the screen along with alerts to the user. They offer different avenues for engaging with an app's users. Marketers also rely on notifications to increase sales and brand visibility.

Browser Notifications

Earlier browsers lacked notification technology, but it was later introduced with the Google Chrome version 42 update. Today, all mainstream browsers support notifications. A browser push notification is simply a notification that can be sent by web applications and websites. The messages are received by the user's browser client. Web push notifications can be sent even when the particular website is not actively in use.

Web push notifications offer the same functionality as the notifications in mobile applications. They can be sent to the mobile versions of popular browsers, too. Notifications to the web app and mobile app can be integrated such that the web push notification messages are delivered to the device actively in use. Marketers love push notifications and commonly use browser notifications to:

• Convert more users
• Increase user engagement
• Retain users
• Send targeted messages
• Build brand value

Sending browser notifications to any of the available browsers requires secure HTTPS certification for the web server. Another common requirement across browsers is that developers can send notifications only if the user has explicitly given permission to receive browser notifications. The following sections deal with how browser notifications work in the most commonly used web browsers.

Chrome Notifications

Google Chrome has over 65% (as of August 22) of all global browsers using it. It was the first internet browser to implement a notification system that works similar to notifications on a smartphone. Developers can configure notifications to deliver to the Google Chrome browser using Firebase Cloud Messaging (FCM), previously known as Google Cloud Messaging.

The server on which the web app/site is hosted has to be linked with the FCM service. Application developers can access Firebase Cloud Messaging free of charge if they only use it to send push notifications. Here's how browser notifications work in Chrome:

1. The website sends an intimation to the FCM push service.
2. FCM creates a push event and sends the information to the respective service worker on the web browser.
3. The browser sends a fetch call to the server on which the website is hosted.
4. The website sends the content of the notifications to the browser.
5. Google Chrome pushes the notification with the content sent from the web server.

Safari Notifications

Safari is the second most popular browser, with roughly 18% of the world's market share. Integration with Apple Push Notification service (APNs) is essential to send browser notifications to the Safari browser. APNs are the common notification system for all Apple devices and software. Safari, being a web browser from Apple, uses the same APNs system to send browser notifications. Detailed documentation and an explainer of how to work with APNs are available on the Apple developer website.

Firefox Notifications

Firefox is the fourth most popular browser. Firefox supports browser notifications in all forms. The only difference between the notification system in Mozilla Firefox is that notifications cannot be displayed for websites that are not active. Firefox also requires users to opt-in to receive browser notifications. The Firefox browser notification push API adheres to W3C standards. 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.

Microsoft Edge Notifications

Edge is the third most popular browser. Edge is a browser that is packaged with Windows. It is available on other platforms too. It replaced the Internet Explorer browser that used to be bundled with Windows OS, and it's been increasing in popularity in recent months. Edge is built on the Chromium engine and shares many features with Google Chrome. The push notification system used with Edge is borrowed from Mozilla and works similarly to browser notifications in Firefox.

Opera Notifications

Opera is the sixth most popular browser in use. Recent iterations of the browser use the Chromium engine and share most of the features with Google Chrome. Opera relies on the operating system's native messaging system to send notifications. Opera's notification system is implemented with the W3 specification, just like Firefox.

User Mobility

Application developers have to adhere to the different notification standards of various platforms. This helps consumers switch easily between multiple platforms: desktop, mobile, and web. With browser notifications, developers can send notifications across different platforms seamlessly.

When switching between different platforms, consumers may miss notifications that are received on different devices. But what if all the notifications could be accessed from various platforms? The ideal solution is to integrate an inbox with the application, so all notifications are collated in one place. This happens whether the notifications are sent to the browser, mobile app, or desktop. This should be real-time, with the platforms able to recognise if something has been read on another device - marking that message read across all platforms. Achieving this requires some effort and work of engineers. Not only to build out the system but to put thought behind how it should work for your business. After that, it also needs to be maintained and updated.

Introducing MagicBell, the inbox solution developers can integrate with their applications in minutes. MagicBell's inbox can aggregate all the messages sent to users. Additionally, users can also select the type of messages they want to receive for a custom notification without needing to define browser settings. All done real-time across all platforms you have integrated it with. The notifications are not limited to in-app or browser. You can also avail of email, SMS and Slack should you choose to enable them. An integrated inbox solution is a win-win for both developers and users. It is the future of real-time engagement and ensures your notifications can be read even if they arrive when your user does not have time to interact with them.