1

我不明白 Ionic Cloud 文档让这听起来很容易,但我似乎无法接收推送通知。它会在应用程序启动时进行注册,但之后再也不会收到从 Ionic Cloud 仪表板发送的通知。我花了几个小时试图找到我在文档中遗漏的一些关键词。我还查看了常见问题解答,并通过在应用程序关闭时发送第二个通知来考虑第二点,每次状态为sent,但这表示我仍然应该在应用程序中收到第一个通知。

我正在向所有用户发送通知,但我们没有使用 Ionic Clouds Auth 服务,所以我不确定通知是如何定向的,因为没有用户只是使用ionic run android.

使用全新安装的 Ionic 1.3.1 我已经完成了基于文档接收通知的最低要求,任何人都可以看到我可能在哪里出错了吗?它基本上只是带有一个控制器来监听通知的基本设置。

逐步遵循 Ionic 文档。我完全重新制作了应用程序,只是为了使用这些确切的步骤编写这个问题。

  1. npm install @ionic/cloud --save
  2. cp node_modules/@ionic/cloud/dist/bundle/ionic.cloud.min.js www/lib
  3. 将云JS文件添加到index.html,我将在下面发布)
  4. 不需要蓝鸟的承诺
  5. ionic io init在仪表板中创建应用程序,并在中设置 app_id ionic.config.json,我将在下面发布
  6. 添加了配置块,我将在下面发布,并跳转到推送服务
  7. 由于某些问题,FCM 在 Ionic Cloud Dashboard 中不可用,因此必须设置 GCM
  8. 使用证书中的 Ionic Cloud 仪表板向应用程序添加了安全配置文件
  9. 将 GCM 凭据添加到开发安全配置文件
  10. 添加phonegap-plugin-pushusing cordova plugin add phonegap-plugin-push --variable SENDER_ID=123456789011 --save,并选中SENDER_IDis in config.xml,其中 SENDER_ID 是项目编号
  11. 添加ionic.cloud为模块的依赖项
  12. 添加了注册设备令牌的运行,我将在下面发布
  13. 创建了一个临时控制器仅用于测试,因为这是 Angular 1.5,您现在可以创建一个组件,并添加 $scope.$on 监听器,我将在下面发布
  14. 运行ionic run并将应用程序加载到我的手机上,当在应用程序上运行检查器时,我可以看到它正在打开注册并且我得到一个令牌
  15. 然后在 Ionic Cloud 仪表板上发送通知,但从未收到

注意:本示例中的 APP_ID、SENDER_ID、API_KEYS 等都被替换为随机等效数字

索引.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">

    <!-- TODO: Add brand of application -->
    <title></title>

    <link rel="manifest" href="manifest.json">

    <!-- un-comment this code to enable service worker
    <script>
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('service-worker.js')
          .then(() => console.log('service worker installed'))
          .catch(err => console.log('Error', err));
      }
    </script>-->


    <!-- Compiled Styles -->
    <!-- inject:css -->
    <link href="css/ionic.app.css" rel="stylesheet">
    <!-- endinject -->

    <!-- Ionic Scripts -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="lib/ionic.cloud.min.js"></script>

    <!-- Google Maps API -->
    <!--<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDOCZ0kgg2rTRzmGepWQMu6EM90koX4mUs&amp;libraries=places"></script>-->

    <!-- Vendor Scripts -->
    <!-- bower:js -->
    <!-- endbower -->

    <!-- Cordova Script (this will be a 404 during development) -->
    <script src="lib/ngCordova/dist/ng-cordova.js"></script>
    <script src="cordova.js"></script>

    <!-- Compiled Scripts -->
    <!-- inject:js -->
    <script src="js/app.module.js"></script>
    <script src="js/app.cloud.js"></script>
    <script src="js/app.config.js"></script>
    <script src="js/app.constants.js"></script>
    <script src="js/app.controller.js"></script>
    <!-- endinject -->
    <!-- inject:templates:js -->
    <!-- endinject -->
