PricingLoginStart free
React Native Academy · Leçon

Canaux de notification et contenu enrichi

Créez des canaux de notification sur Android pour différents types de notifications, ajoutez des images et des boutons d'action aux notifications, puis configurez le nombre de badges sur iOS.

Leçon 4 sur 413 étapes

Canaux de notification et contenu enrichi est une leçon React Native Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Native Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Native Academy comprend 4 leçons au total.

Que sont les canaux de notification ?

Les canaux de notification sont des catégories de notifications que les utilisateurs Android peuvent contrôler indépendamment. Introduits dans Android 8 (API 26), ils permettent aux utilisateurs de choisir les types de notifications de votre application qu’ils souhaitent recevoir — par exemple, autoriser les « Messages » mais bloquer les « Promotions ». Chaque canal possède ses propres paramètres de son, de vibration et d’importance.

Les canaux sont propres à Android. iOS dispose de son propre système de gestion des notifications, avec les catégories de notifications et les réglages utilisateur, mais n’a pas d’équivalent direct aux canaux. Protégez toujours le code de configuration des canaux par une vérification de Platform.OS.

import * as Notifications from 'expo-notifications';
import { Platform } from 'react-native';

async function setupChannels() {
  if (Platform.OS !== 'android') return;

  // Create your app's notification channels:
  await Notifications.setNotificationChannelAsync('messages', { ... });
  await Notifications.setNotificationChannelAsync('reminders', { ... });
  await Notifications.setNotificationChannelAsync('promotions', { ... });
}

Création d’un canal de notification

Créez un canal avec Notifications.setNotificationChannelAsync(channelId, config). La configuration inclut le name (affiché aux utilisateurs dans les réglages), l’importance (le niveau de visibilité des notifications), vibrationPattern, lightColor et l’activation ou non de enableVibrate.

Les canaux sont permanents : une fois créés, les utilisateurs peuvent les modifier dans les réglages et votre application ne peut pas remplacer leurs préférences. Créez les canaux avant de les utiliser et exécutez cette configuration à chaque lancement de l’application, car les canaux persistent lors des réinstallations de l’application grâce à leur identifiant.

await Notifications.setNotificationChannelAsync('messages', {
  name: 'Messages',
  description: 'New messages from other users',
  importance: Notifications.AndroidImportance.HIGH,
  vibrationPattern: [0, 250, 250, 250],
  lightColor: '#0066CC',
  enableVibrate: true,
  enableLights: true,
  showBadge: true,
  lockscreenVisibility: Notifications.AndroidNotificationVisibility.PUBLIC,
});

Niveaux d’importance des canaux

Le niveau d’importance contrôle l’intensité avec laquelle la notification interrompt l’utilisateur :

  • NONE (0) — ne s’affiche jamais
  • MIN (1) — aucun son ni bannière, apparaît dans le volet
  • LOW (2) — aucun son ni bannière, apparaît dans le volet
  • DEFAULT (3) — émet un son et apparaît sous forme de bannière
  • HIGH (4) — émet un son et s’affiche de manière visible
  • MAX (5) — s’affiche toujours et réveille l’écran

Utilisez HIGH pour les communications urgentes (messages, appels), et DEFAULT ou LOW pour les mises à jour informatives et le contenu promotionnel.

// Different channels with appropriate importance:
await Notifications.setNotificationChannelAsync('calls', {
  name: 'Incoming Calls',
  importance: Notifications.AndroidImportance.MAX, // wakes screen
});

await Notifications.setNotificationChannelAsync('news', {
  name: 'News Updates',
  importance: Notifications.AndroidImportance.LOW, // unobtrusive
});

await Notifications.setNotificationChannelAsync('marketing', {
  name: 'Promotions',
  importance: Notifications.AndroidImportance.MIN, // nearly invisible
});

Association des notifications aux canaux

Lors de l’envoi d’une notification push vers un appareil Android, indiquez le canal auquel elle appartient en incluant channelId dans le message de notification. Si aucun canal n’est indiqué, la notification est placée dans le canal par défaut. Dans les anciennes versions d’Android (antérieures à l’API 26), l’identifiant du canal est ignoré.

Associer correctement les notifications aux canaux est important : les utilisateurs qui désactivent le canal « Promotions » s’attendent à ce que leur canal « Messages » reste actif. Mélanger plusieurs types de notifications dans un même canal conduit les utilisateurs à désactiver des notifications importantes.

// In push notification payload:
const message = {
  to: pushToken,
  title: 'Alice: Hey, are you free tonight?',
  body: 'New message from Alice',
  channelId: 'messages',     // routes to messages channel
  data: { screen: 'Chat', conversationId: 'alice_123' },
};

