Ionic Cloud のドキュメントがこのように簡単に説明していることは理解できませんが、プッシュ通知を受信できないようです。アプリケーションの起動時に登録されますが、その後、Ionic Cloud ダッシュボードから送信された通知は受信されません。ドキュメントで見逃したキーワードを見つけるのに何時間も費やしました。FAQも確認し、2 番目の点を考慮して、アプリケーションを閉じた状態で 2 番目の通知を送信し、ステータスが になるたびsentに、アプリケーションで最初の通知を受け取るべきだったと述べました。
すべてのユーザーに通知を送信していますが、Ionic Clouds Auth サービスを使用していないため、アプリケーションが読み込まれた登録済みのデバイスだけでユーザーがいないため、通知がどのように送信されるかわかりませんionic run android。
Ionic 1.3.1 のクリーン インストールを使用して、ドキュメントに基づいて通知を受け取るために最小限のことを行いました。基本的には、通知をリッスンするためのコントローラーを使用した基本セットアップです。
Ionic ドキュメントに順を追って従います。これらの正確な手順を使用してこの質問を書くためだけに、アプリケーションを完全に作り直しました。
npm install @ionic/cloud --savecp node_modules/@ionic/cloud/dist/bundle/ionic.cloud.min.js www/lib- クラウド JS ファイルを index.html に追加します。これを以下に投稿します)。
- プロミスにブルーバードはいらない
ionic io initダッシュボードにアプリを作成し、 app_id を に設定しionic.config.jsonます。これを以下に投稿します- 以下に投稿する構成ブロックを追加し、プッシュサービスにジャンプしました
- いくつかの問題により Ionic Cloud ダッシュボードで FCM を使用できないため、GCM をセットアップする必要がありました
- 証明書の Ionic Cloud ダッシュボードを使用してアプリケーションにセキュリティ プロファイルを追加しました
- GCM クレデンシャルを開発セキュリティ プロファイルに追加しました
- SENDER_ID
phonegap-plugin-pushはプロジェクト番号cordova plugin add phonegap-plugin-push --variable SENDER_ID=123456789011 --saveですSENDER_ID。config.xml 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);
})();