This recipe shows how to use push notifications with subscription management.

Advanced

Allowing users to subscribe to features of your app allows you to keep in touch with and convert visitors!

After service worker is registered, client is checking if it is already subscribed to the notificiation service. Button's contents is set depending on this.

After successful subscription (index.js::pushManager.subscribe) client sends a post request to application server to register the subscription

Server periodically sends a notification using web-push library to all registered endpoints. If an endpoint is not registered anymore (expired or cancelled) it is removed from subscription list.

After successful unsubscription (index.js::pushSubscription.unsubscribe) client sends a post request to application server to unregister the subscription. Server is no longer sending notification.

Service worker is watching for the pushsubscriptionchange event and resubscribes to the push service.

Subscription might be cancelled by the user outside of this page (from browser settings or notification UI). In this recipe server will stop to send the notifications, but the front-end doesn't know about it. One could periodically check if registration is still active.

Web Push