Pushpad: subscribe prompt only showed up the first time a user clicks on enable button on chrome

Question

Hello,

I already checked the answers from the question PushPad: Subscribe is removed after site refresh, but it did not help me.

I created a subscribe/unsubscribe button, following the doc, and the prompt is showing up on Firefox each time i click on the subscribe button so i guess my flow is correct but i don't understand why it's not working on Chrome => the prompt is only showing the first time i launch Chrome.

Here is what i do

pushpad('init', #projectID);
var pushId = $("#main").data("pushid");
var pushSig = $("#main").data("pushsig");

var updateButton = function (isSubscribed) {
    var btn = $('#activate-push-notif');
    if (isSubscribed) {
        btn.html('Unsubscribe');
        btn.addClass('subscribed');
    } else {
        btn.html('Subscribe');
        btn.removeClass('subscribed');
    }
};
// check whether the user is subscribed to the push notifications and
// initialize the button status (e.g. display Subscribe or Unsubscribe)
pushpad('status', updateButton);

// when the user clicks the button...
$('#activate-push-notif').on('click', function (e) {
    e.preventDefault();

    // if he wants to unsubscribe
    if ($(this).hasClass('subscribed')) {
        pushpad('unsubscribe', function () {
            updateButton(false);
        }, {
            uid: pushId,
        });

        // if he wants to subscribe
    } else {
        // try to subscribe the user to push notifications
        pushpad('subscribe', function (isSubscribed) {
            if (isSubscribed) {
                updateButton(true);
            } else {
                updateButton(false);
                alert('You have blocked notifications from your browser preferences.');
            }
        }, {
            uid: pushId,
            uidSignature: pushSig
        });
    }
});

Thanks for your help to figure it out.

Answer 1

1. Make sure that you wrap all your code inside $(function () { ... }, so that your code is run when the page is fully loaded, otherwise your click handler may not work properly.
2. Probably the point is that when you see the Firefox prompt you click "Not now" (instead of "Never allow" which is hidden under the ▼ menu). That is why you can see the prompt multiple times. In other browsers, like Chrome, the default option is "Block" (which is a permanent block, like "Never allow").
3. When the user blocks the notifications you cannot display the browser prompt again, due to browser restrictions... however there are some alternative solutions. For example you can display a custom prompt as many times as you want, and then display the browser prompt only if the user says yes to your custom prompt. See this example. Otherwise you can display a prompt only to users who have blocked the notifications, asking to unblock the notifications. See this example. Another option is to display a button in the page to allow the users to subscribe to notifications when they decide to do that.