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.

For example an application for ambulance drivers or for internal use inside an organization can force the employee to subscribe to push notifications in order to receive important updates.

Disclaimer: Before preceding make sure that you are compliant with privacy laws (like GDPR)! Usually it is not acceptable to force a generic user to subscribe to the notifications. Also, your website may get a penalization from Google.

The easiest way to achieve that is to prevent users from using the website until they have subscribed to the notifications. In this example we will use the Pushpad Javascript SDK to subscribe the user to the notifications: in case they do not grant the permission, we display a full-page overlay that prevents the usage of the website and asks the user to grant permission for push notifications.

pushpad('subscribe', function (isSubscribed) { 
  if (!isSubscribed) {
    $('#overlay').show();
  }
});

<div id="overlay">You must allow push notifications from your browser preferences.</div>

#overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.5;
  z-index: 99999;
}