如何创建自定义订阅小组件

创建订阅小组件

如果默认小组件不符合您的目标和偏好，您可以按照下述步骤创建您的自定义订阅小组件。

在您的项目中添加一个包含订阅提示的隐藏 <div>。

<div class="push-notification-widget push-notification-widget_hidden" id="push-notification-widget">
  <div class="push-notification-widget__title">
    不要错过任何重要信息——订阅推送通知！
  </div>
  <div class="push-notification-widget__control">
    <button class="push-notification-widget__button" type="button" onClick="Pushwoosh.subscribe()">
      订阅
    </button>
  </div>
  <div class="push-notification-widget__success">
    您已订阅
  </div>
</div>

指定其样式。

<style>
  .push-notification-widget_hidden {
    display: none;
  }

  .push-notification-widget__success {
    display: none;
  }

  .push-notification-widget_subscribed .push-notification-widget__title {
    display: none;
  }

  .push-notification-widget_subscribed .push-notification-widget__control {
    display: none;
  }

  .push-notification-widget_subscribed .push-notification-widget__success {
    display: block;
  }
</style>

Pushwoosh WebSDK 初始化后，检查用户是否已订阅或已阻止权限请求。如果都没有，则显示小组件。

<script>
  var $subscriptionWidget = document.getElementById('push-notification-widget');
  var Pushwoosh = Pushwoosh || [];
  // 如果设备订阅了推送通知，则显示成功消息
  Pushwoosh.push(['onSubscribe', () => {
    $subscriptionWidget.classList.add('push-notification-widget_subscribed');
  }]);
  Pushwoosh.push(() => {
    /* 现在 WebSDK 已准备就绪，您可以使用公共方法。 */
    // 为 Promise.all 创建一个数组
    var actions = [];
    // 检查设备的推送通知权限
    var permission = Pushwoosh.driver.getPermission();
    // 检查设备是否已在 Pushwoosh 中注册并且可以接收推送通知
    var isSubscribed = Pushwoosh.isSubscribed();
    actions.push(permission);
    actions.push(isSubscribed);
    // 等待所有操作完成
    Promise.all(actions)
      .then((result) => {
        var permission = result[0];
        var isSubscribed = result[1];
        // 如果设备上的推送通知未被阻止（可以显示原生权限提示）
        // 并且设备未订阅推送通知（包括手动取消订阅）
        // 显示通知小组件
        if (permission !== 'denied' && !isSubscribed) {
          $subscriptionWidget.classList.remove('push-notification-widget_hidden');
        }
      });
  });
</script>