In order to optimize the number of people that subscribe to your notifications, you need to use the right user interface (UI). It’s also important to design a good user experience (UX), so that the notification prompt is perceived as something useful for the user and not as an annoyance. In this post we’ll analyze different approaches and user interfaces that are useful to ask users to subscribe to web push notifications.
permission
Web push notifications from iframe
Is it possible to subscribe the users to web push notifications from an iframe?
Web notifications in incognito mode
Is it possible to subscribe to notifications when surfing in incognito mode or with private browsing (e.g. on Chrome, Firefox)?
Reset the denied permission for notifications (undo “Block”)
What can you do if a user blocks the notifications on your website by clicking the “Block” button in the permission prompt? How can you reset that choice? How can you display the permission prompt again?
Request permission for web push notifications
The first thing to do in order to subscribe a user to notifications is to ask for permission.
Does Brave browser support web push notifications?
Brave is a privacy-focused browser, with a small market share, and you may be surprised to learn that it supports web push notifications.
Silent push: sending web push messages without displaying notifications
When you hear “web push” you probably think about notifications… but that is not necessary true. In theory, the web push technology could be used for delivering messages or updates to the web app, without displaying a notification to a user.
The notification prompt can only be triggered by a user gesture on some browsers
On some browsers, the permission prompt for notifications can be displayed only after a user interaction with the website. Let’s see why some browsers enforce this rule, what happens if you don’t comply with it and how can you implement a solution that works across all major browsers.
Chrome blocks the notifications on abusive websites
Chrome 84 will fight abusive notifications. Let’s see what you should do to stay complaint and avoid the penalization.
The double opt-in (prompt) for web push notifications
Browsing the web, you may have noticed that most websites use a double opt-in process for subscribing the users to notifications. Basically these websites first show a custom prompt (designed with HTML / CSS) that asks you if you are interested in the notifications, then, when you click the subscribe button, they display another prompt (with native appearance) asking you if you really want to allow the notifications from the website. Isn’t one prompt enough?
The new Pushpad widget for web push notifications
We are happy to announce that we have just released a new feature in our Javascript SDK: we provide a widget that makes it easy to display a custom prompt, a floating action button or a subscribe button in order to collect subscribers.
Display the prompt for web push notifications multiple times
Usually the prompt for web push notifications is displayed only once, the first time that the user visits a website. What if the user blocks the notifications? Is there a way to show the notifications prompt when the user visits the website again?
Force the user to subscribe to web push notifications
Forcing the user to subscribe to push notifications is probably not a good choice for most websites. However there are some specific situations where it makes sense to do that.
Turn website notifications on or off
You can change your notification preferences for a website at any time. You can allow or block the notifications using the browser preferences:
Reset browser permission for web push notifications
Many issues related to web push notifications can be solved by simply resetting the browser permission. That removes the old browser subscription and creates a new subscription.
The Push API and its wild unsubscription mechanism
The working draft of the Push API currently doesn’t offer a good way to manage unsubscriptions.
The problems arise in the following scenarios:
- The user blocks the notifications from the browser preferences
- The endpoint is replaced because it has expired