How do Web Push Notifications Work on Mobile Devices?

How do the Notifications Appear on Mobile Devices?

Used by more than eight percent of top websites, web push notifications are a widespread and effective communication channel. These messages offer a critical mechanism for websites to reach their users with timely and personalized messages.

Web push is used by companies with websites desiring to connect with users to drive greater engagement and conversions as well as to improve the digital user experience —even after a user has left their website.

These messages are displayed on a visitor’s desktop, tablet, or mobile device when they have their web browser open. When a user clicks on a web push notification, they are sent to a URL the company has defined. When displayed on desktop, web push notifications appear as a popup on the side of a user’s screen and are also stored in a computer’s notification center. On mobile devices these notifications appear similarly.

Getting Users to Engage on Mobile

Web notifications are sent via a web browser to user’s device. Because web push are sent through a web browser, they cannot be seen by a user unless their browser is open. Mobile push notifications take a different path to delivery than web notifications, as they are sent directly to a device’s operating system (iOS, Android) and are contingent on your company having a mobile application. Mobile push notifications are only viewable on a mobile device, whereas web push notifications can be transmitted via desktop or mobile. However, unlike mobile push notifications, which are delivered to a user’s lock screen regardless of whether they’re active, web push notifications are only seen by users who are currently active on the device In question. Nonetheless, they are a critical way of reengaging users who are active on the device but may be engaged with or distracted by another activity.

In order to begin sending web notifications, companies must first integrate with a web push service. Generally, companies choose a third-party notification provider to do so. Sending these messages is supported by popular browsers such as Chrome, Firefox, Safari, Edge, Opera, and more. The appearance of web push differs across browsers. Some allow more freedom to include images and other elements.

How Does Opt-In Permission Work?

The web push channel is supported by Android and iOS devices. Some browsers that currently support mobile push notifications include Chrome and Firefox on OS, Windows, OS X, Safari on OS X, and more.

The protocol for subscribing to mobile web push on supported browsers is the same as it would be for desktop web push, aside from minor differences in the following:

1. How custom web permission prompts are displayed
2. How the native browser permission prompt displays — it takes up the full screen on mobile

On iOS, users must also add an app to their home screen in order to subscribe to web push notifications.  

How to Send Web Push Notifications on iOS and Android

Creating a Custom Permission Prompt & Delaying the Native Prompt

In order for users to actually receive these alerts via their mobile browsers, they must first give their permission to receive your mobile web push communications. Companies can request permission through a browser’s native permission prompt, which appears immediately when users click on your site.

However, if you’re hoping to be more strategic and tactical in gaining subscribers, you may decide to delay this permission request and create a custom prompt (eg a pre-permission prompt) in order to demonstrate the value of this channel and provide essential context before the native prompt appears. This context is especially important for iOS web push given the unique opt-in process.

If you decide to delay your opt-in, use that extra time to showcase your top features and products. Make sure to include a compelling reason for users to subscribe, such as receiving breaking news headlines from your news site.

In addition, make sure to prompt your users at a relevant time, optimizing for their timezone and typical usage patterns. You can also base your timing on their on-site behavior, like page time or number of pages browsed. Delaying the web push permission prompt until a visitor has viewed a certain number of site pages can increase the likelihood of opt-in.

What are the Elements of a Web Push Notification?

Web push notifications often include a title, body content, a notification URL, a banner image, a browser icon, the web domain, and action buttons. These messages appear differently across operating systems and browsers. Although these notifications are small in size and content, brands put thought into their notification strategy to convey the right message, visuals, and calls-to-action (CTA’s) at the right moment in time.

Is Web Push Supported by iOS?

Although Apple was late to the game, at WWDC22, they announced support for web push on iOS and iPadOS devices with the release of iOS 16. Learn more about how iOS web push is changing the game for web-first companies.

How to Configure Web Push for Mobile

In order to send mobile push notifications, companies must first install a web-based SDK from a web push service on their site. Generally, you’ll want to ask a tech-savvy member of your team to first register the service worker on the browser in question.

Push notifications make use of two APIs: a notification API and a push API. Every browser uses a different notification delivery service to deliver web push notifications.

Chrome uses Firebase Cloud Messaging (FCM), Safari uses Apple Push Notification Service (APNS), and Firefox uses MDN Servers.

Finding a Web Push Provider

OneSignal is designed to help you send notifications and seamlessly manage your user communication across a variety of channels, including web push. We provide built-in support for Chrome, Safari, Firefox, and other top web browsers and mobile operating systems so you can engage your entire audience across every platform without doing any development work.

Get Started with OneSignal

With OneSignal, you can send web push notifications for free on desktop and mobile devices. The best part? It's free. Create an account to discover why we're the most popular global messaging solution.