</head>
<body ng-app="app">

<ion-pane>
    <ion-header-bar class="bar-stable" ng-controller="AppController">
        <h1 class="title">Ionic Blank Starter</h1>
    </ion-header-bar>
    <ion-content>
    </ion-content>
</ion-pane>

</body>
</html>

app.module.js

(function () {

  'use strict';

  var dependencies = [
    'ionic',
    'ionic.cloud',
    'ngCordova'
  ];

  function run($ionicPlatform) {

    $ionicPlatform.ready(function () {

      if (window.cordova && window.cordova.plugins.Keyboard) {

        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

        // Don't remove this line unless you know what you are doing. It stops the viewport
        // from snapping when text inputs are focused. Ionic handles this internally for
        // a much nicer keyboard experience.
        cordova.plugins.Keyboard.disableScroll(true);
      }

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

  run.$inject = [
    '$ionicPlatform'
  ];

  angular
      .module('app', dependencies)
      .run(run);

})();

app.cloud.js

(function () {

    'use strict';

    function config($ionicCloudProvider) {

        $ionicCloudProvider.init({
            'core': {
                'app_id': '1234ab12'
            },
            'push': {
                'sender_id': '123456789011',
                'pluginConfig': {
                    'ios': {
                        'badge': true,
                        'sound': true
                    },
                    'android': {
                        'iconColor': '#343434',
                        'sound': true,
                        'vibrate': true
                    }
                }
            }
        });
    }

    config.$inject = [
        '$ionicCloudProvider'
    ];

    function run($ionicPush) {

        // Register every time the application is opened so the device is
        // guaranteed to be registered and ready for notifications
        $ionicPush
            .register()
            .then(function (token) {

                // Save the generated device token with the current user when
                // the token is saved
                return $ionicPush.saveToken(token);
            })
            .then(function (device) {

                console.log('Device token:', device.token);
            });
    }

    run.$inject = [
        '$ionicPush'
    ];

    angular
        .module('app')
        .config(config)
        .run(run);

})();

ionic.config.json

{
  "name": "v1.3",
  "app_id": "1234ab12",
  "gulpStartupTasks": [
    "sass",
    "watch"
  ],
  "watchPatterns": [
    "www/**/*",
    "!www/lib/**/*",
    "!www/**/*.map"
  ]
}

配置文件

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.ionicframework.v13169294" version="0.0.1" 

    // ...

    <plugin name="phonegap-plugin-push" spec="~1.8.2">
        <variable name="SENDER_ID" value="123456789011" />
    </plugin>
</widget>

.io.config.json

{"app_id":"1234ab12","api_key":"e38rj3i3jsofp3098e8djksod92dmdow0ekdsj2930dk300f"}

app.controller.js

(function () {

    'use strict';

    function AppController($scope) {

        var vm = this;

        // ---
        // PUBLIC METHODS.
        // ---

        $scope.$on('cloud:push:notification', function (event, data) {
            var msg = data.message;
            alert(msg.title + ': ' + msg.text);
        });

        // ---
        // PRIVATE METHODS.
        // ---
    }

    AppController.$inject = [
        '$scope'
    ];

    angular
        .module('app')
        .controller('AppController', AppController);

})();
4

1 回答 1

0

好的,我在问题中设置的所有内容都是正确的。不正确的是 Ionic Dashboard,它要求在安全配置文件中提供 GCM API 密钥,结果您需要创建一个 FCM 项目并在 GCM API 密钥输入字段中使用服务器密钥。

感谢 Ionics 论坛上的这篇文章 - https://forum.ionicframework.com/t/ionic-push-notification-for-android-keeps-giving-me-error-gcm-invalid-auth/63041/8

我还在 Ionic Cloud 的 github 存储库上发布了一个问题 - https://github.com/driftyco/ionic-cloud-issues/issues/198#issuecomment-250856824

于 2016-10-02T07:25:52.890 回答