Push notifications Android avec Firebase Ionic Angular Cordova
Voici les notes du brouillon de mes travaux en vue de la création de la doc de production.
Comment est-ce que cela fonctionne?
Envoyer une notification push à un seul appareil ou un sujet.
L'application est au premier plan:
l'utilisateur reçoit les données de notification dans le rappel JavaScript sans notification de message d'alerte (ce qui est le comportement normal des notifications push mobiles).
L'application est en arrière-plan:
L'utilisateur reçoit le message de notification dans la barre de notification de l'appareil.
L'utilisateur tape la notification et l'application s'ouvreSe lance.
L'utilisateur reçoit les données de notification dans le rappel JavaScript.
Une question? Posez-la ici
Post interessant sur Stackoverflow:
http://stackoverflow.com/questions/37653251/firebase-cloud-messaging-with-ionic-app
“I gave up on Ionic Push”
“Same problem here, was unable to implement Ionic Push for my Ionic 2 App”
https://forum.ionicframework.com/t/firebase-cloud-messaging-for-push-notifications-both-ios-and-android/52637/9
“does't work for both android and ios phone”
https://github.com/edismooth/ionic2-firebase/tree/master
https://github.com/fechanique/cordova-plugin-fcm
https://firebase.google.com/docs/cloud-messaging/
https://firebase.google.com/docs/cloud-messaging/chrome/client
Création du profil Ionic Cloud de développement
Pour configure le profile, cliquer sur l’icone Jalerteimmo
Puis sur “configure profiles”
New security profile development
securityProfileJalerteImmo
type: development
Create
New security profile production
securityProfileJalerteImmoProduction
Creation du security profile Google Firebase FCM Project & API Key
http://docs.ionic.io/services/profiles/#android-fcm-project--server-key
Google a migré GCM(Google Cloud Messaging) vers FCM(Firebase Cloud Messaging)
Il faut donc migrer les applications/certificats vers FCM
Une clé sender ID FCM Google est nécéssaire pour envoyer les pushs notifications vers les smartphones Android
Tout d’abord, aller sur la Firebase console pour créer un nouveau projet.
Ouverture de la console firebase
Lien :
https://console.firebase.google.com/
Une fois le projet créé en développement, nous pourrons y accéder ainsi :
Entrer un nom et une région et cliquer « new project »
Création du projet Firebase en développement
Projet : pushnotifications
Pays : France
Une fois que le projet est créé, cliquer sur l’engrenage à coté du nom du projet pour accéder aux paramètres :
Je vois mes variables SERVER KEY & SENDER ID de développement:
En français, c’est le nom du projet, son nom public, l’ID du projet, la clé API web :
Nom du projet dev
pushnotifications
Nom public dev
pushnotifications
ID du projet dev
pushnotifications-9447e
Clé API Web dev
AIzaSyBRrajev-SiQIdAbP4EYOD2PTmvao3gQwE
Réception du mail de confirmation de l’inscription à Firebase développement
De : Firebase [mailto:Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!]
Hi Loic, Welcome to Firebase! You're now part of a community of hundreds of thousands of developers using Firebase to develop high-quality apps, grow their user base, and earn more money. We cover the essentials so you can monetize your business and focus on your users. Here are some suggestions for next steps: 1 Add an app to your project Your new Firebase project is a container that can hold multiple apps (for example, one for Android and one for iOS). These apps share common project resources, like a database. Visit the console to add an app. 2 Setup Firebase Analytics At the heart of Firebase is Firebase Analytics, a free and unlimited analytics solution. See user behavior and measure attribution from a single dashboard. Install the iOS or Android SDK to get started. 3 Develop Build a better app and leave the operations to us. Save crucial development time and ship a high-quality, bug-free app. Explore our features in the Develop pillar: Cloud Messaging, Authentication, Realtime Database, Storage, Hosting, Remote Config, Test Lab and Crash Reporting. 4 Grow Acquire and engage the right users at the right time. Take the guesswork out of growth. Explore our features in the Grow pillar: Notifications, App Indexing, Dynamic Links, Invites and AdWords. 5 Earn Monetize your app through rich and engaging ads. Install the AdMob iOS or Android SDK to get started. We're always here to help! Visit the support center for help with technical questions. You can also find us on Twitter @Firebase or join our Google Group to chat with other Firebase developers. We can't wait to see what you create! The Firebase Team
|
Ajouter Firebase à l’application Android :
Cliquer sur l’icône vert :
Renseigner l’applicationID du build.Gradle
Edition du build.gradle
Faire un notepad build.gradle pour visualiser le fichier et trouver l’application ID:
Et ajouter :
dependencies {
classpath 'com.google.gms:google-services:3.0.0' // Add this line
}
Et ajouter
dependencies {
compile 'com.google.firebase:firebase-core:9.2.0' // this line must be included to integrate with Firebase
compile 'com.google.firebase:firebase-messaging:9.2.0' // this line must be included to use FCM
}
Et ajouter à la fin :
apply plugin: 'com.google.gms.google-services'
/* Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file distributed with this work for additional information regarding copyright ownership. The ASF licenses this file to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ apply plugin: 'com.android.application' buildscript { repositories { mavenCentral() jcenter() } // Switch the Android Gradle plugin version requirement depending on the // installed version of Gradle. This dependency is documented at // http://tools.android.com/tech-docs/new-build-system/version-compatibility // and https://issues.apache.org/jira/browse/CB-8143 dependencies { classpath 'com.android.tools.build:gradle:2.1.0' } dependencies { classpath 'com.google.gms:google-services:3.0.0' // Add this line }
} // Allow plugins to declare Maven dependencies via build-extras.gradle. allprojects { repositories { mavenCentral(); jcenter() } } task wrapper(type: Wrapper) { gradleVersion = '2.13' } // Configuration properties. Set these via environment variables, build-extras.gradle, or gradle.properties. // Refer to: http://www.gradle.org/docs/current/userguide/tutorial_this_and_that.html ext { apply from: 'CordovaLib/cordova.gradle' // The value for android.compileSdkVersion. if (!project.hasProperty('cdvCompileSdkVersion')) { cdvCompileSdkVersion = null; } // The value for android.buildToolsVersion. if (!project.hasProperty('cdvBuildToolsVersion')) { cdvBuildToolsVersion = null; } // Sets the versionCode to the given value. if (!project.hasProperty('cdvVersionCode')) { cdvVersionCode = null } // Sets the minSdkVersion to the given value. if (!project.hasProperty('cdvMinSdkVersion')) { cdvMinSdkVersion = null } // Whether to build architecture-specific APKs. if (!project.hasProperty('cdvBuildMultipleApks')) { cdvBuildMultipleApks = null } // .properties files to use for release signing. if (!project.hasProperty('cdvReleaseSigningPropertiesFile')) { cdvReleaseSigningPropertiesFile = null } // .properties files to use for debug signing. if (!project.hasProperty('cdvDebugSigningPropertiesFile')) { cdvDebugSigningPropertiesFile = null } // Set by build.js script. if (!project.hasProperty('cdvBuildArch')) { cdvBuildArch = null } // Plugin gradle extensions can append to this to have code run at the end. cdvPluginPostBuildExtras = [] } // PLUGIN GRADLE EXTENSIONS START apply from: "phonegap-plugin-push/clapp492173-push.gradle" // PLUGIN GRADLE EXTENSIONS END def hasBuildExtras = file('build-extras.gradle').exists() if (hasBuildExtras) { apply from: 'build-extras.gradle' } // Set property defaults after extension .gradle files. if (ext.cdvCompileSdkVersion == null) { ext.cdvCompileSdkVersion = privateHelpers.getProjectTarget() } if (ext.cdvBuildToolsVersion == null) { ext.cdvBuildToolsVersion = privateHelpers.findLatestInstalledBuildTools() } if (ext.cdvDebugSigningPropertiesFile == null && file('debug-signing.properties').exists()) { ext.cdvDebugSigningPropertiesFile = 'debug-signing.properties' } if (ext.cdvReleaseSigningPropertiesFile == null && file('release-signing.properties').exists()) { ext.cdvReleaseSigningPropertiesFile = 'release-signing.properties' } // Cast to appropriate types. ext.cdvBuildMultipleApks = cdvBuildMultipleApks == null ? false : cdvBuildMultipleApks.toBoolean(); ext.cdvMinSdkVersion = cdvMinSdkVersion == null ? null : Integer.parseInt('' + cdvMinSdkVersion) ext.cdvVersionCode = cdvVersionCode == null ? null : Integer.parseInt('' + cdvVersionCode) def computeBuildTargetName(debugBuild) { def ret = 'assemble' if (cdvBuildMultipleApks && cdvBuildArch) { def arch = cdvBuildArch == 'arm' ? 'armv7' : cdvBuildArch ret += '' + arch.toUpperCase().charAt(0) + arch.substring(1); } return ret + (debugBuild ? 'Debug' : 'Release') } // Make cdvBuild a task that depends on the debug/arch-sepecific task. task cdvBuildDebug cdvBuildDebug.dependsOn { return computeBuildTargetName(true) } task cdvBuildRelease cdvBuildRelease.dependsOn { return computeBuildTargetName(false) } task cdvPrintProps << { println('cdvCompileSdkVersion=' + cdvCompileSdkVersion) println('cdvBuildToolsVersion=' + cdvBuildToolsVersion) println('cdvVersionCode=' + cdvVersionCode) println('cdvMinSdkVersion=' + cdvMinSdkVersion) println('cdvBuildMultipleApks=' + cdvBuildMultipleApks) println('cdvReleaseSigningPropertiesFile=' + cdvReleaseSigningPropertiesFile) println('cdvDebugSigningPropertiesFile=' + cdvDebugSigningPropertiesFile) println('cdvBuildArch=' + cdvBuildArch) println('computedVersionCode=' + android.defaultConfig.versionCode) android.productFlavors.each { flavor -> println('computed' + flavor.name.capitalize() + 'VersionCode=' + flavor.versionCode) } } android { sourceSets { main { manifest.srcFile 'AndroidManifest.xml' java.srcDirs = ['src'] resources.srcDirs = ['src'] aidl.srcDirs = ['src'] renderscript.srcDirs = ['src'] res.srcDirs = ['res'] assets.srcDirs = ['assets'] jniLibs.srcDirs = ['libs'] } } defaultConfig { versionCode cdvVersionCode ?: Integer.parseInt("" + privateHelpers.extractIntFromManifest("versionCode")) applicationId privateHelpers.extractStringFromManifest("package") if (cdvMinSdkVersion != null) { minSdkVersion cdvMinSdkVersion } } lintOptions { abortOnError false; } compileSdkVersion cdvCompileSdkVersion buildToolsVersion cdvBuildToolsVersion if (Boolean.valueOf(cdvBuildMultipleApks)) { productFlavors { armv7 { versionCode defaultConfig.versionCode*10 + 2 ndk { abiFilters "armeabi-v7a", "" } } x86 { versionCode defaultConfig.versionCode*10 + 4 ndk { abiFilters "x86", "" } } all { ndk { abiFilters "all", "" } } } } /* ELSE NOTHING! DON'T MESS WITH THE VERSION CODE IF YOU DON'T HAVE TO! else if (!cdvVersionCode) { def minSdkVersion = cdvMinSdkVersion ?: privateHelpers.extractIntFromManifest("minSdkVersion") // Vary versionCode by the two most common API levels: // 14 is ICS, which is the lowest API level for many apps. // 20 is Lollipop, which is the lowest API level for the updatable system webview. if (minSdkVersion >= 20) { defaultConfig.versionCode += 9 } else if (minSdkVersion >= 14) { defaultConfig.versionCode += 8 } } */ compileOptions { sourceCompatibility JavaVersion.VERSION_1_6 targetCompatibility JavaVersion.VERSION_1_6 } if (cdvReleaseSigningPropertiesFile) { signingConfigs { release { // These must be set or Gradle will complain (even if they are overridden). keyAlias = "" keyPassword = "__unset" // And these must be set to non-empty in order to have the signing step added to the task graph. storeFile = null storePassword = "__unset" } } buildTypes { release { signingConfig signingConfigs.release } } addSigningProps(cdvReleaseSigningPropertiesFile, signingConfigs.release) } if (cdvDebugSigningPropertiesFile) { addSigningProps(cdvDebugSigningPropertiesFile, signingConfigs.debug) } } dependencies { compile fileTree(dir: 'libs', include: '*.jar') // SUB-PROJECT DEPENDENCIES START debugCompile project(path: "CordovaLib", configuration: "debug") releaseCompile project(path: "CordovaLib", configuration: "release") compile "com.android.support:support-v4:+" compile "com.android.support:support-v13:23+" compile "com.google.android.gms:play-services-gcm:9.0.2+" compile "me.leolin:ShortcutBadger:1.1.4@aar" // SUB-PROJECT DEPENDENCIES END } def promptForReleaseKeyPassword() { if (!cdvReleaseSigningPropertiesFile) { return; } if ('__unset'.equals(android.signingConfigs.release.storePassword)) { android.signingConfigs.release.storePassword = privateHelpers.promptForPassword('Enter key store password: ') } if ('__unset'.equals(android.signingConfigs.release.keyPassword)) { android.signingConfigs.release.keyPassword = privateHelpers.promptForPassword('Enter key password: '); } } gradle.taskGraph.whenReady { taskGraph -> taskGraph.getAllTasks().each() { task -> if (task.name == 'validateReleaseSigning') { promptForReleaseKeyPassword() } } } def addSigningProps(propsFilePath, signingConfig) { def propsFile = file(propsFilePath) def props = new Properties() propsFile.withReader { reader -> props.load(reader) } def storeFile = new File(props.get('key.store') ?: privateHelpers.ensureValueExists(propsFilePath, props, 'storeFile')) if (!storeFile.isAbsolute()) { storeFile = RelativePath.parse(true, storeFile.toString()).getFile(propsFile.getParentFile()) } if (!storeFile.exists()) { throw new FileNotFoundException('Keystore file does not exist: ' + storeFile.getAbsolutePath()) } signingConfig.keyAlias = props.get('key.alias') ?: privateHelpers.ensureValueExists(propsFilePath, props, 'keyAlias') signingConfig.keyPassword = props.get('keyPassword', props.get('key.alias.password', signingConfig.keyPassword)) signingConfig.storeFile = storeFile signingConfig.storePassword = props.get('storePassword', props.get('key.store.password', signingConfig.storePassword)) def storeType = props.get('storeType', props.get('key.store.type', '')) if (!storeType) { def filename = storeFile.getName().toLowerCase(); if (filename.endsWith('.p12') || filename.endsWith('.pfx')) { storeType = 'pkcs12' } else { storeType = signingConfig.storeType // "jks" } } signingConfig.storeType = storeType } for (def func : cdvPluginPostBuildExtras) { func() } // This can be defined within build-extras.gradle as: // ext.postBuildExtras = { ... code here ... } if (hasProperty('postBuildExtras')) { postBuildExtras() } |
Edition de l’androidmanifest.xml
Notepad androidmanifest.xml
On voit que le package="com.ionicframework.clapp492173"
<?xml version='1.0' encoding='utf-8'?> <manifest android:hardwareAccelerated="true" android:versionCode="1" android:versionName="0.0.1" package="com.ionicframework.clapp492173" xmlns:android="http://schemas.android.com/apk/res/android"> <supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true" /> <uses-permission android:name="android.permission.INTERNET" /> <application android:hardwareAccelerated="true" android:icon="@drawable/icon" android:label="@string/app_name" android:supportsRtl="true"> <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/activity_name" android:launchMode="singleTop" android:name="MainActivity" android:theme="@android:style/Theme.DeviceDefault.NoActionBar" android:windowSoftInputMode="adjustResize"> <intent-filter android:label="@string/launcher_name"> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:exported="true" android:name="com.plugin.gcm.PushHandlerActivity" /> <receiver android:name="com.plugin.gcm.CordovaGCMBroadcastReceiver" android:permission="com.google.android.c2dm.permission.SEND"> <intent-filter> <action android:name="com.google.android.c2dm.intent.RECEIVE" /> <action android:name="com.google.android.c2dm.intent.REGISTRATION" /> <category android:name="com.ionicframework.clapp492173" /> </intent-filter> </receiver> <service android:name="com.plugin.gcm.GCMIntentService" /> </application> <uses-sdk android:minSdkVersion="16" android:targetSdkVersion="23" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" /> <uses-permission android:name="android.permission.WAKE_LOCK" /> <uses-permission android:name="android.permission.VIBRATE" /> <uses-permission android:name="com.google.android.c2dm.permission.RECEIVE" /> <permission android:name="com.ionicframework.clapp492173.permission.C2D_MESSAGE" android:protectionLevel="signature" /> <uses-permission android:name="com.ionicframework.clapp492173.permission.C2D_MESSAGE" /> </manifest> |
L’application ID est la : com.ionicframework.clapp492173
Ajout de Firebase à l’application Android (prod et développement)
Ajouter Firebase à votre application Android
com.ionicframework.clapp492173
Renseigner le nom du package et cliquer sur « ajouter une application »
J’enregistre le fichier Alerte-Immo\google-services.json
Et dans clapp
Voici comment se présente le
fichier google-services.json développement sous visual studio
fichier google-services.json production sous visual studio
{ "project_info": { "project_number": "46214690160", "firebase_url": "https://pushnotificationsprod.firebaseio.com", "project_id": "pushnotificationsprod", "storage_bucket": "pushnotificationsprod.appspot.com" }, "client": [ { "client_info": { "mobilesdk_app_id": "1:46214690160:android:83e3ece20991141e", "android_client_info": { "package_name": "com.ionicframework.clapp492173" } }, "oauth_client": [ { "client_id": "46214690160-6fa3233ga0lba2qc5b3gvq9m5kso8a7a.apps.googleusercontent.com", "client_type": 3 } ], "api_key": [ { "current_key": "AIzaSyCmvVho2ecNOx2mM9azda1KFEnrwLWr-8I" } ], "services": { "analytics_service": { "status": 1 }, "appinvite_service": { "status": 1, "other_platform_oauth_client": [] }, "ads_service": { "status": 2 } } } ], "configuration_version": "1" } |
Attention, normalement, la manip est à faire sur Android Studio, mais comme nous sommes en Cordova/Ionic il faut faire la manip dans le répertoire app directement.
Je vais pouvoir copier ce fichier dans mon répertoire app :
Il rejoint ainsi ses fichiers copains json :
Ionic.config.json
Package.json
Bower.json
…
Je vais maintenant ajouter le code au build.graddle
Editer clapp\platforms\android\build.gradle avec Visual Studio
Modifications effectuées :
/ apply plugin: 'com.android.application' apply plugin: 'com.google.gms.google-services' buildscript { repositories { mavenCentral() jcenter() } // Switch the Android Gradle plugin version requirement depending on the // installed version of Gradle. This dependency is documented at // http://tools.android.com/tech-docs/new-build-system/version-compatibility // and https://issues.apache.org/jira/browse/CB-8143 dependencies { classpath 'com.android.tools.build:gradle:2.1.0' } dependencies { classpath 'com.google.gms:google-services:3.0.0' } } |
Le fichier Json apparait maintenant au niveau de l’application Android, Firebase est maintenant intégrée dans l’application Android:
Il faut maintenant relier le sender ID et la server Key au profil de sécurité :
http://docs.ionic.io/services/profiles/#android-app-keystore
https://developer.android.com/training/articles/keystore.html
Revenir sur le profil de l’application jalerteimmo:
https://apps.ionic.io/apps
https://apps.ionic.io/app/d6271143/config/credentials
Cliquer sur Edit :
Cliquer sur l’onglet « Android »
Charger le .keystore
Rappels : nous avons créé le password du keystore à cette étape :
https://ionicframework.com/docs/guide/publishing.html
https://developer.android.com/studio/publish/app-signing.html
Audit reverse engineering du keystore Android
Vérification des clés :
keytool -list -v -keystore my-release-key.keystore
L’alias est: alias_name
Mettre key alias : alias_name
Key password: jt!ej4684*)360!..
Save
Renseigner la clé GCM ou FCM
J’ai bien renseigné les credentials GCM et Android Keystore pour ce profil :
Installation du plugin phonegap-plugin-push
Je vais utiliser le plugin phonegap qui recevra les push notifications Android/IOS.
Je configure le SENDER_ID qui est le sender ID FCM ou
Attention, ca c’est l’environnement de dev :
ID du outline pushnotifications-9447e
Clé API Web AIzaSyBRrajev-SiQIdAbP4EYOD2PTmvao3gQwE
https://console.developers.google.com/iam-admin/settings/project?project=nomduprojet
ID du projet
139910
Numéro du projet
661124748478576
Ajout du plugin cordova :
phonegap-plugin-pus
h
https://github.com/phonegap/phonegap-plugin-push
cordova plugin add phonegap-plugin-push --variable
SENDER_ID=1234876545445234 --save
developpement:
cordova plugin add phonegap-plugin-push --variable
SENDER_ID=pushn4539447e--save
production:
cordova
plugin add phonegap-plugin-push --variable
SENDER_ID=projet31139910 --save
“phonegap-plugin-push” est bien installé dans \clapp\plugins
https://github.com/phonegap/phonegap-plugin-push/blob/master/docs/API.md#pushnotificationinitoptions
Connexion au compte google pour recuperer la clé de navigateur aler:
Je dois spécifier le sender_id dans la package.json
Comme ceci :
{ "name": "clapp", "version": "1.1.1", "description": "clapp: An Ionic project", "dependencies": { "gulp": "^3.5.6", "gulp-sass": "^2.0.4", "gulp-concat": "^2.2.0", "gulp-minify-css": "^0.3.0", "gulp-rename": "^1.2.0" }, "devDependencies": { "bower": "^1.3.3", "gulp-util": "^2.2.14", "shelljs": "^0.3.0" }, "cordovaPlugins": [ { "variables": { "SENDER_ID": " projetpushnotifications" }, "locator": "phonegap-plugin-push" }, "cordova-plugin-device", "cordova-plugin-console", "cordova-plugin-whitelist", "cordova-plugin-splashscreen", "cordova-plugin-statusbar", "ionic-plugin-keyboard" ], "cordovaPlatforms": [] } |
Déclarer le plugin phonegap-plugin-push dans le \clapp \config.xml
<pluginname="phonegap-plugin-push"spec="1.6.0">
<paramname="SENDER_ID"value="pushnotification2016" />
</plugin>
Ce qui donne (édité avec Visual studio 2015)
<?xmlversion="1.0"encoding="UTF-8"standalone="yes"?> <widgetid="com.ionicframework.clapp492173"version="0.0.1"xmlns="http://www.w3.org/ns/widgets"xmlns:cdv="http://cordova.apache.org/ns/1.0"> <name>clapp</name> <description> An Ionic Framework and Cordova project. </description> <authoremail="Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!"href="http://example.com.com/"> Your Name Here </author> <contentsrc="index.html"/> <accessorigin="*"/> <preferencename="webviewbounce"value="false"/> <preferencename="UIWebViewBounce"value="false"/> <preferencename="DisallowOverscroll"value="true"/> <preferencename="SplashScreenDelay"value="2000"/> <preferencename="FadeSplashScreenDuration"value="2000"/> <preferencename="android-minSdkVersion"value="16"/> <preferencename="BackupWebStorage"value="none"/> <preferencename="SplashScreen"value="screen"/> <featurename="StatusBar"> <paramname="ios-package"onload="true"value="CDVStatusBar"/> </feature> <pluginname="cordova-plugin-device"spec="~1.1.3"/> <pluginname="cordova-plugin-console"spec="~1.0.4"/> <pluginname="cordova-plugin-whitelist"spec="~1.3.0"/> <pluginname="cordova-plugin-splashscreen"spec="~4.0.0"/> <pluginname="cordova-plugin-statusbar"spec="~2.2.0"/> <pluginname="ionic-plugin-keyboard"spec="~2.2.1"/> <pluginname="phonegap-plugin-push"spec="1.6.0"> <paramname="SENDER_ID"value="pushnotifications2016" /> </plugin> <platformname="android"> <preferencename="android-minSdkVersion"value="15"/> <iconsrc="resources/android/icon/drawable-ldpi-icon.png"density="ldpi"/> <iconsrc="resources/android/icon/drawable-mdpi-icon.png"density="mdpi"/> <iconsrc="resources/android/icon/drawable-hdpi-icon.png"density="hdpi"/> <iconsrc="resources/android/icon/drawable-xhdpi-icon.png"density="xhdpi"/> <iconsrc="resources/android/icon/drawable-xxhdpi-icon.png"density="xxhdpi"/> <iconsrc="resources/android/icon/drawable-xxxhdpi-icon.png"density="xxxhdpi"/> <splashsrc="resources/android/splash/drawable-land-ldpi-screen.png"density="land-ldpi"/> <splashsrc="resources/android/splash/drawable-land-mdpi-screen.png"density="land-mdpi"/> <splashsrc="resources/android/splash/drawable-land-hdpi-screen.png"density="land-hdpi"/> <splashsrc="resources/android/splash/drawable-land-xhdpi-screen.png"density="land-xhdpi"/> <splashsrc="resources/android/splash/drawable-land-xxhdpi-screen.png"density="land-xxhdpi"/> <splashsrc="resources/android/splash/drawable-land-xxxhdpi-screen.png"density="land-xxxhdpi"/> <splashsrc="resources/android/splash/drawable-port-ldpi-screen.png"density="port-ldpi"/> <splashsrc="resources/android/splash/drawable-port-mdpi-screen.png"density="port-mdpi"/> <splashsrc="resources/android/splash/drawable-port-hdpi-screen.png"density="port-hdpi"/> <splashsrc="resources/android/splash/drawable-port-xhdpi-screen.png"density="port-xhdpi"/> <splashsrc="resources/android/splash/drawable-port-xxhdpi-screen.png"density="port-xxhdpi"/> <splashsrc="resources/android/splash/drawable-port-xxxhdpi-screen.png"density="port-xxxhdpi"/> </platform> <platformname="ios"> <iconsrc="resources/ios/icon/icon.png"width="57"height="57"/> <iconsrc="resources/ios/icon/Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!"width="114"height="114"/> <iconsrc="resources/ios/icon/icon-40.png"width="40"height="40"/> <iconsrc="resources/ios/icon/Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!"width="80"height="80"/> <iconsrc="resources/ios/icon/Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!"width="120"height="120"/> <iconsrc="resources/ios/icon/icon-50.png"width="50"height="50"/> <iconsrc="resources/ios/icon/Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!"width="100"height="100"/> <iconsrc="resources/ios/icon/icon-60.png"width="60"height="60"/> <iconsrc="resources/ios/icon/Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!"width="120"height="120"/> <iconsrc="resources/ios/icon/Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!"width="180"height="180"/> <iconsrc="resources/ios/icon/icon-72.png"width="72"height="72"/> <iconsrc="resources/ios/icon/Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!"width="144"height="144"/> <iconsrc="resources/ios/icon/icon-76.png"width="76"height="76"/> <iconsrc="resources/ios/icon/Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!"width="152"height="152"/> <iconsrc="resources/ios/icon/Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!"width="167"height="167"/> <iconsrc="resources/ios/icon/icon-small.png"width="29"height="29"/> <iconsrc="resources/ios/icon/Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!"width="58"height="58"/> <iconsrc="resources/ios/icon/Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!"width="87"height="87"/> <splashsrc="resources/ios/splash/Default-568h@2x~iphone.png"height="1136"width="640"/> <splashsrc="resources/ios/splash/Default-667h.png"height="1334"width="750"/> <splashsrc="resources/ios/splash/Default-736h.png"height="2208"width="1242"/> <splashsrc="resources/ios/splash/Default-Landscape-736h.png"height="1242"width="2208"/> <splashsrc="resources/ios/splash/Default-Landscape@2x~ipad.png"height="1536"width="2048"/> <splashsrc="resources/ios/splash/Default-Landscape@~ipadpro.png"height="2048"width="2732"/> <splashsrc="resources/ios/splash/Default-Landscape~ipad.png"height="768"width="1024"/> <splashsrc="resources/ios/splash/Default-Portrait@2x~ipad.png"height="2048"width="1536"/> <splashsrc="resources/ios/splash/Default-Portrait@~ipadpro.png"height="2732"width="2048"/> <splashsrc="resources/ios/splash/Default-Portrait~ipad.png"height="1024"width="768"/> <splashsrc="resources/ios/splash/Default@2x~iphone.png"height="960"width="640"/> <splashsrc="resources/ios/splash/Default~iphone.png"height="480"width="320"/> </platform> </widget> |
Pré-requis du SDK manager
lancer
C:\Program Files (x86)\Android\android-sdk\SDK Manager.exe
Je vérifie que les options suivantes sont cochées
Ne pas oublier de cocher « obsolète » pour faire apparaitre toutes les librairies
- Android Support Library version 23 or greater
- Local Maven repository for Support Libraries (formerly Android Support Repository) version 20 or greater
- Google Play Services version 27 or greater
- Google Repository version 22 or greater
Soit :
Après avoir installé les packages, se placer dans le repertoire
C:\Program Files (x86)\Android\android-sdk\tools
Et faire un
android update sdk --no-ui --filter "extra"
Accepter le user agreement: yes
Acceper la licence: yes
Conseil: appeler PushNotification.init() à chaque fois que le device démarre pour
s’enregistrer sur le service.
Modification du config.xml pour indiquer la version API 15 minimale, android 4.0.3
<?xmlversion="1.0"encoding="UTF-8"standalone="yes"?> <widgetid="com.ionicframework.clapp492173"version="0.0.1"xmlns="http://www.w3.org/ns/widgets"xmlns:cdv="http://cordova.apache.org/ns/1.0"> <name>clapp</name> <description> An Ionic Framework and Cordova project. </description> <authoremail="Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!"href="http://example.com.com/"> Your Name Here </author> <contentsrc="index.html"/> <accessorigin="*"/> <preferencename="webviewbounce"value="false"/> <preferencename="UIWebViewBounce"value="false"/> <preferencename="DisallowOverscroll"value="true"/> <preferencename="SplashScreenDelay"value="2000"/> <preferencename="FadeSplashScreenDuration"value="2000"/> <preferencename="android-minSdkVersion"value="16"/> <preferencename="BackupWebStorage"value="none"/> <preferencename="SplashScreen"value="screen"/> <featurename="StatusBar"> <paramname="ios-package"onload="true"value="CDVStatusBar"/> </feature> <pluginname="cordova-plugin-device"spec="~1.1.3"/> <pluginname="cordova-plugin-console"spec="~1.0.4"/> <pluginname="cordova-plugin-whitelist"spec="~1.3.0"/> <pluginname="cordova-plugin-splashscreen"spec="~4.0.0"/> <pluginname="cordova-plugin-statusbar"spec="~2.2.0"/> <pluginname="ionic-plugin-keyboard"spec="~2.2.1"/> <pluginname="phonegap-plugin-push"spec="1.6.0"> <paramname="SENDER_ID"value="pushnotifications-9447e" /> </plugin> <platformname="android"> <preferencename="android-minSdkVersion"value="15"/> <iconsrc="resources/android/icon/drawable-ldpi-icon.png"density="ldpi"/> <iconsrc="resources/android/icon/drawable-mdpi-icon.png"density="mdpi"/> <iconsrc="resources/android/icon/drawable-hdpi-icon.png"density="hdpi"/> <iconsrc="resources/android/icon/drawable-xhdpi-icon.png"density="xhdpi"/> <iconsrc="resources/android/icon/drawable-xxhdpi-icon.png"density="xxhdpi"/> <iconsrc="resources/android/icon/drawable-xxxhdpi-icon.png"density="xxxhdpi"/> <splashsrc="resources/android/splash/drawable-land-ldpi-screen.png"density="land-ldpi"/> <splashsrc="resources/android/splash/drawable-land-mdpi-screen.png"density="land-mdpi"/> <splashsrc="resources/android/splash/drawable-land-hdpi-screen.png"density="land-hdpi"/> <splashsrc="resources/android/splash/drawable-land-xhdpi-screen.png"density="land-xhdpi"/> <splashsrc="resources/android/splash/drawable-land-xxhdpi-screen.png"density="land-xxhdpi"/> <splashsrc="resources/android/splash/drawable-land-xxxhdpi-screen.png"density="land-xxxhdpi"/> <splashsrc="resources/android/splash/drawable-port-ldpi-screen.png"density="port-ldpi"/> <splashsrc="resources/android/splash/drawable-port-mdpi-screen.png"density="port-mdpi"/> <splashsrc="resources/android/splash/drawable-port-hdpi-screen.png"density="port-hdpi"/> <splashsrc="resources/android/splash/drawable-port-xhdpi-screen.png"density="port-xhdpi"/> <splashsrc="resources/android/splash/drawable-port-xxhdpi-screen.png"density="port-xxhdpi"/> <splashsrc="resources/android/splash/drawable-port-xxxhdpi-screen.png"density="port-xxxhdpi"/> </platform> <platformname="ios"> <iconsrc="resources/ios/icon/icon.png"width="57"height="57"/> <iconsrc="resources/ios/icon/Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!"width="114"height="114"/> <iconsrc="resources/ios/icon/icon-40.png"width="40"height="40"/> <iconsrc="resources/ios/icon/Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!"width="80"height="80"/> <iconsrc="resources/ios/icon/Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!"width="120"height="120"/> <iconsrc="resources/ios/icon/icon-50.png"width="50"height="50"/> <iconsrc="resources/ios/icon/Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!"width="100"height="100"/> <iconsrc="resources/ios/icon/icon-60.png"width="60"height="60"/> <iconsrc="resources/ios/icon/Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!"width="120"height="120"/> <iconsrc="resources/ios/icon/Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!"width="180"height="180"/> <iconsrc="resources/ios/icon/icon-72.png"width="72"height="72"/> <iconsrc="resources/ios/icon/Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!"width="144"height="144"/> <iconsrc="resources/ios/icon/icon-76.png"width="76"height="76"/> <iconsrc="resources/ios/icon/Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!"width="152"height="152"/> <iconsrc="resources/ios/icon/Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!"width="167"height="167"/> <iconsrc="resources/ios/icon/icon-small.png"width="29"height="29"/> <iconsrc="resources/ios/icon/Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!"width="58"height="58"/> <iconsrc="resources/ios/icon/Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!"width="87"height="87"/> <splashsrc="resources/ios/splash/Default-568h@2x~iphone.png"height="1136"width="640"/> <splashsrc="resources/ios/splash/Default-667h.png"height="1334"width="750"/> <splashsrc="resources/ios/splash/Default-736h.png"height="2208"width="1242"/> <splashsrc="resources/ios/splash/Default-Landscape-736h.png"height="1242"width="2208"/> <splashsrc="resources/ios/splash/Default-Landscape@2x~ipad.png"height="1536"width="2048"/> <splashsrc="resources/ios/splash/Default-Landscape@~ipadpro.png"height="2048"width="2732"/> <splashsrc="resources/ios/splash/Default-Landscape~ipad.png"height="768"width="1024"/> <splashsrc="resources/ios/splash/Default-Portrait@2x~ipad.png"height="2048"width="1536"/> <splashsrc="resources/ios/splash/Default-Portrait@~ipadpro.png"height="2732"width="2048"/> <splashsrc="resources/ios/splash/Default-Portrait~ipad.png"height="1024"width="768"/> <splashsrc="resources/ios/splash/Default@2x~iphone.png"height="960"width="640"/> <splashsrc="resources/ios/splash/Default~iphone.png"height="480"width="320"/> </platform>
</widget> |
<platform name="android">
<preference name="android-minSdkVersion" value="15"/>
</platform>
Compiler pour prendre en compte le moteur de push notifications
cordova compile android -- --minSdkVersion=15
Exemple rapide de push notifications
var push = PushNotification.init({ android: {
senderID: "pushnotifications-9447e" }, browser: {
pushServiceURL: 'http://push.api.phonegap.com/v1/push' }, ios: {
alert: "true", badge: "true", sound: "true" }, windows: {}
}); push.on('registration', function(data) { // data.registrationId
}); push.on('notification', function(data) { // data.message,
// data.title,
// data.count,
// data.sound,
// data.image,
// data.additionalData
}); push.on('error', function(e) { // e.message
}); |
Creation du JS de push
Ce JS permet d’enregistrer l’application sur la plate-forme
var push = PushNotification.init({ android: { senderID: "pushnotificationsprod" }, browser: { pushServiceURL: 'http://push.api.phonegap.com/v1/push' }, ios: { alert: "true", badge: "true", sound: "true" }, windows: {} }); push.on('registration', function (data) { // data.registrationId }); push.on('notification', function (data) { // data.message, // data.title, // data.count, // data.sound, // data.image, // data.additionalData }); push.on('error', function (e) { // e.message }); |
https://www.codementor.io/android/tutorial/send-push-notifications-to-android-with-firebase
Envoyer les pushs
https://console.firebase.google.com/project/pushnotificationsprod/notification
http://docs.ionic.io/services/push/
Aller sur le dashboard:
Pré-requis, avoir un compte ionic ID
Creation du compte avec email:
Build
Cordova build android
DL de la dernière version de google-services :
https://bintray.com/android/android-tools/com.google.gms.google-services
https://bintray.com/android/android-tools/com.google.gms.google-services/3.0.0
Gradle plug-in to build Firebase applications. version 3.0.0
compile 'com.google.gms:google-services:3.0.0'
Dans le build.gradle, mettre la v 3.0.0
apply plugin: 'com.google.gms.google-services:3.0.0'
Vous avez un projet d'application?
Consultingit va vous aider: remplissez ce formulaire