react native push notification
8.1.1
React Native Notifications locales et distantes pour iOS et Android
Ce référentiel n'est pas activement maintenu. La raison principale est le temps. Le deuxième est probablement la complexité des notifications sur iOS et Android. Étant donné que ce projet a probablement besoin d'une énorme refactorisation pour résoudre un problème ou pour implémenter de nouvelles fonctionnalités. Je pense que vous devriez probablement envisager ces alternatives : Notifee gratuit depuis septembre ou réagir-native-notifications.
Si vous souhaitez devenir responsable de ce projet, n'hésitez pas à poser des questions.
Vérifiez les modifications et la migration dans le CHANGELOG :
Journal des modifications
Les mainteneurs sont les bienvenus ! N'hésitez pas à me contacter
Le changelog est disponible à partir de la version 3.1.3 ici : Changelog
npm install --save react-native-push-notification
yarn add react-native-push-notification
REMARQUE : Si vous ciblez iOS, vous devez également suivre les instructions d'installation de PushNotificationIOS puisque ce package en dépend.
REMARQUE : Pour Android, vous devrez toujours mettre à jour manuellement le fichier AndroidManifest.xml (comme ci-dessous) afin d'utiliser les notifications programmées.
Vous avez un problème ? Lisez le guide de dépannage avant de soulever un problème.
Veuillez lire...
Le composant utilise PushNotificationIOS pour la partie iOS. Vous devez suivre leurs instructions d'installation.
REMARQUE : firebase-messaging , antérieur à la version 15, nécessite d'avoir le même numéro de version pour fonctionner correctement au moment de la construction et au moment de l'exécution. Pour utiliser une version spécifique :
Dans votre android/build.gradle
poste {
googlePlayServicesVersion = "<Votre version de vos services de jeu>" // par défaut : "+"firebaseMessagingVersion = "<Votre version de Firebase>" // par défaut : "21.1.0"// Autres paramètrescompileSdkVersion = <Votre version du SDK de compilation> // par défaut : 23buildToolsVersion = "<Version de vos outils de build>" // par défaut : "23.0.1"targetSdkVersion = <Votre version du SDK cible> // par défaut : 23supportLibVersion = "<Votre version de votre bibliothèque de support>" // par défaut : 23.1.1}REMARQUE : localNotification() fonctionne sans modifications dans la partie application, tandis que localNotificationSchedule() ne fonctionne qu'avec ces modifications :
Dans votre android/app/src/main/AndroidManifest.xml
.....
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
<application ....><!-- Modifiez la valeur sur true pour activer les fenêtres contextuelles au premier plan lors de la réception de notifications à distance (pour éviter la duplication lors de l'affichage des notifications locales, définissez-la sur false) --><meta-data android : name="com.dieam.reactnativepushnotification.notification_foreground"android:value="false"/><!-- Changez le nom de la ressource en la couleur d'accent de votre application - ou toute autre couleur de votre choix --><meta-data android:name="com.dieam.reactnativepushnotification.notification_color"android:resource="@color/white"/> <!-- ou @android:color/{name} pour utiliser une couleur standard --><receiver android : name="com.dieam.reactnativepushnotification.modules.RNPushNotificationActions" />
<récepteur android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationPublisher" />
<récepteur android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationBootEventReceiver">
<filtre d'intention>
<action android:name="android.intent.action.BOOT_COMPLETED" />
<action android:name="android.intent.action.QUICKBOOT_POWERON" />
<action android:name="com.htc.intent.action.QUICKBOOT_POWERON"/>
</intent-filter>
</récepteur>
<serviceandroid:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService"android:exported="false" >
<filtre d'intention>
<action android:name="com.google.firebase.MESSAGING_EVENT" />
</intent-filter>
</service>
..... Si vous n’utilisez pas de couleur Android intégrée ( @android:color/{name} ) pour l’élément meta-data notification_color . Dans android/app/src/main/res/values/colors.xml (Créez le fichier s'il n'existe pas).
<ressources>
<color name="white">#FFF</color>
</ressources> Si votre application a un @Override sur onNewIntent dans MainActivity.java assurez-vous que la fonction inclut un super appel sur onNewIntent (si votre MainActivity.java n'a pas de @Override pour onNewIntent, ignorez ceci) :
@Overridepublic void onNewIntent (intention d'intention) {
...super.onNewIntent(intention);
...
}Assurez-vous d'avoir installé correctement la configuration de Firebase.
Dans android/build.gradle
script de construction {...
dépendances {...
chemin de classe('com.google.gms:google-services:4.3.3')...
}
} Dans android/app/build.gradle
dépendances { ...
implémentation 'com.google.firebase:firebase-analytics:17.3.0'
...
}
appliquer le plugin : 'com.google.gms.google-services' Ensuite, mettez votre google-services.json dans android/app/ .
Remarque : Firebase/release-notes
La bibliothèque Firebase Android
firebase-coren'est plus nécessaire. Ce SDK incluait le SDK Firebase pour Google Analytics.Désormais, pour utiliser Analytics ou tout produit Firebase qui recommande l'utilisation d'Analytics (voir le tableau ci-dessous), vous devez ajouter explicitement la dépendance Analytics :
com.google.firebase:firebase-analytics:17.3.0.
Dans android/settings.gradle
...
include ':react-native-push-notification'project(':react-native-push-notification').projectDir = file('../node_modules/react-native-push-notification/android') Dans votre android/app/build.gradle
dépendances {...
projet d'implémentation (':react-native-push-notification')...
} Enregistrez manuellement le module dans MainApplication.java (si vous n'avez pas utilisé react-native link ) :
importer com.dieam.reactnativepushnotification.ReactNativePushNotificationPackage ; // <--- Import Packagepublic class MainApplication extends Application Implements ReactApplication { private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { @Override protected boolean getUseDeveloperSupport() {return BuildConfig.DEBUG;
} @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), new ReactNativePushNotificationPackage() // <---- Ajouter le package );
}
} ;
....
} N'UTILISEZ PAS .configure() À L'INTÉRIEUR D'UN COMPOSANT, MÊME App
Si vous le faites, les gestionnaires de notifications ne se déclencheront pas car ils ne sont pas chargés. Utilisez plutôt
.configure()dans le premier fichier de l'application, généralementindex.js.
importer PushNotificationIOS depuis "@react-native-community/push-notification-ios" ; importer PushNotification depuis "react-native-push-notification" ;// Doit être en dehors de tout cycle de vie de composant (tel que `componentDidMount`).PushNotification. configurer({
// (facultatif) Appelé lorsque le jeton est généré (iOS et Android)
onRegister : function (jeton) {console.log("TOKEN:", jeton);
},
// (obligatoire) Appelé lorsqu'une télécommande est reçue ou ouverte, ou qu'une notification locale est ouverte
onNotification : function (notification) {console.log("NOTIFICATION:", notification);// traiter la notification// (obligatoire) Appelé lorsqu'une télécommande est reçue ou ouverte, ou qu'une notification locale est ouvertenotification.finish(PushNotificationIOS.FetchResult. Aucune donnée);
},
// (facultatif) Appelé lorsque l'action enregistrée est enfoncée et que EnsureApp est faux, si vrai, onNotification sera appelé (Android)
onAction : function (notification) {console.log("ACTION:", notification.action);console.log("NOTIFICATION:", notification);// traiter l'action
},
// (facultatif) Appelé lorsque l'utilisateur ne parvient pas à s'inscrire aux notifications à distance. Se produit généralement lorsque APNS rencontre des problèmes ou que l'appareil est un simulateur. (iOS)
onRegistrationError : function(err) {console.error(err.message, err);
},
// IOS UNIQUEMENT (facultatif) : par défaut : tous - Autorisations d'enregistrement.
autorisations : {alerte : vrai,badge : vrai,son : vrai,
},
// La notification initiale doit-elle apparaître automatiquement
// par défaut : vrai
popInitialNotification : vrai,
/** * (facultatif) par défaut : true * - Spécifié si les autorisations (ios) et le jeton (android et ios) seront demandés ou non, * - sinon, vous devez appeler PushNotificationsHandler.requestPermissions() plus tard * - si vous ne l'êtes pas en utilisant la notification à distance ou si Firebase n'est pas installé, utilisez ceci : * requestPermissions : Platform.OS === 'ios' */
requestPermissions : true,}); Le dossier Exemple contient un exemple d’application pour montrer comment utiliser ce package. La gestion des notifications est effectuée dans NotifService.js .
Veuillez tester vos PR avec cet exemple d'application avant de les soumettre. Cela aidera à maintenir ce dépôt.
Lorsqu'une notification est ouverte ou reçue, le rappel onNotification est appelé en passant un objet avec les données de notification.
Exemple d'objet de notification :
{foreground : false, // BOOLEAN : Si la notification a été reçue en premier plan ou notuserInteraction : false, // BOOLEAN : Si la notification a été ouverte par l'utilisateur depuis la zone de notification ou notmessage : 'My Notification Message', // STRING : Les données du message de notification : {}, // OBJET : Les données push ou les userInfo définies dans les notifications locales}PushNotification.localNotification (détails : objet)
EXEMPLE:
PushNotification.localNotification({
/* Propriétés Android uniquement */
ChannelId : "your-channel-id", // (obligatoire) ChannelId, si le canal n'existe pas, la notification ne se déclenchera pas.
ticker : "Mon ticker de notification", // (facultatif)
showWhen : true, // (facultatif) par défaut : true
autoCancel : true, // (facultatif) par défaut : true
largeIcon : "ic_launcher", // (facultatif) par défaut : "ic_launcher". Utilisez "" pour aucune grande icône.
largeIconUrl : "https://www.example.tld/picture.jpg", // (facultatif) par défaut : non défini
smallIcon : "ic_notification", // (facultatif) par défaut : "ic_notification" avec repli pour "ic_launcher". Utilisez "" pour la petite icône par défaut.
bigText : "Mon gros texte qui sera affiché lorsque la notification est développée. Le style peut être effectué à l'aide de balises HTML (voir la documentation Android pour plus de détails)", // (facultatif) par défaut : accessoire "message"
subText : "Ceci est un sous-texte", // (facultatif) par défaut : aucun
bigPictureUrl : "https://www.example.tld/picture.jpg", // (facultatif) par défaut : non défini
bigLargeIcon : "ic_launcher", // (facultatif) par défaut : non défini
bigLargeIconUrl : "https://www.example.tld/bigicon.jpg", // (facultatif) par défaut : non défini
couleur : "rouge", // (facultatif) par défaut : valeur par défaut du système
vibrer : vrai, // (facultatif) par défaut : vrai
vibration : 300, // durée de la vibration en millisecondes, ignorée si vibrate=false, par défaut : 1000
tag : "some_tag", // (facultatif) ajouter une balise au message
group : "group", // (facultatif) ajouter un groupe au message
groupSummary : false, // (facultatif) définit cette notification comme étant le résumé de groupe pour un groupe de notifications, par défaut : false
en cours : faux, // (facultatif) définit s'il s'agit d'une notification "en cours"
priorité : "élevée", // (facultatif) définir la priorité de notification, par défaut : élevée
visibilité : "privé", // (facultatif) définir la visibilité des notifications, par défaut : privé
ignoreInForeground : false, // (facultatif) si vrai, la notification ne sera pas visible lorsque l'application est au premier plan (utile pour la parité avec la façon dont les notifications iOS apparaissent). doit être utilisé en combinaison avec le paramètre `com.dieam.reactnativepushnotification.notification_foreground`
shortcutId : "shortcut-id", // (facultatif) Si cette notification fait double emploi avec un raccourci du lanceur, définit l'identifiant du raccourci, au cas où le lanceur souhaite masquer le raccourci, valeur par défaut non définie
onlyAlertOnce : false, // (facultatif) l'alerte ne s'ouvrira qu'une seule fois avec un son et une notification, par défaut : false
when : null, // (facultatif) Ajoutez un horodatage (valeur d'horodatage Unix en millisecondes) relatif à la notification (généralement l'heure à laquelle l'événement s'est produit). Pour les applications ciblant Build.VERSION_CODES.N et versions ultérieures, cette heure n'est plus affichée par défaut et doit être activée en utilisant « showWhen », par défaut : null.
usesChronometer : false, // (facultatif) Afficher le champ « quand » comme chronomètre. Au lieu de présenter « quand » sous forme d'horodatage, la notification affichera un affichage mis à jour automatiquement des minutes et des secondes depuis quand. Utile pour afficher un temps écoulé (comme un appel téléphonique en cours), par défaut : false.
timeoutAfter : null, // (facultatif) Spécifie une durée en millisecondes après laquelle cette notification doit être annulée, si elle ne l'est pas déjà, par défaut : null
messageId : "google:message_id", // (facultatif) ajouté en tant que `message_id` aux extras d'intention afin que l'ouverture de la notification push puisse trouver les données stockées par le module @react-native-firebase/messaging.
actions : ["Oui", "Non"], // (Android uniquement) Voir la doc des actions de notification pour en savoir plus
InvoqueApp : true, // (facultatif) Cela permet de cliquer sur des actions pour ramener l'application au premier plan ou rester en arrière-plan, par défaut : true
/* Propriétés iOS uniquement */
catégorie : "", // (facultatif) par défaut : chaîne vide
sous-titre : "Mon sous-titre de notification", // (facultatif) titre plus petit sous le titre de la notification
/* Propriétés iOS et Android */
id : 0, // (facultatif) Entier unique valide de 32 bits spécifié sous forme de chaîne. par défaut : ID unique généré automatiquement
title : "Mon titre de notification", // (facultatif)
message : "Mon message de notification", // (obligatoire)
Picture : "https://www.example.tld/picture.jpg", // (facultatif) Afficher une image avec la notification, alias de `bigPictureUrl` pour Android. par défaut : non défini
userInfo : {}, // (facultatif) par défaut : {} (l'utilisation de null génère une erreur de valeur JSON '<null>')
playSound : false, // (facultatif) par défaut : true
soundName : "default", // (facultatif) Son à jouer lorsque la notification est affichée. La valeur « par défaut » joue le son par défaut. Il peut être défini sur un son personnalisé tel que « android.resource://com.xyz/raw/my_sound ». Il recherchera le fichier audio « my_sound » dans le répertoire « res/raw » et le jouera. par défaut : 'default' (le son par défaut est joué)
number : 10, // (facultatif) Entier valide de 32 bits spécifié sous forme de chaîne. par défaut : aucun (ne peut pas être zéro)
repeatType : "day", // (facultatif) Intervalle de répétition. Consultez la section « Notifications répétées » pour plus d'informations.} );PushNotification.localNotificationSchedule (détails : objet)
EXEMPLE:
PushNotification.localNotificationSchedule({
//... Vous pouvez utiliser toutes les options de localNotifications
message : "Mon message de notification", // (obligatoire)
date : new Date(Date.now() + 60 * 1000), // dans 60 secondes
allowWhileIdle : false, // (facultatif) définit la notification pour qu'elle fonctionne pendant la somnolence, par défaut : false
/* Propriétés Android uniquement */
RepeatTime : 1, // (facultatif) Incrément du type de répétition configuré. Consultez la section « Notifications répétées » pour plus d'informations.} );PushNotification.popInitialNotification (rappel)
EXEMPLE:
PushNotification.popInitialNotification((notification) => {
console.log('Notification initiale', notification);}); Sous Android, ajoutez votre fichier son personnalisé à [project_root]/android/app/src/main/res/raw
Sous iOS, ajoutez votre fichier son personnalisé aux Resources du projet dans xCode.
Dans le json de notification d'emplacement, spécifiez le nom complet du fichier :
soundName: 'my_sound.mp3'
Pour utiliser des canaux, créez-les au démarrage et transmettez le channelId correspondant à PushNotification.localNotification ou PushNotification.localNotificationSchedule .
importer PushNotification, {Importance} depuis 'react-native-push-notification';... PushNotification.createChannel({channelId : "channel-id", // (obligatoire) channelName : "Ma chaîne", // (obligatoire) channelDescription : "Un canal pour catégoriser vos notifications", // (facultatif) par défaut : non défini. playSound : false, // (facultatif) par défaut : true soundName : "default", // (facultatif) Voir Paramètre `soundName` de la fonction `localNotification` importance : Importance.HIGH, // (facultatif) par défaut : Importance.HIGH valeur Int de l'importance de la notification Android vibrer : true, // (facultatif) par défaut : true Crée la vibration par défaut. pattern if true.},(created) => console.log(`createChannel return '${created}'`) // (facultatif) le rappel renvoie si le canal a été créé, false signifie qu'il existait déjà.
);REMARQUE : Sans canal, les notifications ne fonctionnent pas
Dans les options de notifications, vous devez fournir un identifiant de chaîne avec channelId: "your-channel-id" , si la chaîne n'existe pas, la notification pourrait ne pas être déclenchée. Une fois la chaîne créée, elle ne peut pas être mise à jour. Assurez-vous que votre channelId est différent si vous modifiez ces options. Si vous avez créé une chaîne d'une autre manière, les options de la chaîne seront appliquées.
Si vous souhaitez utiliser un autre canal par défaut pour la notification à distance, reportez-vous à la documentation de Firebase :
Configurer une application client Firebase Cloud Messaging sur Android
<méta-données android:name="com.google.firebase.messaging.default_notification_channel_id" android:value="@string/default_notification_channel_id" />
Pour les notifications locales, le même type d'option est disponible :
vous pouvez utiliser :
<méta-données android:name="com.dieam.reactnativepushnotification.default_notification_channel_id" android:value="@string/default_notification_channel_id" />
Si elle n'est pas définie, revenez à la valeur Firebase définie dans AndroidManifest :
<méta-données android:name="com.google.firebase.messaging.default_notification_channel_id" android:value="..." />
S'il n'est pas défini, revenez à l'ID de canal Firebase par défaut fcm_fallback_notification_channel
Vous pouvez lister les chaînes disponibles avec :
PushNotification.getChannels (fonction (channel_ids) {
console.log(channel_ids); // ['channel_id_1']});Vous pouvez vérifier si une chaîne existe avec :
PushNotification.channelExists(channel_id, fonction (existe) {
console.log (existe); // vrai/faux});Vous pouvez vérifier si une chaîne est bloquée avec :
PushNotification.channelBlocked(channel_id, fonction (bloquée) {
console.log (bloqué); // vrai/faux});Vous pouvez supprimer une chaîne avec :
PushNotification.deleteChannel(channel_id);
Le paramètre id pour PushNotification.localNotification est requis pour cette opération. L’identifiant fourni sera ensuite utilisé pour l’opération d’annulation.
PushNotification.localNotification({...id: '123'...});PushNotification.cancelLocalNotification('123' 
