Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

OneSignal subscribe user through web page using web-push-sdk

Is there a way in one signal web-push-sdk to add user manually and unsubscribe?

I tried this in my subscribeOneSignal() function but nothing happening.

OneSignal.push(function() {
    OneSignal.registerForPushNotifications();
});

I have simple html page where I have two buttons one "Subscribe" and other is "Unsubscribe", now when user click on Subscribe button he should add at one signal and when he clicked on "Unsubscribe" button he shouldn't receive the notifications.

<!DOCTYPE html>
<html>
<head>
    <link rel="manifest" href="/manifest.json">
    <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async></script>
    <script>
        var OneSignal = window.OneSignal || [];
        OneSignal.push(["init", {
            appId: "345345-asdf-345",
            autoRegister: false,
            notifyButton: {
                enable: true
            }
        }]);

        function subscribeOneSignal(){
             OneSignal.push(function() {
              OneSignal.registerForPushNotifications();
            });
            OneSignal.push(function() {
              OneSignal.registerForPushNotifications({
                modalPrompt: true
              });
            });
        }
        function unSubscribeOneSignal(){
             //unsubscribe functionality goes here
        }
    </script>
</head>
<body>
<p>OneSingle Testing</p>
<br>
<button onclick="subscribeOneSignal()">Subscribe </button>
<button onclick="unSubscribeOneSignal()">Unsubscribe </button>

</body>
</html>
like image 466
Muhammad Shahzad Avatar asked Nov 10 '16 10:11

Muhammad Shahzad


1 Answers

Here is solution, It may help someone else.

<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async></script>
<script>
    var useragentid = null;
    var OneSignal = window.OneSignal || [];
    OneSignal.push(["init", {
        appId: "345345-asdf-345",
        autoRegister: false,
        notifyButton: {
            enable: false 
        },
        persistNotification: false
    }]);
    //Firstly this will check user id 
    OneSignal.push(function() {
        OneSignal.getUserId().then(function(userId) {                
            if(userId == null){
                document.getElementById('unsubscribe').style.display = 'none';
            }
            else{
                useragentid = userId;
                document.getElementById('unsubscribe').style.display = '';
                OneSignal.push(["getNotificationPermission", function(permission){
                }]);
                OneSignal.isPushNotificationsEnabled(function(isEnabled) {
                    if (isEnabled){
                        document.getElementById('unsubscribe').style.display = '';
                        document.getElementById('subscribe').style.display = 'none';
                    }
                    else{
                      document.getElementById('unsubscribe').style.display = 'none';
                      document.getElementById('subscribe').style.display = '';
                    }
                });
            }
        });
    });
    //Secondly this will check when subscription changed
    OneSignal.push(function() {
        OneSignal.on('subscriptionChange', function (isSubscribed) {
            if(isSubscribed==true){
                OneSignal.getUserId().then(function(userId) {
                    useragentid = userId;
                }).then(function(){
                 // this is custom function
                // here you can send post request to php file as well.
                    OneSignalUserSubscription(useragentid);
                });
                document.getElementById('unsubscribe').style.display = '';
                document.getElementById('subscribe').style.display = 'none';
            }
            else if(isSubscribed==false){
                OneSignal.getUserId().then(function(userId) {
                    useragentid = userId;
                });
                document.getElementById('unsubscribe').style.display = 'none';
                document.getElementById('subscribe').style.display = '';
            }
            else{
                console.log('Unable to process the request');
            }
        });
    });
    function subscribeOneSignal(){
        if(useragentid !=null){
            OneSignal.setSubscription(true); 
        }
        else{
            OneSignal.registerForPushNotifications({
                modalPrompt: true
            });
        }
    }
    function unSubscribeOneSignal(){
        OneSignal.setSubscription(false);
    }
</script>
<div id="home-top" class="clearfix">
<p>OneSingle Testing</p>
<br>
<button id="subscribe" class="button" onclick="subscribeOneSignal()">Subscribe </button>
<button id="unsubscribe" class="button" onclick="unSubscribeOneSignal()">Unsubscribe </button>
</div>
<style>
.button {
    background-color: #008CBA;border: none;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;cursor: pointer;
}
</style>
like image 178
Muhammad Shahzad Avatar answered Sep 20 '22 12:09

Muhammad Shahzad