title: Ionic Push Notification not displaying notifications on overlay (Notification bar)
body: <p>I'm developing and ionic app for android.</p>
  
  <p>I've implemented Ionic Push Notifications following ionic documentation and <a href="https://devdactic.com/android-push-notifications/" rel="nofollow noreferrer">this tutorial</a></p>
  
  <p>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.</p>
  
  <p>The push notification triggers my phone's default ringtone, but it does not display title or message.</p>
  
  <p>Here's my code:</p>
  
  <pre><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...
  </code></pre>
  
  <p>No console errors and the app is working fine.</p>
  
  <p>Here's a list of my plugins:</p>
  
  <pre><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"
  </code></pre>
  
  <p>And modules:</p>
  
  <pre><code>angular-websocket
  ionic
  ionic-platform-web-client
  ionic-service-core
  ionic-service-push
  ngCordova
  platform
  </code></pre>
  
  <p>Here's my index.html:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"&gt;
      &lt;meta name="format-detection" content="telephone=no"&gt;
      &lt;meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; script-src &amp;apos;self&amp;apos; &amp;apos;unsafe-inline&amp;apos; &amp;apos;unsafe-eval&amp;apos; *; style-src  &amp;apos;self&amp;apos; &amp;apos;unsafe-inline&amp;apos; *;
      media-src *; img-src  &amp;apos;self&amp;apos; data: *"&gt;
      &lt;!-- Good default declaration:
          * gap: is required only on iOS (when using UIWebView) and is needed for JS-&gt;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
      --&gt;
  
      &lt;title&gt;&lt;/title&gt;
  
      &lt;!-- Ionic styles --&gt;
      &lt;link href="lib/ionic/css/ionic.css" rel="stylesheet"&gt;
      &lt;link href="css/style.css" rel="stylesheet"&gt;
      &lt;!-- Bootstrap styles --&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/fonts/armyrust.ttf"&gt;
  
      &lt;!-- FontAwesome Icons --&gt;
      &lt;link rel="stylesheet" href="css/font-awesome.css"&gt;
  
      &lt;!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
      &lt;link href="css/ionic.app.css" rel="stylesheet"&gt;
      --&gt;
      &lt;!-- Bootstrap js --&gt;
      &lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;!-- ionic/angularjs js --&gt;
      &lt;script src="lib/ionic/js/ionic.bundle.js"&gt;&lt;/script&gt;
      &lt;script src="lib/ionic-platform-web-client/dist/ionic.io.bundle.min.js"&gt;&lt;/script&gt;
      &lt;script src="lib/ngCordova/dist/ng-cordova.min.js"&gt;&lt;/script&gt;
      &lt;script src="lib/ionic-service-core/ionic-core.js"&gt;&lt;/script&gt;
      &lt;script src="lib/ionic-service-push/ionic-push.js"&gt;&lt;/script&gt;
      &lt;script src="lib/angular-resource/angular-resource.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/qrcode.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/angular-qr.js"&gt;&lt;/script&gt;
  
      &lt;!-- cordova script (this will be a 404 during development) 
      &lt;script src="cordova.js"&gt;&lt;/script&gt; --&gt;
  
      &lt;!-- your app's js 
      &lt;script type="text/javascript" src="../www/app/app.js"&gt;&lt;/script&gt;
      --&gt;
  
      &lt;script src="js/app.js"&gt;&lt;/script&gt;
      &lt;script src="js/controller.js"&gt;&lt;/script&gt;
      &lt;script src="js/rankingController.js"&gt;&lt;/script&gt;
      &lt;script src="js/services.js"&gt;&lt;/script&gt;
      &lt;script src="js/constants.js"&gt;&lt;/script&gt;
      &lt;script src="lib/angular-mocks/angular-mocks.js"&gt;&lt;/script&gt;
  
  
      &lt;!-- Google Maps Library --&gt;
      &lt;script src="http://maps.googleapis.com/maps/api/js?sensor=true"&gt;&lt;/script&gt;
      &lt;!-- Needed for Cordova/PhoneGap (will be a 404 during development) --&gt;
    &lt;/head&gt;
    &lt;body ng-app="MaPlay" ng-controller="AppCtrl"&gt;
      &lt;ion-nav-view&gt;
  
      &lt;/ion-nav-view&gt;
    &lt;/body&gt;
      &lt;!-- Cordova is bootstrapped by ionic-platform-web-client, uncomment this if you remove ionic-platform-web-client... --&gt;
  &lt;!-- &lt;script src="cordova.js"&gt;&lt;/script&gt; --&gt;
  &lt;/html&gt;
  </code></pre>