// For a promotional notification:
const promo = {
  to: pushToken,
  title: 'Weekend Sale — 30% off!',
  channelId: 'promotions',   // low importance, unobtrusive
};

Groupes de notifications sur Android

Lorsqu’un utilisateur reçoit plusieurs notifications non lues de votre application, Android peut les regrouper en une seule notification extensible afin de ne pas surcharger le volet des notifications. Configurez le regroupement en définissant groupId dans la charge utile de la notification et en créant une notification récapitulative.

Lorsqu’elles sont réduites, les notifications regroupées s’affichent empilées avec un compteur ; lorsqu’elles sont développées, elles présentent les notifications individuelles. Cette fonctionnalité est importante pour les applications de conversation, dans lesquelles un utilisateur peut recevoir de nombreux messages avant d’ouvrir l’application.

// Send individual notifications with group ID:
const messageNotif = {
  to: token,
  title: 'Alice: Hello!',
  channelId: 'messages',
  android: {
    groupId: 'chat_messages',
    tag: 'msg_alice_1',
  },
};

// Send group summary:
const summary = {
  to: token,
  title: '3 new messages',
  channelId: 'messages',
  android: {
    groupId: 'chat_messages',
    groupSummary: true,
  },
};

Notifications enrichies : images et texte volumineux

Android prend en charge des styles de notification enrichis qui vont au-delà du titre et du corps du texte. Le style BigPicture affiche une grande image dans la notification développée. Le style BigText affiche plusieurs lignes de texte lorsque la notification est développée. Ces styles rendent les notifications plus informatives et attrayantes.

Dans expo-notifications, utilisez les champs android.bigPicture ou android.bigText dans le contenu de la notification. Les notifications enrichies nécessitent la prise en charge des canaux Android et favorisent davantage l'engagement que les simples notifications textuelles.

const richNotification = {
  to: token,
  title: 'New photo from Alice',
  body: 'Alice shared a photo with you',
  channelId: 'messages',
  android: {
    imageUrl: 'https://myapp.com/photos/photo123.jpg', // big picture
    color: '#FF6B6B',
    actions: [
      { title: 'View', action: 'view_photo' },
      { title: 'Dismiss', action: 'dismiss' },
    ],
  },
};

Notifications enrichies sur iOS

iOS prend en charge les notifications enrichies grâce aux extensions de service de notification — une cible distincte de l'application qui intercepte les notifications push avant leur affichage et peut ajouter des images, modifier le contenu ou télécharger des fichiers multimédias. Cela nécessite du code natif en dehors de l'API gérée d'expo-notifications.

Pour les cas d'utilisation plus simples, les notifications push iOS peuvent inclure un indicateur mutable-content: 1 et une URL de pièce jointe multimédia dans la charge utile APNs, traités par une extension de service de notification. Pour les applications Expo gérées, cela nécessite un plugin de configuration ou le flux de travail bare.

// iOS push payload (APNs level):
// expo-notifications sends this automatically
// when you set content fields:
const iOSPushPayload = {
  aps: {
    alert: {
      title: 'New photo from Alice',
      body: 'Alice shared a photo with you',
    },
    sound: 'default',
    badge: 3,
    'mutable-content': 1, // allows service extension to modify
    'content-available': 1, // allows background fetch
  },
};

Gestion du nombre de badges sur iOS

Sur iOS, le nombre de badges apparaît sous la forme d'un nombre rouge sur l'icône de l'application dans l'écran d'accueil. Définissez le nombre de badges dans le champ badge de la charge utile de la notification push. Le serveur doit toujours envoyer le nombre total de notifications non lues (un nombre absolu), et non une valeur d'incrément, car plusieurs appareils doivent afficher le même nombre de badges.

Lorsque l'utilisateur ouvre et lit toutes les notifications, réinitialisez le badge à 0 avec Notifications.setBadgeCountAsync(0). Ajoutez cet appel à l'écran qui affiche la liste des notifications afin que le badge soit naturellement effacé lorsque l'utilisateur consulte sa boîte de réception.

// Push payload — absolute unread count:
const notification = {
  to: token,
  title: 'Alice sent you a message',
  body: 'Click to read',
  badge: 5, // total unread, not +1
};

// In app, when inbox is opened:
import * as Notifications from 'expo-notifications';

useEffect(() => {
  return navigation.addListener('focus', () => {
    Notifications.setBadgeCountAsync(0); // clear on inbox open
  });
}, [navigation]);

Personnalisation du son des notifications

iOS et Android prennent tous deux en charge les sons de notification personnalisés. Ajoutez les fichiers audio au paquet de votre application et référencez-les par leur nom de fichier. Sur iOS, les fichiers .aiff, .wav ou .caf de moins de 30 secondes peuvent servir de sons de notification. Sur Android, les sons sont configurés au niveau du canal.

