PushPad: Subscribe is removed after site refresh

Question

I've integrated PushPad and managed to get it working for static Push's. Now I wanted to combine it with some PHP and Javascript-Functions to make it dynamic. Here is my code:

<script>
    (function(p,u,s,h,x){p.pushpad=p.pushpad||function(){(p.pushpad.q=p.pushpad.q||[]).push(arguments)};h=u.getElementsByTagName('head')[0];x=u.createElement('script');x.async=1;x.src=s;h.appendChild(x);})(window,document,'https://pushpad.xyz/pushpad.js');

    //Install Pushpad
    pushpad('init', myprojectnumber);
    alert("Pushpad initialised");
    //Check subscribe-status
    pushpad('status', function (isSubscribed, tags){
        //User is already subscribed
        if (isSubscribed){
            alert("Already subscribed");
        //User has not subscribed
        }else{
            alert("Not subscribed");
            //Check in database if this logged-in-user has already subscribed with 5 different devices, if not generate UID and UID_SIGNATURE
            var username = $('#username_show').html();

            alert('Username: ' + username);
            $.ajax
            ({                                        
                type: "POST",
                data: {username: username},
                dataType: "json",
                url: "setNotifications.php",
                cache: false,
                success: function(data)
                {
                    alert("Ajax successfull. UID generated.");

                    if (data.uid != 0){
                        //Set UID and UID-SIGNATURE
                        pushpad('uid', data.uid, data.uid_signature);
                        alert('UID:' + data.uid);
                        //Subscribe
                        pushpad('subscribe', function(isSubscribed){
                            if (isSubscribed){
                                alert("Subscribed");
                            }else{
                                alert("Notifications blocked");
                            }

                        });
                    //Already 5 devices subscribed
                    }else{
                        alert("Already 5 devices");
                    }
                },
                error: function()
                {
                    alert('Error');
                }
            });
        }
    });
</script>

At first sight everything works fine. If I visit the site for the first time all alerts pop up, up to the "UID"-alert. Then I am asked by Chrome to accept push-notifications. I click allow and then the alert "Subscribed" pops up.

If I refresh the site now, everything repeats up to the "Subscribed"-alert (but I am not asked to allow push-notifications by Chrome anymore). I would have thought that the alert "Already subscribed" should show up, because I have subscribed before, but it doesn't.

Would appreciate it if somebody could help :-)

Answer 1

The problem is that status returns the subscription status for the current user (uid). You only set the uid for subscribe and status doesn't know about it.

This is what happens in your code:

1. The user is actually subscribed to push notifications
2. You refresh the page
3. status checks whether there is a subscription for the uid = null (not for the actual user id because is not set yet!)
4. It returns false because there isn't a subscription with uid = null
5. The subscription process is triggered again

The solution is to move all Pushpad code inside your AJAX success callback. So you the following sequence:

1. pushpad('init')
2. Your ajax callback
3. on success you set the uid with pushpad('uid')
4. pushpad('status')
5. inside the pushpad('status') callback use pushpad('subscribe')

BTW why do you use an AJAX callback to get the uid? If the user is logged in on your website when you render the page containing the Pushpad code you probably already know the uid (e.g. the user email or the id of the user in your database). You can do something like pushpad('uid', '<?= $uid ?>', '<?= $uid_signature ?>');