离子推送通知不在叠加层上显示通知（通知栏）

Question

我正在为 android 开发离子应用程序。

我已经根据 ionic 文档和 this tutorial

实施了 Ionic 推送通知

当应用运行时，我会收到一条提醒消息，这很好。但是，当应用程序关闭并且我使用 ionic.io "One Time notification" 推送通知时，我只能听到声音。

推送通知触发了我phone的默认铃声，但它不显示标题或消息。

这是我的代码：

.run(function($ionicPlatform,$httpBackend, baseURL, $rootScope, $cordovaNetwork) {
    $ionicPlatform.ready(function() {

        var io = Ionic.io();

        var push = new Ionic.Push({
          "onNotification": function(notification) {
            alert('Received push notification!');
            console.log(notification);
          },
          "pluginConfig": {
            "android": {
              "iconColor": "#0000FF"
            }
          }
        });
        var user = Ionic.User.current();

        if (!user.id) {
          user.id = Ionic.User.anonymousId();
        }

        var callback = function(data) {
            push.addTokenToUser(user);
            user.save();
        };
        push.register(callback);
        //More code...

没有控制台错误，应用运行正常。

这是我的插件列表：

com.ionic.keyboard 1.0.4 "Keyboard"
cordova-plugin-console 1.0.2 "Console"
cordova-plugin-device 1.1.1 "Device"
cordova-plugin-geolocation 2.1.0 "Geolocation"
cordova-plugin-network-information 1.2.0 "Network Information"
cordova-plugin-splashscreen 3.2.0 "Splashscreen"
cordova-plugin-whitelist 1.2.1 "Whitelist"
ionic-plugin-keyboard 1.0.8 "Keyboard"
phonegap-plugin-push 1.5.3 "PushPlugin"

和模块：

angular-websocket
ionic
ionic-platform-web-client
ionic-service-core
ionic-service-push
ngCordova
platform

这是我的 index.html:

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; script-src &apos;self&apos; &apos;unsafe-inline&apos; &apos;unsafe-eval&apos; *; style-src  &apos;self&apos; &apos;unsafe-inline&apos; *;
    media-src *; img-src  &apos;self&apos; data: *">
    <!-- Good default declaration:
        * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
        * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
        * Disables use of eval() and inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
            * Enable inline JS: add 'unsafe-inline' to default-src
            * Enable eval(): add 'unsafe-eval' to default-src
    -->

    <title></title>

    <!-- Ionic styles -->
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <!-- Bootstrap styles -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/fonts/armyrust.ttf">

    <!-- FontAwesome Icons -->
    <link rel="stylesheet" href="css/font-awesome.css">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->
    <!-- Bootstrap js -->
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="lib/ionic-platform-web-client/dist/ionic.io.bundle.min.js"></script>
    <script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
    <script src="lib/ionic-service-core/ionic-core.js"></script>
    <script src="lib/ionic-service-push/ionic-push.js"></script>
    <script src="lib/angular-resource/angular-resource.min.js"></script>
    <script src="js/qrcode.min.js"></script>
    <script src="js/angular-qr.js"></script>

    <!-- cordova script (this will be a 404 during development) 
    <script src="cordova.js"></script> -->

    <!-- your app's js 
    <script type="text/javascript" src="../www/app/app.js"></script>
    -->

    <script src="js/app.js"></script>
    <script src="js/controller.js"></script>
    <script src="js/rankingController.js"></script>
    <script src="js/services.js"></script>
    <script src="js/constants.js"></script>
    <script src="lib/angular-mocks/angular-mocks.js"></script>


    <!-- Google Maps Library -->
    <script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
    <!-- Needed for Cordova/PhoneGap (will be a 404 during development) -->
  </head>
  <body ng-app="MaPlay" ng-controller="AppCtrl">
    <ion-nav-view>

    </ion-nav-view>
  </body>
    <!-- Cordova is bootstrapped by ionic-platform-web-client, uncomment this if you remove ionic-platform-web-client... -->
<!-- <script src="cordova.js"></script> -->
</html>

Answer 1

我最终使用了 PushWoosh，但是我发现我的问题来自于没有安装 cordova-plugin-statusbar 2.1.1 "StatusBar" 插件。我还必须在 app.js 中使用以下方法初始化它：

            if (window.StatusBar) {
                StatusBar.styleLightContent();
            }

不幸的是，ionicPush 文档中从未提及这一点。

离子推送通知不在叠加层上显示通知（通知栏）

Ionic Push Notification not displaying notifications on overlay (Notification bar)

notifications

android

push-notification

cordova

ionic-framework