Pour le flux de travail Expo géré, ajoutez les fichiers audio au dossier assets et référencez-les via un plugin de configuration ou le flux de travail bare. De nombreuses applications ignorent les sons personnalisés et utilisent le son système par défaut, que les utilisateurs ont déjà l'habitude de remarquer.

// iOS: add sound file to iOS app bundle
// Android: create channel with sound
if (Platform.OS === 'android') {
  await Notifications.setNotificationChannelAsync('messages', {
    name: 'Messages',
    importance: Notifications.AndroidImportance.HIGH,
    sound: 'message_sound', // filename without extension
  });
}

// In push payload:
{
  to: token,
  sound: 'default', // use system default
  // Or: sound: 'message_sound.aiff' on iOS
}

Suppression des canaux de notification

Si vous restructurez vos types de notification, vous pouvez supprimer les anciens canaux avec Notifications.deleteNotificationChannelAsync(channelId). La suppression et la recréation d'un canal avec le même ID réinitialisent les personnalisations de l'utilisateur — cette pratique est controversée, car elle remplace ses préférences.

Bonne pratique : évitez de supprimer les canaux que les utilisateurs ont peut-être personnalisés. Rendez plutôt obsolètes les anciens canaux en en créant de nouveaux avec de meilleurs noms, puis en acheminant les nouvelles notifications vers le nouveau canal. Les anciens canaux deviennent vides, mais restent visibles dans les réglages (ils disparaissent après la réinstallation de l'application).

// Get all current channels:
const channels = await Notifications.getNotificationChannelsAsync();
console.log('Active channels:', channels.map(c => c.id));

// Delete a deprecated channel:
await Notifications.deleteNotificationChannelAsync('old_alerts');

// CAUTION: this resets any user customizations
// for that channel ID if recreated

État des autorisations de notification et réglages dans l'application

Proposez des commandes de préférences de notification dans l'application, même si l'autorisation au niveau du système d'exploitation est accordée. Les utilisateurs doivent pouvoir refuser les notifications marketing tout en conservant les notifications de messages. Implémentez des indicateurs de préférences côté serveur pour chaque utilisateur et chaque type de notification.

Proposez également une interface claire lorsque l'autorisation du système d'exploitation est refusée, avec un bouton qui ouvre l'application Réglages à l'aide de Linking.openSettings(). Cela évite que les utilisateurs pensent que votre application ne fonctionne pas alors qu'ils ont refusé les autorisations sans le savoir.

import { Linking } from 'react-native';
import * as Notifications from 'expo-notifications';

async function checkAndPromptPermission() {
  const { status } = await Notifications.getPermissionsAsync();

  if (status === 'denied') {
    Alert.alert(
      'Notifications Disabled',
      'Enable notifications in Settings to receive important updates.',
      [
        { text: 'Cancel', style: 'cancel' },
        { text: 'Open Settings', onPress: () => Linking.openSettings() },
      ]
    );
  }
}

Vérification rapide

Vérifiez votre compréhension des concepts du développement mobile avec React Native présentés dans cette leçon.

Réponds-y dans la leçon interactive

Récapitulatif de la leçon

Dans cette leçon, vous avez appris que : les canaux de notification Android regroupent les notifications par type et permettent aux utilisateurs de contrôler séparément le son, les vibrations et les réglages d'affichage de chaque catégorie, que les niveaux d'importance de MIN à MAX contrôlent l'intensité avec laquelle les notifications interrompent l'utilisateur, et que le champ channelId des charges utiles push achemine chaque notification vers le canal approprié. Ensuite, nous mettrons en œuvre la récupération de données hors ligne d'abord avec TanStack React Query et la persistance du cache.

Gratuit pour commencer

Apprends JavaScript avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours
30
Leçons
120
Commencer gratuitementVoir le cours complet

Questions Fréquemment Posées

La leçon « Canaux de notification et contenu enrichi » est-elle gratuite ?

Oui — le texte complet de « Canaux de notification et contenu enrichi » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Native Academy, passe à CoddyKit PRO. Le cours React Native Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Canaux de notification et contenu enrichi » ?

Créez des canaux de notification sur Android pour différents types de notifications, ajoutez des images et des boutons d'action aux notifications, puis configurez le nombre de badges sur iOS. Tu pratiques React Native Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer React Native Academy ?

Aucune expérience préalable n'est requise. React Native Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Canaux de notification et contenu enrichi » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon React Native Academy ?

Oui. Chaque leçon React Native Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Demander l'autorisation et obtenir un jeton push
  2. Envoyer des notifications via l'API Push d'Expo
  3. Gérer les notifications au premier plan et en arrière-plan
  4. Canaux de notification et contenu enrichi
← Retour à React Native Academy