未收到 Ionic Cloud 推送 GCM 通知
Posted
技术标签:
【中文标题】未收到 Ionic Cloud 推送 GCM 通知【英文标题】：Ionic Cloud Push GCM Notifications Not Received 【发布时间】：2016-09-29 23:11:10 【问题描述】：我不明白 Ionic Cloud 文档让这听起来很容易，但我似乎无法接收推送通知。它会在应用程序启动时进行注册，但之后再也不会收到从 Ionic Cloud 仪表板发送的通知。我花了几个小时试图找到我在文档中遗漏的一些关键词。我还查看了FAQ，并通过在应用程序关闭时发送第二个通知来考虑第二点，并且每次状态都是sent，但这表示我应该仍然收到应用程序中的第一个通知。
我正在向所有用户发送通知，但我们没有使用 Ionic Clouds Auth 服务，所以我不确定通知是如何定向的，因为没有用户只是一个注册设备，它使用 @ 加载了应用程序987654323@.
使用全新安装的 Ionic 1.3.1 我已经完成了根据文档接收通知的最低要求，任何人都可以看到我可能出错的地方吗？它基本上只是带有一个控制器来监听通知的基本设置。
逐步遵循 Ionic 文档。我完全重新制作了应用程序，只是为了使用这些确切的步骤编写这个问题。
npm install @ionic/cloud --save
cp node_modules/@ionic/cloud/dist/bundle/ionic.cloud.min.js www/lib
将云JS文件添加到index.html，我会在下面发布）
承诺不需要蓝鸟
ionic io init 在dashboard 中创建应用，并在ionic.config.json 中设置app_id，我将在下面发布
添加了配置块，我将在下面发布，并跳转到推送服务
由于某些问题，FCM 在 Ionic Cloud Dashboard 中不可用，因此必须设置 GCM
使用证书中的 Ionic Cloud 仪表板向应用程序添加了安全配置文件
将 GCM 凭据添加到开发安全配置文件中
使用cordova plugin add phonegap-plugin-push --variable SENDER_ID=123456789011 --save添加phonegap-plugin-push，并检查SENDER_ID在config.xml中，其中SENDER_ID是项目编号
添加了ionic.cloud 作为对模块的依赖
添加了注册设备令牌的运行，我将在下面发布
创建了一个临时控制器仅用于测试，因为这是 Angular 1.5，您现在可以创建一个组件，并添加了 $scope.$on 监听器，我将在下面发布
运行 ionic run 并将应用程序加载到我的手机上，当在应用程序上运行检查器时，我可以看到它正在打开注册并且我得到一个令牌
然后在 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&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);
)();
【问题讨论】：
【参考方案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
【讨论】：
以上是关于未收到 Ionic Cloud 推送 GCM 通知的主要内容，如果未能解决你的问题，请参考以下文章