【问题标题】:Ionic Cloud Push GCM Notifications Not Received未收到 Ionic Cloud 推送 GCM 通知
【发布时间】:2016-09-29 23:11:10
【问题描述】:

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

我正在向所有用户发送通知,但我们没有使用 Ionic Clouds Auth 服务,所以我不确定通知是如何定向的,因为没有用户只是一个注册设备,它使用 @ 加载了应用程序987654323@.

使用全新安装的 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 在dashboard 中创建应用,并在ionic.config.json 中设置app_id,我将在下面发布
  6. 添加了配置块,我将在下面发布,并跳转到推送服务
  7. 由于某些问题,FCM 在 Ionic Cloud Dashboard 中不可用,因此必须设置 GCM
  8. 使用证书中的 Ionic Cloud 仪表板向应用程序添加了安全配置文件
  9. 将 GCM 凭据添加到开发安全配置文件中
  10. 使用cordova plugin add phonegap-plugin-push --variable SENDER_ID=123456789011 --save添加phonegap-plugin-push,并检查SENDER_IDconfig.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 等都被替换为随机等效数字

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

    <!-- 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"
  ]
}

config.xml

<?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);

})();

【问题讨论】:

    标签: ionic-framework ionic-cloud


    【解决方案1】:

    好的,我在问题中设置的所有内容都是正确的。不正确的是 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 repo 上发布了一个问题 - https://github.com/driftyco/ionic-cloud-issues/issues/198#issuecomment-250856824

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-04-07
      • 1970-01-01
      • 1970-01-01
      • 2015-07-17
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多