Håndtere varsler i forgrunnen og bakgrunnen
Bruk addNotificationReceivedListener til å håndtere varsler mens appen er åpen, og addNotificationResponseReceivedListener til å reagere når brukeren trykker på et varsel.
Håndtere varsler i forgrunnen og bakgrunnen er en gratis leksjon i React Native Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Native Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Native Academy inneholder totalt 4 leksjoner.
Appstatuser og levering av varsler
Appen kan være i tre statuser når et varsel kommer: forgrunn (appen er åpen og synlig), bakgrunn (appen kjører, men er ikke synlig) eller avsluttet (appen kjører ikke i det hele tatt). Hver status har ulike krav til håndtering og ulike API-er som skal brukes.
Det er avgjørende å forstå hvilken status som gjelder, fordi operativsystemet leverer varsler forskjellig i hvert tilfelle, og brukerens svar på et trykk går gjennom ulike kodebaner avhengig av appstatusen da brukeren trykker.
addNotificationReceivedListener
Notifications.addNotificationReceivedListener utløses når et varsel kommer mens appen er i forgrunnen. Som standard vises det ikke noe banner eller noen lyd når appen allerede er åpen – De må håndtere varselet i appen. Lytteren mottar hele varselobjektet, inkludert alt innhold og all data i nyttelasten.
Bruk dette til å vise bannere i appen, oppdatere brukergrensesnittet, for eksempel oppdatere en chattråd, eller spille av en tilpasset lyd – slik at brukerne får samme opplevelse som om varselet hadde kommet mens appen var i bakgrunnen.
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 utløses når brukeren trykker på et varsel, uavhengig av om appen var i bakgrunnen eller avsluttet. Lytteren mottar et svarobjekt som inneholder varselet, handlingsidentifikatoren (hvilken knapp som ble trykket) og eventuell tekst brukeren skrev inn.
Bruk dette til å navigere til den relevante skjermen basert på varselets datanyttelast. Dette er den viktigste varselhåndteringen, fordi den styrer den dype navigeringen brukerne forventer når de trykker på et varsel.
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();
}, []);Utforming av datanyttelaster for varsler
data-feltet i et pushvarsel er appens avtale med seg selv – det avgjør hva som skjer når brukeren trykker på varselet. Utform et konsekvent skjema som inneholder navnet på målskjermen og alle parameterne skjermen trenger.
Med en godt utformet datanyttelast kan alle varsler navigere nøyaktig til riktig skjerm med riktig innhold, uten gjetting. Bruk typesikre konstanter for handlingstyper for å hindre at skrivefeil fører til stille navigeringsfeil.
// 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;
}Styre visning av varsler i forgrunnen
Som standard er varsler som mottas mens appen er i forgrunnen, stille i expo-notifications (uten banner og lyd). Dette styres med setNotificationHandler som angis når appen starter. Håndtererfunksjonen er asynkron – De kan til og med gjøre et API-kall for å avgjøre om et varsel skal vises, basert på brukerens innstillinger.
Returner shouldShowAlert: true for å vise systembanneret selv når appen er åpen. Dette passer for varsler fra andre brukere, for eksempel meldinger, men ofte ikke for varsler om aktivitet i Deres egen 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,
};
},
});Håndtere varsler i bakgrunnen på iOS
På iOS kan De konfigurere bakgrunnsvarsler (stille pushvarsler) som vekker appen i bakgrunnen slik at den kan hente data uten å vise et banner. Angi content-available: 1 i APNs-nyttelasten. Appen får et kort tidsvindu på omtrent 30 sekunder til å hente data.
Bakgrunnshenting er nyttig for å forhåndslaste innhold før brukeren åpner appen fra et varsel, slik at skjermen er klar umiddelbart. Håndter dette med bakgrunnsoppgaver for varsler i expo-notifications ved hjelp av Expos oppgavebehandler.
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 varsler
Varsler kan inneholde handlingsknapper som lar brukerne svare uten å åpne appen. Et meldingsvarsel kan for eksempel ha knappene «Svar» og «Marker som lest». Konfigurer kategorier med Notifications.setNotificationCategoryAsync, og referer til kategorien i pushnyttelasten.
Trykksvarlytterens response.actionIdentifier forteller hvilken knapp som ble trykket. For handlinger med tekstinndata inneholder response.userText det brukeren skrev direkte i varselet.
// 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);
}Administrere antall merker
Antall merker er det røde tallet på appikonet i iOS. Angi det ved å inkludere et badge-tall i pushnyttelasten, eller oppdater det fra appen med Notifications.setBadgeCountAsync(count). Reduser merket når brukeren leser varsler eller besøker den relevante skjermen.
Et vanlig mønster er at serveren angir antallet uleste varsler når den sender et pushvarsel, og at appen kaller setBadgeCountAsync(0) når brukeren åpner innboksen. Hent alltid det faktiske antallet uleste fra serveren i stedet for å øke en lokal teller, siden flere enheter må holdes synkronisert.
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);
}Fjerne viste varsler
Etter at De har lest et varsel i appen, bør De fjerne det tilsvarende varselet fra varslingssenteret, slik at det ikke villeder brukeren. Bruk Notifications.dismissNotificationAsync(identifier) for et bestemt varsel eller Notifications.dismissAllNotificationsAsync() for å fjerne alle.
Kall dismiss i varselssvarbehandleren etter navigering til den relevante skjermen, eller i useEffect på målsiden når den monteres. Varselidentifikatoren er tilgjengelig 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);
}
);Hente alle ventende varsler
Hent alle varsler som for øyeblikket vises i varslingssenteret, med Notifications.getPresentedNotificationsAsync(). Bruk dette ved oppstart av appen for å håndtere varsler brukeren ikke har trykket på ennå, eller for å vise et merke med antall uleste basert på det faktiske innholdet i varslingssenteret.
Når appen kommer i forgrunnen, kan De også gå gjennom ventende varsler og fjerne dem som nå er utdaterte, for eksempel utløpte kampanjer eller arrangementer som er over.
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]);Et komplett oppsett for varselhåndtering
Et produksjonsklart oppsett for varsler kombinerer alle delene: angi håndtereren ved oppstart, registrer lyttere i en egendefinert hook, og koble dem til navigeringen. Den egendefinerte hooken håndterer både varsler i forgrunnen (viser banner og oppdaterer tilstand) og trykksvar (navigerer), og rydder alltid opp i lytterne når komponenten avmonteres.
Denne arkitekturen holder varsellogikken sentralisert, testbar og atskilt fra de enkelte skjermkomponentene.
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);Kort kontroll
Test forståelsen Deres av konseptene innen React Native Mobile Development fra denne leksjonen.
Oppsummering av leksjonen
I denne leksjonen har De lært at addNotificationReceivedListener håndterer varsler som kommer mens appen er i forgrunnen, at addNotificationResponseReceivedListener håndterer brukerens trykk på varsler fra alle appstatuser og bør navigere til den relevante skjermen, og at handlingsknapper med kategorier lar brukerne svare eller utføre handlinger direkte fra varselet uten å åpne appen. Deretter skal vi konfigurere varselkanaler og legge til rikt innhold som bilder og handlingsknapper.
Lær deg JavaScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 30
- Leksjoner
- 120
Ofte stilte spørsmål
Er leksjonen «Håndtere varsler i forgrunnen og bakgrunnen» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien React Native Academy, inkludert «Håndtere varsler i forgrunnen og bakgrunnen», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i React Native Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Håndtere varsler i forgrunnen og bakgrunnen»?
Bruk addNotificationReceivedListener til å håndtere varsler mens appen er åpen, og addNotificationResponseReceivedListener til å reagere når brukeren trykker på et varsel. Du øver på React Native Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med React Native Academy?
Ingen tidligere erfaring er nødvendig. React Native Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.
Hvor lang tid tar leksjonen «Håndtere varsler i forgrunnen og bakgrunnen»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne React Native Academy-leksjonen?
Ja. Alle React Native Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Be om tillatelse og hent et push-token
- Sende varsler via Expo Push API
- Håndtere varsler i forgrunnen og bakgrunnen
- Varslingskanaler og rikt innhold