Etuala- ja taustailmoitusten käsittely
Käsitelkää ilmoituksia addNotificationReceivedListenerilla sovelluksen ollessa avoinna ja reagoikaa ilmoituksen napautukseen addNotificationResponseReceivedListenerilla.
Etuala- ja taustailmoitusten käsittely on ilmainen React Native Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu React Native Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Native Academy-kurssilla on yhteensä 4 oppituntia.
Sovelluksen tilat ja ilmoitusten toimitus
Sovellus voi olla ilmoituksen saapuessa yhdessä kolmesta tilasta: etualalla (sovellus on avoinna ja näkyvissä), taustalla (sovellus on käynnissä mutta ei näkyvissä) tai lopetettuna (sovellus ei ole lainkaan käynnissä). Jokainen tila vaatii erilaisen käsittelytavan ja eri API:t.
On erittäin tärkeää ymmärtää, mikä tila on kyseessä, sillä käyttöjärjestelmä toimittaa ilmoitukset eri tavoin kussakin tilassa ja käyttäjän napautus ohjautuu eri koodipolkuja pitkin sen mukaan, missä tilassa sovellus oli napautushetkellä.
addNotificationReceivedListener
Notifications.addNotificationReceivedListener käynnistyy, kun ilmoitus saapuu sovelluksen ollessa etualalla. Oletusarvoisesti ilmoitukset eivät näytä banneria eivätkä toista ääntä, kun sovellus on jo avoinna — teidän on käsiteltävä ne sovelluksessa. Kuuntelija vastaanottaa koko ilmoitusobjektin, mukaan lukien kaiken sisällön ja datahyötykuorman.
Käyttäkää tätä sovelluksen sisäisten bannerien näyttämiseen, käyttöliittymän päivittämiseen (esimerkiksi chat-ketjun päivittämiseen) tai mukautetun äänen toistamiseen — näin käyttäjä saa saman kokemuksen kuin ilmoituksen saapuessa sovelluksen ollessa taustalla.
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 käynnistyy, kun käyttäjä napauttaa ilmoitusta riippumatta siitä, oliko sovellus taustalla vai lopetettuna. Kuuntelija vastaanottaa vastausobjektin, joka sisältää ilmoituksen, toiminnon tunnisteen (mistä painikkeesta napautettiin) ja mahdollisen käyttäjän tekstisyötteen.
Käyttäkää tätä navigoidaksenne ilmoituksen datahyötykuorman perusteella asiaankuuluvaan näkymään. Tämä on tärkein ilmoitusten käsittelijä, koska se toteuttaa käyttäjien odottaman syvän navigoinnin ilmoitusta napautettaessa.
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();
}, []);Ilmoituksen datahyötykuorman suunnittelu
Push-ilmoituksen data-kenttä on sovelluksen ja sen oman toiminnan välinen sopimus — se määrittää, mitä tapahtuu, kun ilmoitusta napautetaan. Suunnitelkaa yhdenmukainen skeema, joka sisältää kohdenäkymän nimen ja kaikki kyseisen näkymän tarvitsemat parametrit.
Hyvin suunnitellun datahyötykuorman ansiosta mikä tahansa ilmoitus voi navigoida täsmälleen oikeaan näkymään ja näyttää oikean sisällön ilman arvailua. Käyttäkää tyyppiturvallisia vakioita toimintotyypeille, jotta kirjoitusvirheet eivät aiheuta hiljaisia navigointivirheitä.
// 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;
}Etualan ilmoitusten näyttämisen hallinta
expo-notificationsissa sovelluksen ollessa etualalla vastaanotetut ilmoitukset ovat oletusarvoisesti hiljaisia (ei banneria eikä ääntä). Hallitkaa tätä sovelluksen käynnistyksen yhteydessä asetettavalla setNotificationHandler-käsittelijällä. Käsittelijäfunktio on asynkroninen — voitte jopa tehdä API-kutsun ja päättää käyttäjän asetusten perusteella, näytetäänkö ilmoitus.
Palauttakaa shouldShowAlert: true, jos haluatte näyttää järjestelmän bannerin myös sovelluksen ollessa avoinna. Tämä sopii muiden käyttäjien lähettämiin ilmoituksiin (viesteihin), mutta ei usein sovelluksen omiin toimintailmoituksiin.
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,
};
},
});Taustalla tapahtuvien ilmoitusten käsittely iOS:ssä
iOS:ssä voitte määrittää taustailmoituksia (hiljaisia push-ilmoituksia), jotka herättävät sovelluksen taustalla tietojen hakemista varten näyttämättä banneria. Asettakaa APNs-hyötykuormaan content-available: 1. Sovelluksella on tietojen hakemiseen lyhyt aikaikkuna (noin 30 sekuntia).
Taustahaku on hyödyllinen sisällön esilataamiseen ennen kuin käyttäjä avaa sovelluksen ilmoituksesta, jolloin näkymä on heti valmis. Käsitelkää se expo-notificationsin taustailmoitustehtävillä käyttäen Expon tehtävienhallintaa.
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);Ilmoitusten toimintopainikkeet
Ilmoitukset voivat sisältää toimintopainikkeita, joiden avulla käyttäjät voivat vastata avaamatta sovellusta. Viesti-ilmoituksessa voi esimerkiksi olla painikkeet Reply ja Mark Read. Määrittäkää luokat käyttämällä Notifications.setNotificationCategoryAsync-metodia ja viitatkaa luokkaan push-hyötykuormassa.
Napautusvastauskuuntelijan response.actionIdentifier kertoo, mitä painiketta napautettiin. Tekstisyöttötoiminnoissa response.userText sisältää tekstin, jonka käyttäjä kirjoitti suoraan ilmoituksesta.
// 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);
}Merkkimäärän hallinta
Merkkimäärä on iOS-sovelluksen kuvakkeessa näkyvä punainen numero. Asettakaa se sisällyttämällä push-hyötykuormaan badge-numero tai päivittäkää se sovelluksessa käyttämällä Notifications.setBadgeCountAsync(count)-metodia. Pienentäkää merkkiä, kun käyttäjä lukee ilmoituksia tai siirtyy asiaankuuluvaan näkymään.
Yleinen toimintatapa on, että palvelin asettaa merkin lukemattomien ilmoitusten määräksi push-ilmoitusta lähettäessään ja sovellus kutsuu setBadgeCountAsync(0)-metodia, kun käyttäjä avaa postilaatikon. Hakekaa todellinen lukemattomien ilmoitusten määrä aina palvelimelta paikallisen laskurin kasvattamisen sijaan, sillä useiden laitteiden on pysyttävä synkronoituna.
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);
}Näytettyjen ilmoitusten hylkääminen
Kun käyttäjä on lukenut ilmoituksen sovelluksessa, vastaava ilmoitus kannattaa poistaa ilmoituskeskuksesta, jotta se ei johda käyttäjää harhaan. Käyttäkää Notifications.dismissNotificationAsync(identifier)-metodia tietyn ilmoituksen poistamiseen tai Notifications.dismissAllNotificationsAsync()-metodia kaikkien ilmoitusten tyhjentämiseen.
Kutsukaa poistometodia ilmoituksen vastauskäsittelijässä asiaankuuluvaan näkymään navigoinnin jälkeen tai kohdenäkymän liittäessä sen useEffect-metodissa. Ilmoituksen tunniste on saatavilla vastausobjektissa.
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);
}
);Kaikkien odottavien ilmoitusten hakeminen
Hakekaa kaikki ilmoituskeskuksessa parhaillaan näkyvät ilmoitukset käyttämällä Notifications.getPresentedNotificationsAsync()-metodia. Käyttäkää tätä sovelluksen käynnistyessä käsitelläksenne ilmoitukset, joita käyttäjä ei ole vielä napauttanut, tai näyttääksenne lukemattomien ilmoitusten määrän merkin ilmoituskeskuksen todellisen sisällön perusteella.
Voitte sovelluksen palatessa etualalle käydä myös odottavat ilmoitukset silmukassa läpi ja poistaa vanhentuneet ilmoitukset (esimerkiksi päättyneet tarjoukset tai menneet tapahtumat).
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]);Kattava ilmoitusten käsittelijän määritys
Tuotantokelpoinen ilmoitusratkaisu yhdistää kaikki osat: asettakaa käsittelijä käynnistyksen yhteydessä, rekisteröikää kuuntelijat mukautetussa hookissa ja yhdistäkää ne navigointiin. Mukautettu hook käsittelee sekä etualan ilmoitukset (bannerin näyttäminen ja tilan päivittäminen) että napautusvastaukset (navigointi) ja poistaa kuuntelijat aina komponentin irrotuksen yhteydessä.
Tämä arkkitehtuuri pitää ilmoituslogiikan keskitettynä, testattavana ja erillään yksittäisistä näkymäkomponenteista.
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);Pikatarkistus
Testatkaa, miten hyvin ymmärrätte tämän oppitunnin React Native Mobile Development -käsitteet.
Oppitunnin yhteenveto
Tässä oppitunnissa opitte, että addNotificationReceivedListener käsittelee sovelluksen ollessa etualalla saapuvat ilmoitukset, että addNotificationResponseReceivedListener käsittelee käyttäjän napautukset ilmoituksista sovelluksen tilasta riippumatta ja sen pitäisi navigoida asiaankuuluvaan näkymään ja että toimintopainikkeiden ja luokkien avulla käyttäjät voivat vastata tai suorittaa toimintoja suoraan ilmoituksesta avaamatta sovellusta. Seuraavaksi määritämme ilmoituskanavat ja lisäämme rikasta sisältöä, kuten kuvia ja toimintopainikkeita.
Opi JavaScript tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”Etuala- ja taustailmoitusten käsittely” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa React Native Academy-oppimispolun 3 oppituntia, myös oppitunnin “Etuala- ja taustailmoitusten käsittely”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. React Native Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Etuala- ja taustailmoitusten käsittely”?
Käsitelkää ilmoituksia addNotificationReceivedListenerilla sovelluksen ollessa avoinna ja reagoikaa ilmoituksen napautukseen addNotificationResponseReceivedListenerilla. Harjoittelet React Native Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni React Native Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin React Native Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.
Kuinka kauan ”Etuala- ja taustailmoitusten käsittely”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä React Native Academy-oppitunnilla?
Kyllä. Jokainen React Native Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Käyttöoikeuden pyytäminen ja push-tokenin hakeminen
- Ilmoitusten lähettäminen Expo Push APIlla
- Etuala- ja taustailmoitusten käsittely
- Ilmoituskanavat ja monipuolinen sisältö