Passer au contenu

Personnalisation du plugin Cordova

Notifications push au premier plan

Anchor link to

Lors de la réception d’une notification push en arrière-plan, aucun événement n’est déclenché jusqu’à ce que l’on clique sur la notification push. Après son ouverture, le plugin Pushwoosh déclenche les événements push-receive et push-notification.

Lorsqu’une notification push est reçue au premier plan, le plugin déclenche automatiquement l’événement push-receive et crée une notification dans le Centre de notifications. Lorsque cette notification est ouverte, il déclenche push-notification.

Vous pouvez écouter l’événement push-receive pour réagir immédiatement à une notification push si elle est reçue au premier plan, par exemple pour mettre à jour le contenu de la page actuelle de votre application. D’un autre côté, push-notification est utilisé pour réagir à un événement de clic sur une notification, ce qui nécessite une interaction de l’utilisateur, par exemple pour naviguer dans votre application, déclencher un nouveau processus, etc.

Pour modifier l’apparence de la notification push au premier plan, vous pouvez utiliser les préférences IOS_FOREGROUND_ALERT_TYPE et ANDROID_FOREGROUND_PUSH :

IOS_FOREGROUND_ALERT_TYPE

  • NONE – ne pas afficher de notification lorsque l’application est au premier plan (par défaut)
  • BANNER – affiche une bannière d’alerte dans l’application
  • ALERT – alerte de notification

ANDROID_FOREGROUND_PUSH

  • true – ne pas gérer automatiquement les notifications push au premier plan
  • false – gérer automatiquement les notifications push au premier plan (par défaut)

Exemple :

cordova plugin add pushwoosh-cordova-plugin --variable IOS_FOREGROUND_ALERT_TYPE="ALERT" --variable ANDROID_FOREGROUND_PUSH="true"

Son de notification push personnalisé

Anchor link to

Pour activer un son de notification personnalisé sur Android, placez les fichiers son dans le dossier www/res et spécifiez chaque son dans config.xml :

<?xml version=‘1.0’ encoding=‘utf-8’?>
<widget id="YOUR_ID" version="1.0.0" xmlns="http://www.w3.org/ns/widgets” xmlns:cdv=“http://cordova.apache.org/ns/1.0">
...
<platform name="android">
<allow-intent href="market:*" />
...
<-- Ajoutez cette ligne pour chaque son -->
<resource-file src="www/res/push.wav" target="res/raw/push.wav" />
</platform>
</widget>

Les sons seront accessibles dans le menu déroulant Son du panneau Envoyer un Push.

Sur iOS, les fichiers son ne sont pas encore automatiquement associés à l’Application Pushwoosh, mais peuvent être utilisés manuellement, par exemple www/res/sound_name.wav.

Icône de notification push personnalisée

Anchor link to

L’icône de la notification push peut être personnalisée sur Android localement en utilisant pw_notification comme nom de ressource pour cette icône (voir l’exemple 1 2) ; ou à distance en référençant n’importe quel nom de ressource dans le paramètre Icône du panneau Envoyer un Push.

Données de push personnalisées

Anchor link to

Les données de push personnalisées peuvent être envoyées en utilisant le paramètre Action dans le panneau Envoyer un Push. Pour recevoir et gérer ces données, utilisez le code suivant :

document.addEventListener('push-notification',
function(event) {
var message = event.notification.message; // Message push
var userData = event.notification.userdata; // Données de push personnalisées
if (userData) {
// traitez les données de push personnalisées ici
}
}
);

Contrôle du niveau de log

Anchor link to

Afin d’aider au débogage et à l’intégration, le SDK affichera par défaut toutes les requêtes dans la console. Lorsque vous êtes prêt pour la version de production, définissez la variable LOG_LEVEL sur l’une des valeurs suivantes :

  • NONE – aucun log du SDK
  • ERROR – affiche uniquement les erreurs dans la console
  • WARNING – affiche les avertissements
  • INFO – affiche les messages d’information
  • DEBUG – affiche tout, y compris les informations de débogage (par défaut)

Exemple :

cordova plugin add pushwoosh-cordova-plugin --variable LOG_LEVEL="INFO"

Liens profonds (Deep linking)

Anchor link to

Nous recommandons d’utiliser https://github.com/EddyVerbruggen/Custom-URL-scheme
Il est très facile de configurer des liens profonds pour Cordova et cela fonctionne de manière prête à l’emploi avec la fonctionnalité de liens profonds de Pushwoosh.

Vous pouvez trouver les instructions d’installation et d’utilisation dans ce guide ou dans la documentation du plugin.

Passerelle JS pour Rich Media

Anchor link to

Vous pouvez appeler vos fonctions JS depuis un Rich Media dans la WebView de Cordova via des interfaces javascript.
Un appel depuis un Rich Media doit avoir le format suivant :

<interface>.callFunction(‘<nom_de_la_fonction>’, <chaîne_de_paramètres>)

Exemple :

1. Créez un Rich Media avec un appel javascript :

testBridge.callFunction('testFunction', JSON.stringify({'param1' : 1, 'param2':'test'}))

2. Ajoutez une interface javascript à votre projet :

pushNotification.addJavaScriptInterface('testBridge');

3. Ajoutez une fonction :

function testFunction(params) {
alert("La passerelle fonctionne ! " + params.param1 + " " + params.param2);
}

Utilisation du plugin Pushwoosh avec d’autres services FCM

Anchor link to

Si votre application utilise d’autres plugins qui dépendent de firebase-messaging, cela peut entraîner des conflits ou l’un des plugins pourrait ne pas fonctionner comme prévu. Pour résoudre ce conflit, vous pouvez ajouter une classe FirebaseMessagingService personnalisée qui routera les notifications push entre les plugins. Le plugin Pushwoosh pour Cordova contient un modèle de cette classe que vous pouvez utiliser tel quel pour forcer toutes les notifications à passer par les gestionnaires Pushwoosh, ou le modifier pour gérer également les notifications d’autres fournisseurs. Pour activer le modèle, décommentez les lignes suivantes dans le plugin.xml du plugin :

<service android:name="com.pushwoosh.plugin.pushnotifications.CustomFirebaseMessagingService" android:exported="false">
<intent-filter>
<action android:name="com.google.firebase.MESSAGING_EVENT"/>
</intent-filter>
</service>

Partagez vos commentaires avec nous

Anchor link to

Vos retours nous aident à créer une meilleure expérience, c’est pourquoi nous serions ravis d’avoir votre avis si vous rencontrez des problèmes durant le processus d’intégration du SDK. Si vous rencontrez des difficultés, n’hésitez pas à nous faire part de vos réflexions via ce formulaire.