2016-09-29 101 views
1

我不理解Ionic Cloud文檔讓這個聲音很容易,但我似乎無法接收推送通知。它會在應用程序啓動時進行註冊,但在此之後,從Ionic Cloud儀表板發出的通知從未收到。我花了數小時試圖找到我在文檔中錯過的關鍵詞。我還審查了FAQ,並通過發送第二次通知並結束申請,並且每次狀態爲sent,但我表示應該仍然收到申請中的第一個通知。Ionic Cloud Push未接收到GCM通知

我正在向所有用戶發送通知,但我們沒有使用Ionic Clouds Auth服務,所以我不確定通知是如何定向的,因爲沒有用戶只是使用應用程序加載的註冊設備ionic run android

使用乾淨安裝離子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. 不得不設立GCM因爲FCM不離子云儀表板可由於一些問題
  8. 增添了安全配置文件,以使用證書
  9. 新增的GCM憑據發展安全配置
  10. 的離子云儀表盤的應用
  11. 新增phonegap-plugin-push使用cordova plugin add phonegap-plugin-push --variable SENDER_ID=123456789011 --save,並檢查SENDER_ID是在​​3210,其中SENDER_ID是項目數
  12. 新增ionic.cloud作爲依賴於模塊
  13. 添加運行用於註冊該設備令牌,該令牌我會後下面
  14. 創建一個臨時控制器只是用於測試,因爲這是角1.5,你只要現在可以創建一個組件,並增加了$範圍。$監聽者,我將在後下
  15. ionic run和加載應用程序到我的手機,其上的應用程序運行檢查時,我可以看到它是在開放註冊,我得到令牌
  16. 然後到離子云儀表板和發送的通知,這是從來沒有收到

注:的APP_ID,SENDER_ID,API_KEYS等已全部被取代爲蘭特omly當量數對於這個例子

索引。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); 

})(); 

回答

0

好的,我在問題中設置的所有內容都是正確的。什麼是不正確的是Ionic儀表板,它要求在安全配置文件中使用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