OneSignal使用Web Push SDK在网页上订阅用户

6

在One Signal Web Push SDK中有没有一种方式可以手动添加用户并取消订阅?

我已经在我的subscribeOneSignal()函数中尝试过,但没有任何反应。

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

我有一个简单的HTML页面,上面有两个按钮:“订阅”和“取消订阅”。当用户点击“订阅”按钮时,应该将其添加到OneSignal中;当用户点击“取消订阅”按钮时,他不应该收到通知。

<!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>

1
我不清楚OneSignal,但是我已经为您的确切用例(一个订阅/取消订阅按钮)编写了一个Pushpad示例:请参见[“按钮”示例](https://pushpad.xyz/docs/javascript_sdk_examples)。 - collimarco
2个回答

15

以下是解决方案,希望能对其他人有所帮助。

<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>

1
很好,但我已经使用过它了,但它要求用户在使用其电子邮件地址作为标签登录到我的网站后进行注册:

<?php
if ($_SESSION['sesId']!='')
{
    $sr = mysqli_query($DBD->conn(),"SELECT * from members where id = '".$_SESSION['sesId']."'");
    if ($rr = mysqli_fetch_array($sr))
    {
        if ($rr['pushtag']==1 && $rr['alreadysendpush'] ==0 ) 
        {
        ?>
    var OneSignal = window.OneSignal || [];
    OneSignal.push(["init", {
      appId: "1c398831-ce91-4a8e-90d8-56cc40b8fa97",
      autoRegister:false,
      showCredit:false,
      disable:false, // betekend geen stanaard bericht als je geaceepteerd hebt notificaties te willen ontvangen
      notifyButton: {
        enable: true /* Set to false to hide */
      },
     safari_web_id: 'web.onesignal.auto.379e9ba9-232a-4433-a939-20e3e6310530'
    }]
    );

                                    OneSignal.push(function() {
                                      /* These examples are all valid */
                                      var isPushSupported = OneSignal.isPushNotificationsSupported();
                                      if (isPushSupported) 
                                      {
                                        // Push notifications are supported


                                            OneSignal.isPushNotificationsEnabled().then(function(isEnabled) 
                                            {
                                                if (isEnabled)
                                                {
                                                  console.log("Push notifications are enabled!"); 
                                                    OneSignal.sendTag("email", "<?=$rr['email']?>", function(tagsSent) 
                                                    {
                                                        // Callback called when tags have finished sending                              
                                                        $.ajax({
                                                            type: "POST",
                                                            url: "<?=HTML_ROOT?>inc/webpush.php",
                                                            data: {
                                                                "email": "<?=$rr['email']?>",
                                                                "register": "1",
                                                                "verification":"<?=$rr['verificatie']?>"
                                                            },
                                                            dataType: "html"
                                                        }).done(function(e) {


                                                        });                                                     
                                                    })
                                                }
                                                else {
                                                  console.log("Push notifications are not enabled yet.");      
                                                }
                                              });


                                      } else {
                                        // Push notifications are not supported
                                      }
                                    });
        <?php           
        } else {

        }
    }
}
?>

有时候这个功能需要标签,有时候则不需要。 如何让它只接受电子邮件注册?


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接