Håndtering af notifikationer i forgrunden og baggrunden
Brug addNotificationReceivedListener til at håndtere notifikationer, mens appen er åben, og addNotificationResponseReceivedListener til at reagere, når brugeren trykker på en notifikation.
Håndtering af notifikationer i forgrunden og baggrunden er en gratis React Native Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i React Native Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Native Academy-kurset indeholder 4 lektioner i alt.
Appens tilstande og levering af notifikationer
Din app kan være i tre tilstande, når en notifikation ankommer: forgrund (appen er åben og synlig), baggrund (appen kører, men er ikke synlig) eller afsluttet (appen kører slet ikke). Hver tilstand har forskellige krav til håndtering og forskellige API'er, du skal bruge.
Det er afgørende at forstå, hvilken tilstand der gælder, fordi operativsystemet leverer notifikationer forskelligt i hvert tilfælde, og brugerens svar på et tryk følger forskellige kodestier afhængigt af appens tilstand på trykket.
addNotificationReceivedListener
Notifications.addNotificationReceivedListener udløses, når en notifikation ankommer, mens appen er i forgrunden. Som standard vises der hverken banner eller lyd, når appen allerede er åben — du skal håndtere notifikationerne i appen. Lytteren modtager hele notifikationsobjektet, inklusive alt indhold og alle data i payloaden.
Brug dette til at vise bannere i appen, opdatere brugergrænsefladen (f.eks. opdatere en chatsamtale) eller afspille en brugerdefineret lyd — så brugerne får den samme oplevelse, som hvis notifikationen var ankommet, mens appen var i baggrunden.
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 udløses, når brugeren trykker på en notifikation, uanset om appen var i baggrunden eller afsluttet. Lytteren modtager et svarobjekt, der indeholder notifikationen, handlingsidentifikatoren (hvilken knap der blev trykket på) og eventuel tekst, som brugeren har indtastet.
Brug dette til at navigere til den relevante skærm baseret på notifikationens datapayload. Det er den vigtigste notifikationshåndtering, fordi den styrer den dybe navigation, som brugerne forventer, når de trykker på en notifikation.
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();
}, []);Design af notifikationers datapayload
Feltet data i en push-notifikation er din apps kontrakt med sig selv — det bestemmer, hvad der sker, når der trykkes på notifikationen. Design et ensartet skema, der indeholder destinationsskærmens navn og alle de parametre, som skærmen har brug for.
En veldesignet datapayload gør det muligt for enhver notifikation at navigere præcist til den rigtige skærm med det rigtige indhold uden gætteri. Brug typesikre konstanter til handlingstyper for at forhindre slåfejl, der kan medføre ubemærkede navigationsfejl.
// 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;
}Styring af visning af notifikationer i forgrunden
Som standard er notifikationer, der modtages, mens appen er i forgrunden i expo-notifications, lydløse (intet banner og ingen lyd). Du styrer dette med setNotificationHandler, som angives ved appstart. Handlerfunktionen er asynkron — du kan endda lave et API-kald for at afgøre, om en notifikation skal vises, baseret på brugerens præferencer.
Returnér shouldShowAlert: true for at vise systembanneret, selv når appen er åben. Det er passende for notifikationer fra andre brugere (beskeder), men ofte ikke for din egen apps aktivitetsnotifikationer.
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,
};
},
});Håndtering af notifikationer i baggrunden på iOS
På iOS kan du konfigurere notifikationer i baggrunden (lydløse push-notifikationer), der vækker appen i baggrunden, så den kan hente data uden at vise et banner. Angiv content-available: 1 i APNs-payloaden. Appen får et kort tidsrum (ca. 30 sekunder) til at hente data.
Hentning i baggrunden er nyttig til at forudindlæse indhold, før brugeren åbner appen fra en notifikation, så skærmen er klar med det samme. Håndter det med expo-notifications' opgaver til notifikationer i baggrunden ved hjælp af Expos opgavestyring.
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);Handlingsknapper i notifikationer
Notifikationer kan indeholde handlingsknapper, som lader brugerne svare uden at åbne appen. En beskednotifikation kan for eksempel have knapperne 'Svar' og 'Markér som læst'. Konfigurér kategorier med Notifications.setNotificationCategoryAsync, og referér til kategorien i din push-payload.
Tryksvarlytterens response.actionIdentifier fortæller dig, hvilken knap der blev trykket på. For handlinger med tekstinput indeholder response.userText det, som brugeren skrev direkte fra notifikationen.
// 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);
}Håndtering af badgeantal
Badgeantallet er det røde tal på ikonet for din iOS-app. Angiv det ved at inkludere et badge-tal i din push-payload, eller opdatér det fra appen med Notifications.setBadgeCountAsync(count). Reducér badget, når brugeren læser notifikationer eller besøger den relevante skærm.
Et almindeligt mønster er, at serveren angiver badget til antallet af ulæste elementer, når en push-notifikation sendes, og at appen kalder setBadgeCountAsync(0), når brugeren åbner indbakken. Hent altid det korrekte antal ulæste elementer fra din server i stedet for at øge en lokal tæller, da flere enheder skal holdes synkroniseret.
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);
}Lukning af viste notifikationer
Når du har læst en notifikation i appen, bør du lukke den tilsvarende notifikation fra notifikationscenteret, så den ikke vildleder brugeren. Brug Notifications.dismissNotificationAsync(identifier) til en bestemt notifikation eller Notifications.dismissAllNotificationsAsync() for at rydde dem alle.
Kald dismiss i notifikationssvarhandleren, efter du har navigeret til den relevante skærm, eller i useEffect på destinationsskærmen, når den monteres. Notifikationsidentifikatoren er tilgængelig i svarobjektet.
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);
}
);Hentning af alle ventende notifikationer
Hent alle aktuelt viste notifikationer i notifikationscenteret med Notifications.getPresentedNotificationsAsync(). Brug dette ved appstart til at håndtere notifikationer, som brugeren endnu ikke har trykket på, eller til at vise et badgeantal for ulæste elementer baseret på det faktiske indhold i notifikationscenteret.
Når appen kommer i forgrunden, kan du også gennemløbe ventende notifikationer og lukke dem, der nu er forældede (f.eks. udløbne kampagner eller begivenheder, der allerede er overstået).
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]);En komplet opsætning af en notifikationshandler
En produktionsklar opsætning af notifikationer samler alle delene: angiv handleren ved opstart, registrér lyttere i en brugerdefineret hook, og forbind dem med navigationen. Den brugerdefinerede hook håndterer både notifikationer i forgrunden (viser banner og opdaterer tilstand) og tryksvar (navigerer), og den rydder altid lytterne op, når den afmonteres.
Denne arkitektur holder notifikationslogikken samlet, testbar og adskilt fra de enkelte skærmkomponenter.
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);Hurtigt tjek
Test din forståelse af begreberne inden for React Native Mobile Development fra denne lektion.
Opsummering af lektionen
I denne lektion har du lært, at addNotificationReceivedListener håndterer notifikationer, der ankommer, mens appen er i forgrunden, at addNotificationResponseReceivedListener håndterer brugerens tryk på notifikationer fra alle appens tilstande og bør navigere til den relevante skærm, samt at handlingsknapper med kategorier gør det muligt for brugerne at svare eller udføre handlinger direkte fra notifikationen uden at åbne appen. Næste trin er at konfigurere notifikationskanaler og tilføje udvidet indhold som billeder og handlingsknapper.
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 30
- Lektioner
- 120
Ofte stillede spørgsmål
Er lektionen “Håndtering af notifikationer i forgrunden og baggrunden” gratis?
Ja — alle 3 lektioner i læringssporet React Native Academy, inklusive “Håndtering af notifikationer i forgrunden og baggrunden”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. React Native Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Håndtering af notifikationer i forgrunden og baggrunden”?
Brug addNotificationReceivedListener til at håndtere notifikationer, mens appen er åben, og addNotificationResponseReceivedListener til at reagere, når brugeren trykker på en notifikation. Du øver dig i React Native Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på React Native Academy?
Der kræves ingen tidligere erfaring. React Native Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “Håndtering af notifikationer i forgrunden og baggrunden”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne React Native Academy-lektion?
Ja. Alle React Native Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Anmodning om tilladelse og hentning af et push-token
- Afsendelse af notifikationer via Expo Push API
- Håndtering af notifikationer i forgrunden og baggrunden
- Notifikationskanaler og rich content