Let’s begin this discussion by unpacking the phrase “web push notifications”.
Typically, on the web, information is provided to the user on-request. That is to say, it relies on a pull based protocol - the user (i.e. the ‘client’) “pulls” the information in when they want it.
A push based protocol is different. The server, not the client, determines the timing of the information transfer. WebSockets are an example here. They make features such as instant-messaging possible, preventing the need for the user to keep refreshing the page in order to see the latest state of the chat. So long as the user has the page open, the UI will reflect the current server state thanks to the server pushing updates as and when they occur, rather than waiting for the client to ask for them.
Push notifications are the natural choice of UI for when 1) there is time-sensitive information in the user’s interest that hasn’t been explicitly requested, and 2) the user doesn’t necessarily have the application UI open in order to see the live updates come through. So long as time-sensitive information requirements exist, and so long as your users have other things vying for their attention than to stare constantly at your application UI, notifications will be a necessary form of communication.
Notifications are arguably a more natural form of communication on mobile than on desktop. The key justification for carrying a device in your pocket around everywhere you go is in order to stay receptive to timely information. Otherwise you would leave it at home. Ringtones are to phone calls, as notifications are to information more generally.
So those are push notifications; a form of information transfer that is particularly prevalent and/or natural on mobile. What are web push notifications?
Ask yourself: of the notifications you have received today on your phone, how many were sent by native apps (i.e. downloaded from App Store in case of iOS, or Google Play store in case of Android). The most likely answer right now is “all of them”. That is to say, the ability to send users push notifications has typically been an affordance enjoyed only by native apps.
What if I told you that websites could send push notifications on mobile, including iOS?
As a web-developer and iPhone-owner myself, I would say that this sounds a lot like good news. I love developing for the web. I love the fact that for the most part, I don’t need to worry about what operating system a user is running or what other software they have installed, only that they own a modern browser with which to view my link. Startups love it because it is a natural distribution platform - think how quickly Figma took over the design world all thanks to the power of the web and the simple “shareability” of URLs. It’s thanks to the web that I am communicating with you right now. I don’t know how to write Swift, or Objective C or Java, and at this point I’m not sure if I want to.
But at no point in my Javascript-dabblings did I ever expect to have any control over what appears on the lock screen of a user’s iPhone, for instance. If I needed to build some software that relied on timely communication with my users via mobile and required any kind of alerts, my first instinct would be to try something like React Native and interact with their operating systems directly.
In a somewhat under-appreciated move by Apple, for just over a month now this is no longer the case. Now, a user need only visit my website, click “Add to Home Screen” (thus turning it into a PWA) and a whole new channel of consensual communication becomes available to us both. This process is done through the Safari browser or mobile Safari, where the user taps the share button in the share menu to add the site as a home screen web app. A form of user interaction heretofore enjoyed exclusively by native app developers can now be enjoyed by me, a web developer.
During my foray into this world of web push notifications and bleeding-edge iOS features, I built a demo that should serve as a simple proof-of-concept. You can run it successfully on desktop or Android, but it’s only iOS for which this represents anything particularly cutting-edge. On iOS, web push notifications (ios web push notification) work in the Safari browser environment, but require web apps added to the home screen; when the web app opens from the home screen, it behaves like a native app. I wanted to ensure that it included lots of instructions and feedback, and if all goes well it is likely to be the first time you will have ever received a push notification from a piece of software that hasn’t been pre-installed or downloaded from the App Store.
The code for this demo is also open-sourced here: https://github.com/magicbell-io/webpush-test. It demonstrates usage of the various Magic Bell client libraries that make this type of thing all the more easier - including a pre-written Service Worker precisely built for this type of use case.
When you add a web app to your home screen, it gets its own app icon and can receive notifications. The Badging API allows you to set a badge count on the app icon for unread notifications, and users can manage these badge counts and notification permissions in their device's notifications settings.
From a technical perspective, implementing web push notifications involves using the Push API and feature detection to check for browser support, and integrating a push service or web push service to handle notifications across different browsers, including other browsers like Google Chrome.
The opt-in process for notifications can be optimized by using push permission prompts based on user behavior, such as page views and time spent on site. You can use a custom prompt, native browser prompt, or bell prompt to increase opt ins and improve the rate of requesting opt ins.
To enable notifications, users must grant permission through a permissions request. The process to subscribe users involves prompting them to allow notifications and then add web push to your site, so you can handle notifications effectively.
Web push notifications appear directly on the mobile screen, supporting mobile web push notifications and mobile web notifications for iphone and ipad devices, ipad devices, and any ios device, making them a powerful engagement tool.
Importantly, joining the Apple Developer Program is not required to implement web push notifications, and this capability became available with the first beta releases of iOS web push notification support.
When considering your audience, it's worth noting that iOS users often have higher purchasing power for technology products compared to Android users, but Android users represent a significant and distinct market segment.
Finally, web apps added to the home screen can behave like other app, supporting push notifications, badges, and app-like experiences for users.
What was Apple’s intentions in releasing this feature in iOS 16.5? Could this lead to less native apps being developed? If this article resonated with you, let us know your thoughts on Twitter @magicbell_io and let’s get the conversation going!
Introduction to Web Push Notifications
Web push notifications have become an essential tool for websites looking to keep users engaged and informed, even when they’re not actively browsing the site. Unlike traditional notifications that require users to have a native app installed, web push notifications allow any website to send timely updates directly to a user’s device. This means that whether your users are on their desktop or mobile device, you can reach them with important messages, offers, or alerts—helping to drive conversions and boost user retention.
Until recently, this technology was mostly limited to desktop browsers and Android devices. But with the latest updates, it’s now possible to send web push notifications on iOS devices, including iPhones and iPads. This breakthrough means that websites can now engage iOS users with push notifications on iOS, expanding the reach and effectiveness of web push. In this article, we’ll dive into how web push notifications work, the benefits they offer, and how you can set them up to send notifications to your users on iOS devices.
Why iOS Support is a Game Changer
The arrival of web push notifications on iOS devices marks a major shift in how businesses and developers can connect with their audience. With iOS holding over half of the US mobile market and a significant share globally, the ability to send web push notifications directly to iPhones and iPads opens up a massive new channel for engagement. Previously, only native apps could send push notifications to iOS users, which meant that websites had to convince users to download an app just to stay in touch.
Now, with iOS support for web push, any website can send push notifications to users’ devices, even if they don’t have a native app installed. This levels the playing field, allowing web apps and websites to compete with native apps for user attention. Businesses can now reach their iOS users with timely updates, reminders, and personalized messages, all through the browser. This not only increases opportunities for engagement and conversion but also helps drive customer retention and loyalty. For developers and marketers, web push notifications on iOS represent a powerful new way to connect with users—no app store required.
How Web Push Notifications Work on iOS
Web push notifications on iOS devices function in a way that’s both familiar and unique. When a user visits your website, you can prompt them to subscribe to push notifications. However, iOS adds an extra layer: users must add your website to their home screen, turning it into a home screen web app. This step is crucial, as iOS only allows web push notifications for web apps that have been added to the home screen through direct user interaction.
Once the user has added your site to their home screen and granted permission, your website can send push notifications that appear just like those from native apps—on the lock screen, in the notification center, and as badges on the app icon. This means your messages can reach users even when they’re not actively browsing your site, keeping your brand top-of-mind. The opt-in process is user-driven, ensuring that only those who want to receive push notifications on iOS will get them, which helps maintain a positive user experience and high engagement rates.
Setting Up Push Notifications on iOS Devices
Getting started with push notifications on iOS devices requires a few key steps. First, your website needs to be a Progressive Web App (PWA), offering users an app-like experience right from their browser. Your site must be served over HTTPS with a valid SSL certificate to ensure security. A service worker—a background script that handles push notifications and other offline features—must be registered on your site.
To send push notifications to iOS devices, you’ll also need to integrate with the Apple Push Notification service (APNs). This involves registering your web app with APNs and obtaining a unique identifier, which is used to route notifications to the correct device. By meeting these requirements, your website can start sending push notifications on iOS, allowing you to engage users with timely updates, reminders, and alerts—just like a native app, but without the need for an app store download.
Enabling Push Notifications for Your Webpage or Web App
Enabling push notifications for your webpage or web app is a straightforward process that brings your site closer to the native app experience. Start by creating and registering a service worker, which will handle the delivery and display of notifications in the background. Next, add a manifest file to your website, including important metadata such as your app’s name, icon, and a “display” member that defines how your web app appears on the user’s device.
To request permission for push notifications, you’ll need to prompt users through a direct interaction—like clicking a subscribe button—ensuring they’re actively opting in. Once permission is granted, your web app can use the Apple Push Notification service to send notifications directly to the user’s device. By following these steps, you can enable push notifications for your web app, keeping your users engaged and informed on iOS devices, all while leveraging the power and reach of the web.