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

Question

I'm developing and ionic app for android. 我正在为Android开发和离子应用程序。

I've implemented Ionic Push Notifications following ionic documentation and this tutorial 我在离子文档和本教程之后实现了Ionic推送通知

When the app is running I receive an alert message which is fine. 当应用程序运行时，我收到一条警告消息，这很好。 However, when the app is closed and I push a notification using ionic.io "One Time notification" I only get sound. 但是，当应用程序关闭并且我使用ionic.io“一次性通知”推送通知时，我只能听到声音。

The push notification triggers my phone's default ringtone, but it does not display title or message. 推送通知会触发我手机的默认铃声，但不会显示标题或消息。

Here's my code: 这是我的代码：

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

No console errors and the app is working fine. 没有控制台错误，应用程序运行正常。

Here's a list of my plugins: 这是我的插件列表：

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"

And modules: 和模块：

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

Here's my index.html: 这是我的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

Sorry for the late response. 回复晚了非常抱歉。 I've been terribly busy. 我一直很忙。 Thank you @JesseMonroy650 for asking. 谢谢@ JesseMonroy650。

I ended up using PushWoosh, however I found out that my problem came from not having cordova-plugin-statusbar 2.1.1 "StatusBar" plugin installed. 我最终使用了PushWoosh，但是我发现我的问题来自于没有安装cordova-plugin-statusbar 2.1.1“StatusBar”插件。 Also I had to initialize it in my app.js using: 我还必须使用以下命令在app.js中初始化它：

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

Hope this can help anyone running with the same issue since it's never mentioned in ionicPush documentation. 希望这可以帮助任何运行相同问题的人，因为它在ionicPush文档中从未提及过。

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-03-03 18:12:03

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-03-03 18:12:03

解决方案1
1 已采纳 2016-03-03 18:12:03