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://forum.ionicframework.com/t/firebase-cloud-messaging-for-push-notifications-both-ios-and-android/52637

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

 

https://apps.ionic.io/apps

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:Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.]
Envoyé : lundi 3 octobre 2016 10:17
À : loic.billet
Objet : [Firebase] Welcome to Firebase!

 

Welcome to Firebase!
OPEN CONSOLE

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

  Google Inc.
1600 Amphitheatre Parkway
Mountain View, CA, 94043 USA

 

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

}

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
}

}

// 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-push

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="Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser."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/Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser."width="114"height="114"/>

   <iconsrc="resources/ios/icon/icon-40.png"width="40"height="40"/>

   <iconsrc="resources/ios/icon/Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser."width="80"height="80"/>

   <iconsrc="resources/ios/icon/Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser."width="120"height="120"/>

   <iconsrc="resources/ios/icon/icon-50.png"width="50"height="50"/>

   <iconsrc="resources/ios/icon/Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser."width="100"height="100"/>

   <iconsrc="resources/ios/icon/icon-60.png"width="60"height="60"/>

   <iconsrc="resources/ios/icon/Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser."width="120"height="120"/>

   <iconsrc="resources/ios/icon/Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser."width="180"height="180"/>

   <iconsrc="resources/ios/icon/icon-72.png"width="72"height="72"/>

   <iconsrc="resources/ios/icon/Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser."width="144"height="144"/>

   <iconsrc="resources/ios/icon/icon-76.png"width="76"height="76"/>

   <iconsrc="resources/ios/icon/Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser."width="152"height="152"/>

   <iconsrc="resources/ios/icon/Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser."width="167"height="167"/>

   <iconsrc="resources/ios/icon/icon-small.png"width="29"height="29"/>

   <iconsrc="resources/ios/icon/Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser."width="58"height="58"/>

   <iconsrc="resources/ios/icon/Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser."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="Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser."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/Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser."width="114"height="114"/>

   <iconsrc="resources/ios/icon/icon-40.png"width="40"height="40"/>

   <iconsrc="resources/ios/icon/Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser."width="80"height="80"/>

   <iconsrc="resources/ios/icon/Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser."width="120"height="120"/>

   <iconsrc="resources/ios/icon/icon-50.png"width="50"height="50"/>

   <iconsrc="resources/ios/icon/Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser."width="100"height="100"/>

   <iconsrc="resources/ios/icon/icon-60.png"width="60"height="60"/>

   <iconsrc="resources/ios/icon/Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser."width="120"height="120"/>

   <iconsrc="resources/ios/icon/Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser."width="180"height="180"/>

   <iconsrc="resources/ios/icon/icon-72.png"width="72"height="72"/>

   <iconsrc="resources/ios/icon/Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser."width="144"height="144"/>

   <iconsrc="resources/ios/icon/icon-76.png"width="76"height="76"/>

   <iconsrc="resources/ios/icon/Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser."width="152"height="152"/>

   <iconsrc="resources/ios/icon/Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser."width="167"height="167"/>

   <iconsrc="resources/ios/icon/icon-small.png"width="29"height="29"/>

   <iconsrc="resources/ios/icon/Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser."width="58"height="58"/>

   <iconsrc="resources/ios/icon/Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser."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:

https://apps.ionic.io/

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