The first thing to do in order to subscribe a user to notifications is to ask for permission.
Notifications are consider a powerful feature, and thus the browser always displays a permission prompt before subscribing a user to notifications.
This is not only a legal requirement for privacy (similar to a GDPR-consent banner), but a technical requirement imposed by browsers.
The easiest solution for a website is to call PushManager.subscribe():
serviceWorkerRegistration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: applicationServerKey
}).then(function(pushSubscription) {
// save the subscription in the backend
});
That function will try to subscribe the user, but, if permission is not granted yet, it will also display the permission prompt to the user.
Example: the permission prompt for web push notifications displayed by the browser (Chrome) when you visit Pushpad.
The user can accept or refuse the notifications. Note that if he doesn't accept, it won't be possible to request the permission again. This is why a double opt-in (custom prompt + permission prompt) is always recommended.
Obviously, even if the user has blocked the notifications, he can always change his mind: in this case he has to manually change the permission for the website from browser settings.
Alternatively, if you only want to display the permission prompt for notifications, but not subscribe the user immediately, you can use Notification.requestPermission():
Notification.requestPermission().then(function(permission) { /* … */ });
Note that the permission for web push notifications can have three different states:
- default
- granted
- denied
When a user first visits a website the permission status is usually set to default. I say "usually", because if there are some exceptions where the default is "denied", like a user disabling the notifications for all websites (e.g. on Brave) or a user surfing in incognito mode.
If you use Pushpad you don't have to worry about the permission prompt directly: it is managed automatically by Pushpad. You can simply call pushpad('subscribe') and forget about the permission. If you need to know if a user is subscribed to notifications, you can call pushpad('status').
Basically Pushpad hides the low-level complexity of permission management and only has two states (instead of three):
- the user is subscribed to notifications
- the user is not subscribed to notifications.
Pushpad also makes it easy to implement a double opt-in (custom prompt) for web push notifications with a single command: you can simply call pushpad('widget'). If you prefer, you can also build a custom UI using pushpad('status') and pushpad('subscribe').
You can learn more about Pushpad by reading the documentation about the Pushpad JavaScript SDK or check out the examples.