Meldingen op de voorgrond en achtergrond verwerken
Gebruik addNotificationReceivedListener om meldingen te verwerken wanneer de app geopend is en addNotificationResponseReceivedListener om te reageren wanneer de gebruiker op een melding tikt.
Meldingen op de voorgrond en achtergrond verwerken is een gratis React Native Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject React Native Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus React Native Academy bevat in totaal 4 lessen.
App-statussen en bezorging van meldingen
Je app kan zich bevinden in drie statussen wanneer een melding binnenkomt: voorgrond (de app is geopend en zichtbaar), achtergrond (de app draait maar is niet zichtbaar) of afgesloten (de app draait helemaal niet). Elke status heeft andere vereisten voor de verwerking en andere API's die je moet gebruiken.
Het is belangrijk om te begrijpen welke status van toepassing is, omdat het besturingssysteem meldingen in elk geval anders bezorgt en de reactie op een tik van de gebruiker via andere codepaden loopt, afhankelijk van de app-status op het moment van de tik.
addNotificationReceivedListener
Notifications.addNotificationReceivedListener wordt uitgevoerd wanneer een melding binnenkomt terwijl de app op de voorgrond staat. Standaard worden meldingen niet als banner of met geluid weergegeven wanneer de app al geopend is — je moet ze in de app verwerken. De listener ontvangt het volledige meldingsobject, inclusief alle inhoud en gegevens uit de payload.
Gebruik dit om banners in de app te tonen, de interface bij te werken (bijvoorbeeld een chatgesprek te vernieuwen) of een aangepast geluid af te spelen — zo krijgen gebruikers dezelfde ervaring als wanneer de melding was binnengekomen terwijl de app op de achtergrond stond.
import * as Notifications from 'expo-notifications';
import { useEffect } from 'react';
useEffect(() => {
const subscription = Notifications.addNotificationReceivedListener(
(notification) => {
const { title, body, data } = notification.request.content;
console.log('Notification received in foreground:', title, body);
// Update UI or show in-app banner:
showInAppBanner({ title, body });
}
);
return () => subscription.remove();
}, []);addNotificationResponseReceivedListener
Notifications.addNotificationResponseReceivedListener wordt uitgevoerd wanneer de gebruiker op een melding tikt, ongeacht of de app op de achtergrond stond of was afgesloten. De listener ontvangt een responsobject met de melding, de actie-identifier (op welke knop is getikt) en eventuele tekstinvoer van de gebruiker.
Gebruik dit om op basis van de gegevens uit de melding naar het relevante scherm te navigeren. Dit is de belangrijkste verwerker van meldingen, omdat deze bepaalt hoe gebruikers bij een tik op een melding diep in de app navigeren.
useEffect(() => {
const subscription = Notifications.addNotificationResponseReceivedListener(
(response) => {
const { data } = response.notification.request.content;
console.log('User tapped notification:', data);
if (data.screen) {
navigation.navigate(data.screen, { id: data.id });
}
}
);
return () => subscription.remove();
}, []);Ontwerp van de gegevenspayload van meldingen
Het veld data in een pushmelding is het contract van je app met zichzelf — het bepaalt wat er gebeurt wanneer op de melding wordt getikt. Ontwerp een consistent schema met de naam van het doelscherm en alle parameters die dat scherm nodig heeft.
Met een goed ontworpen gegevenspayload kan elke melding naar precies het juiste scherm met de juiste inhoud navigeren, zonder dat er iets hoeft te worden geraden. Gebruik typeveilige constanten voor actietypen om typefouten te voorkomen die anders tot stilzwijgende navigatiefouten kunnen leiden.
// Consistent data payload schema:
const notificationData = {
type: 'new_message', // action type
screen: 'Chat', // destination screen name
conversationId: 'abc', // screen params
senderId: '123',
};
// Response handler:
const { type, screen, conversationId } = response.notification.request.content.data;
switch (type) {
case 'new_message':
navigation.navigate(screen, { conversationId });
break;
case 'order_update':
navigation.navigate('OrderDetail', { orderId: data.orderId });
break;
}Weergave van meldingen op de voorgrond beheren
Standaard zijn meldingen die in expo-notifications binnenkomen terwijl de app op de voorgrond staat stil (geen banner en geen geluid). Beheer dit met de setNotificationHandler die bij het starten van de app wordt ingesteld. De handlerfunctie is async — je kunt zelfs een API-aanroep doen om op basis van gebruikersvoorkeuren te bepalen of je een melding toont.
Retourneer shouldShowAlert: true om de systeembanner te tonen, ook wanneer de app geopend is. Dit is geschikt voor meldingen van andere gebruikers (berichten), maar vaak niet voor meldingen over activiteiten van je eigen app.
Notifications.setNotificationHandler({
handleNotification: async (notification) => {
const { type } = notification.request.content.data;
// Show banner for messages but not for own activity:
return {
shouldShowAlert: type !== 'own_activity',
shouldPlaySound: type === 'new_message',
shouldSetBadge: true,
};
},
});Meldingen op de achtergrond verwerken in iOS
In iOS kun je achtergrondmeldingen (stille pushmeldingen) instellen die de app op de achtergrond activeren om gegevens op te halen zonder een banner te tonen. Stel content-available: 1 in de APNs-payload in. De app krijgt een korte periode (ongeveer 30 seconden) om gegevens op te halen.
Gegevens op de achtergrond ophalen is handig om inhoud vooraf te laden voordat de gebruiker de app vanuit een melding opent, zodat het scherm direct klaarstaat. Verwerk dit met de taken voor achtergrondmeldingen van expo-notifications en de taakbeheerder van Expo.
import * as TaskManager from 'expo-task-manager';
import * as Notifications from 'expo-notifications';
const BACKGROUND_NOTIFICATION_TASK = 'background-notification';
TaskManager.defineTask(BACKGROUND_NOTIFICATION_TASK,
async ({ data: { notification }, error }) => {
if (error) return;
// Fetch fresh data silently in the background:
await prefetchDataForNotification(notification.request.content.data);
}
);
Notifications.registerTaskAsync(BACKGROUND_NOTIFICATION_TASK);Actieknoppen voor meldingen
Meldingen kunnen actieknoppen bevatten waarmee gebruikers kunnen reageren zonder de app te openen. Een melding over een bericht kan bijvoorbeeld de knoppen 'Beantwoorden' en 'Als gelezen markeren' bevatten. Configureer categorieën met Notifications.setNotificationCategoryAsync en verwijs naar de categorie in je pushpayload.
De waarde response.actionIdentifier van de listener voor tikreacties vertelt je op welke knop is getikt. Bij acties met tekstinvoer bevat response.userText wat de gebruiker rechtstreeks vanuit de melding heeft getypt.
// Define notification category with actions:
await Notifications.setNotificationCategoryAsync('message', [
{
identifier: 'reply',
buttonTitle: 'Reply',
textInput: { submitButtonTitle: 'Send', placeholder: 'Type a reply...' },
},
{
identifier: 'mark_read',
buttonTitle: 'Mark as Read',
isDestructive: false,
},
]);
// In response listener:
if (response.actionIdentifier === 'reply') {
sendReply(response.userText, messageId);
}Badgeteller beheren
De badgeteller is het rode getal op het pictogram van je iOS-app. Stel deze in door een getal voor badge op te nemen in je pushpayload, of werk deze vanuit de app bij met Notifications.setBadgeCountAsync(count). Verlaag de badge wanneer de gebruiker meldingen leest of het relevante scherm bezoekt.
Een veelgebruikt patroon is dat de server de badge instelt op het aantal ongelezen items bij het verzenden van een push en dat de app setBadgeCountAsync(0) aanroept wanneer de gebruiker de inbox opent. Haal altijd het echte aantal ongelezen items op bij je server in plaats van een lokale teller te verhogen, omdat meerdere apparaten gesynchroniseerd moeten blijven.
import * as Notifications from 'expo-notifications';
// Clear badge when user opens inbox:
async function clearBadge() {
await Notifications.setBadgeCountAsync(0);
}
// Get current badge count:
const count = await Notifications.getBadgeCountAsync();
console.log('Current badge:', count);
// Update badge from server-returned unread count:
async function updateBadge(unreadCount) {
await Notifications.setBadgeCountAsync(unreadCount);
}Weergegeven meldingen sluiten
Nadat je een melding in de app hebt gelezen, moet je de bijbehorende melding uit het meldingencentrum verwijderen, zodat deze de gebruiker niet op het verkeerde been zet. Gebruik Notifications.dismissNotificationAsync(identifier) voor een specifieke melding of Notifications.dismissAllNotificationsAsync() om alle meldingen te verwijderen.
Roep dismiss aan in de verwerker van de reactie op de melding nadat je naar het relevante scherm bent genavigeerd, of in useEffect op het doelscherm wanneer dit wordt geladen. De identifier van de melding is beschikbaar in het responsobject.
const subscription = Notifications.addNotificationResponseReceivedListener(
async (response) => {
const { data } = response.notification.request.content;
const notifId = response.notification.request.identifier;
// Navigate to relevant screen:
navigation.navigate(data.screen, { id: data.id });
// Dismiss the notification from notification center:
await Notifications.dismissNotificationAsync(notifId);
}
);Alle openstaande meldingen ophalen
Haal alle momenteel weergegeven meldingen in het meldingencentrum op met Notifications.getPresentedNotificationsAsync(). Gebruik dit bij het starten van de app om meldingen te verwerken waarop de gebruiker nog niet heeft getikt, of om een badge met het aantal ongelezen items weer te geven op basis van de daadwerkelijke inhoud van het meldingencentrum.
Wanneer de app naar de voorgrond komt, kun je ook door openstaande meldingen lopen en meldingen verwijderen die inmiddels verouderd zijn (bijvoorbeeld verlopen aanbiedingen of afgelopen evenementen).
useEffect(() => {
// When app comes to foreground:
async function cleanupStaleNotifications() {
const displayed = await Notifications.getPresentedNotificationsAsync();
const now = Date.now();
for (const notif of displayed) {
const { expiresAt } = notif.request.content.data;
if (expiresAt && expiresAt < now) {
await Notifications.dismissNotificationAsync(notif.request.identifier);
}
}
}
cleanupStaleNotifications();
}, [appState]);Een volledige configuratie voor meldingen
Een configuratie voor meldingen die klaar is voor productie combineert alle onderdelen: stel de handler in bij het starten, registreer listeners in een aangepaste hook en verbind deze met de navigatie. De aangepaste hook verwerkt zowel meldingen op de voorgrond (banner tonen, status bijwerken) als reacties op tikken (navigeren), en ruimt de listeners altijd op wanneer de component wordt verwijderd.
Deze architectuur houdt de logica voor meldingen centraal, testbaar en gescheiden van afzonderlijke schermcomponenten.
function useNotifications(navigation) {
useEffect(() => {
const received = Notifications.addNotificationReceivedListener(
(notif) => handleForeground(notif)
);
const response = Notifications.addNotificationResponseReceivedListener(
(resp) => handleTap(resp, navigation)
);
return () => {
received.remove();
response.remove();
};
}, [navigation]);
}
// Use in root component:
const navigation = useNavigation();
useNotifications(navigation);Korte controle
Controleer of je de concepten voor mobiele ontwikkeling met React Native uit deze les begrijpt.
Samenvatting van de les
In deze les heb je geleerd dat addNotificationReceivedListener meldingen verwerkt die binnenkomen terwijl de app op de voorgrond staat, dat addNotificationResponseReceivedListener tikken van gebruikers op meldingen vanuit elke app-status verwerkt en naar het relevante scherm moet navigeren, en dat actieknoppen met categorieën gebruikers in staat stellen rechtstreeks vanuit de melding te antwoorden of acties uit te voeren zonder de app te openen. Hierna configureren we meldingskanalen en voegen we rijke inhoud toe, zoals afbeeldingen en actieknoppen.
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 30
- Lessen
- 120
Veelgestelde vragen
Is de les “Meldingen op de voorgrond en achtergrond verwerken” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad React Native Academy, waaronder “Meldingen op de voorgrond en achtergrond verwerken”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus React Native Academy bevat in totaal 4 lessen.
Wat leer ik in “Meldingen op de voorgrond en achtergrond verwerken”?
Gebruik addNotificationReceivedListener om meldingen te verwerken wanneer de app geopend is en addNotificationResponseReceivedListener om te reageren wanneer de gebruiker op een melding tikt. Je oefent met React Native Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met React Native Academy te beginnen?
Ervaring vooraf is niet nodig. React Native Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.
Hoe lang duurt de les “Meldingen op de voorgrond en achtergrond verwerken”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over React Native Academy?
Ja. Elke les over React Native Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Toestemming aanvragen en een push-token ophalen
- Meldingen verzenden via de Expo Push API
- Meldingen op de voorgrond en achtergrond verwerken
- Meldingskanalen en rijke inhoud