如何使用Ionic向Android设备发送推送通知?

时间:2015-11-01 00:21:55

标签: android push-notification ionic-framework

我是Ionic的新手,想创建一个发送推送通知的应用。我想从ANdroid开始。这些是我用来设置项目的命令:

ionic plugin add https://github.com/phonegap-build/PushPlugin.git
ionic add ngCordova
ionic add ionic-service-core
ionic add ionic-platform-web-client
ionic add angular-websocket

这是我的app.js:

angular.module('starter', ['ionic',
  'ngCordova',
  'ionic.service.core'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.config(['$ionicAppProvider', function($ionicAppProvider) {
  $ionicAppProvider.identify({
    app_id: 'xx',
    api_key: 'xx'
  });
}])

.controller('PushCtrl', function($scope, $rootScope, $ionicUser) {

  $rootScope.$on('$cordovaPush:tokenReceived', function(event, data) {
    //alert("Successfully registered token " + data.token);
    alert('Ionic Push: Got token ', data.token, data.platform);
    $scope.token = data.token;
  });

  $scope.identifyUser = function() {
    var user = $ionicUser.get();
    if(!user.user_id) {
      // Set your user_id here, or generate a random one.
      user.user_id = $ionicUser.generateGUID();
    };

    // Metadata
    angular.extend(user, {
      name: 'Martijn',
    });

    // Identify your user with the Ionic User Service
    $ionicUser.identify(user).then(function(){
      $scope.identified = true;
      alert('Identified user ' + user.name + '\n ID ' + user.user_id);
    });
  };

  // Registers a device for push notifications
  $scope.pushRegister = function() {
    alert('Ionic Push: Registering user');
    var user = $ionicUser.get();
    alert("User Id:" + user.user_id);

    Ionic.io();
    var push = new Ionic.Push();

    var callback = function(data) {
      alert('Registered token:', data.token);
      //console.log(data.token);
      push.addTokenToUser(user);
      user.save();
    }
    push.register(callback); // ERROR
  };
});

的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">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- 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/angular-websocket/angular-websocket.js"></script>
    <script src="lib/ngCordova/dist/ng-cordova.js"></script>
    <script src="lib/ionic-service-core/ionic-core.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <!-- Cordova is bootstrapped by ionic-platform-web-client, uncomment this if you remove ionic-platform-web-client... -->
<!-- <script src="cordova.js"></script> -->

    <!-- your app's js -->
    <script src="js/app.js"></script>

<script src="lib/ngCordova/dist/ng-cordova.js"></script></head>
  <body ng-app="starter" ng-controller="PushCtrl">

    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content>
        <button class="button button-block button-dark" ng-click="identifyUser()">
          Identify a user
        </button>

        <button class="button button-block button-positive" ng-if="identified" ng-click="pushRegister()">
          Register for Push
        </button>
      </ion-content>
    </ion-pane>
  </body>
</html>

运行此代码时,我可以在Ionic仪表板中看到用户。但是当我点击Register for push按钮时,我会收到例外:ReferenceError: PushNotification is not defined然后它指向/lib/ionic-platform-web-client/dist/ionic.io.bundle.min.js:3:873

我需要做些什么来完成这项工作?

1 个答案:

答案 0 :(得分:0)

  1. 您需要使用新的tutorial,不推荐使用已安装的库。
  2. 通知不会显示在开发版本中,只会调用回调。
  3. 设置Android生产推送通知时,您需要使用GCM项目编号,而不是项目ID或API密钥。