Web Push: Turning Annoyance into Engagement
Published: March 6, 2025
#web push | #ux | #typescript
Unlock the potential of web push notifications by prioritizing user experience. Move beyond annoying permission requests and learn how to transform web push into a valuable asset. This post provides actionable strategies for creating a positive and engaging notification experience that users won’t block by default. Explore the building blocks of web push and its implementation details in my post “Web Push under the Hood”.
I created this post after a talk I gave on this topic at the Munich TypeScript Meetup “TypeScript: When Designers & Developers Unite for Effortless UX” on March 6, 2025.
Explore the demo application in my GitHub repository, that I used in the talk to demonstrate the user experience (UX) guidelines discussed in this post.
The Web Push Paradox
Probably most people know that push notifications exist on the web platform. But how many of us really like them or think that they are handy? Most likely only very few of us. Instead, don’t people - myself included - usually reject permission requests for push notifications by default when visiting a website? In my perception, people are very often annoyed when dealing with web push notifications.
But where does this negative perception of web push notifications come from? Mostly this is caused by bad practices. Permission requests that just pop up after entering the page without any context. The absence of configuration options on which topics to receive push notifications and on which not. Things like these make us take the precaution of not granting authorization for push notifications in the first place.
But on the other hand, we can imagine many use cases in which push notifications in general might come in pretty handy: Messaging apps, reminders, weather alerts, personalized updates and so on.
Additionally, we do enjoy the features of push notifications for native apps. Apps that do rely on push notifications to function properly mostly deal with or rely on time-sensitive information (news, finances), real-time interactions (messaging, social media, collaboration tools), location-based services (weather, navigation) or user-driven events (e-commerce). We definitely have these use cases for web apps as well.
It would be a great shame not to exploit this potential on the web platform, as users often feel annoyed by web push notifications overall. So the thesis I propose, is:
Web push is powerful, but UX is key.
Unleashing Web Push Potential
Web Push offers some exciting and promising features for the user experience on the web platform, such as:
-
Direct Communication
With push notifications, you can communicate very directly with your users, omitting the roundtrip via email, which can lead to faster content perception and potentially engagement. And: Users do not have to enter their email address right away. -
Background Functionality
Thanks to service workers, users can receive push notifications regardless of whether the website/ web app is currently open on their device. -
Message Queueing
If a device is currently offline, the push message sent to that client is queued and delivered as soon as the client is online again. This ensures, that no important information is lost. -
Custom Logic and Appearance
You can customize the appearance of web push notifications and also what exactly should happen on a device, when a push notification is received and clicked. -
Good Browser Compatibility
Meanwhile, we have baseline browser compatibility for the Push API, which means that pretty much all popular browsers support it on desktop and mobile.
We want to make use of this potential.
From Annoyance to Delight: UX Guidelines
To send push notifications to your users, you first need their permission to receive notifications. And for that part, a good user experience is key.
If you do not pay attention to a good user experience, you risk getting blocked for notifications on browser-level. But:
You do not want to get blocked for notifications on browser-level, because you cannot ask for permission via your web app again.
So let’s look at some important factors to keep in mind for implementing push notifications that do not just work somehow, but have a good user experience and actually reach the users by not being blocked in the first place.
Permission Request: Tell them why
For the permission request itself, the right context and timing are crucial. Instead of just popping up the request as soon as someone visits your site, give your users context about why they should subscribe to push notifications and what benefits they have from that. Let the browser-level permission request trigger by your users explicitly and intentionally by clicking a button you provide along with the descriptive context.
Subscription Management: Allow Configuration
Give your users the ability to not just enable push notifications, but to have control about it. Therefore, you could allow the users to just subscribe to specific topics or set the frequency of repeating notifications. Make sure, that your users can also disable push notifications.
OS-Level Notifications only when in Background
When a user is currently using your web app the moment you want to send some important information, a push notification on operating system (OS)-level might be overpowered and could instead lead to a bad user experience or even annoying your users. Instead, in such a case you could just show the information in the web app itself, for example by displaying a toast with the relevant information.
Browser Notification Permission: Build expressive UI
You can access the current browser-level notification permission and use its status to customize the notification management UI in your app. This way, you can tell your users, if they - maybe accidentally - blocked the notification permission on browser-level and give instructions on how to change this setting.
Frequency and Timing
Always keep the principles less can be more and quality over quantity in mind, to not overwhelm your users.
Conclusion
Push notifications are a very powerful technology, that is available for us on the web platform. But to really make use of its potential and convince users of the benefits push notifications can have for them, we have to establish a user-centric approach that does not trick users into subscriptions, but makes it explicit, gives the right context and makes push notifications configurable. This way, we will get loyal subscribers and turn annoyance into engagement.
If you are now curious about the building blocks of web push and its implementation details, read on in my post “Web Push under the Hood”.
Resources
In addition to the links provided in the text above, here are some valuable resources for diving deeper into web push: