Question

使用离子框架作为前端和php-mysql作为后端开发应用程序。使用Google GCM实施了推送通知。在后端添加任何内容时接收推送通知。

要求实现以下功能：显示主屏幕中应用图标上方收到的通知数。

答案将非常感谢..

Answer 1

离子推送通知示例https://github.com/hollyschinsky/PushNotificationSample

Badge Is Count for how `much notification successfully send.`

   var buildPayload = function (options) {
    var notif = new apn.Notification(options.payload);

    notif.expiry = options.expiry || 0;
    notif.alert = options.alert;
    notif.badge = options.badge;
    notif.sound = options.sound;

    return notif;
};


                if (notification.badge) {
                $cordovaPush.setBadgeNumber( notif.badge).then(function (result) {
                    console.log("Set badge success " + result)
                }, function (err) {
                    console.log("Set badge error " + err)
                });
            }

Answer 2

创建rootScope变量notificationCount并为每个通知增加此变量的值

<强>控制器

$rootScope.$on('$cordovaPush:notificationReceived', function(event, notification) {
    if (notification.badge) {
        $cordovaPush.setBadgeNumber(notification.badge).then(function(result) {
            $rootScope.notificationCount = notification.badge;
        }, function(err) {});
    }
});

<强> HTML

<ion-side-menus enable-menu-with-back-views="false">
    <ion-side-menu-content>
        <ion-nav-bar class="bar-light" align-title="left">
            <ion-nav-back-button>
            </ion-nav-back-button>
            <ion-nav-buttons side="left">
                <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
                </button>
            </ion-nav-buttons>
            <ion-nav-buttons side="right">
                <button class="button button-icon home-notification-icon button-clear ion-ios-home" ng-click="openHome()">
                </button>
                <button class="button button-icon button-clear home-notification-icon ion-android-notifications" badge="5" badge-style="badge-assertive">
                    <span class="badge notification-badge badge-assertive header-badge">{{notificationCount}}</span>
                </button>
            </ion-nav-buttons>
        </ion-nav-bar>
        <ion-nav-view name="menuContent"></ion-nav-view>
    </ion-side-menu-content>
    <ion-side-menu side="left" style="background-color: #383839;">
        <ion-header-bar class="bar-stable">
            <img src="img/logo-web.png">
        </ion-header-bar>
        <ion-content id="sidemenu">
            <!-- Your content goes here -->
        </ion-content>
    </ion-side-menu>
</ion-side-menus>

如何在离子应用程序中显示总通知计数

2 个答案: