React Native Academy · Pelajaran

Mengurus Pemberitahuan Latar Depan dan Latar Belakang

Pelajaran 3 daripada 413 langkah

Mengurus Pemberitahuan Latar Depan dan Latar Belakang ialah pelajaran React Native Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran React Native Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.

Keadaan Aplikasi dan Penghantaran Notifikasi

Aplikasi anda boleh berada dalam tiga keadaan apabila notifikasi tiba: latar hadapan (aplikasi terbuka dan kelihatan), latar belakang (aplikasi sedang berjalan tetapi tidak kelihatan), atau ditamatkan (aplikasi tidak berjalan langsung). Setiap keadaan mempunyai keperluan pengendalian dan API yang berbeza untuk digunakan.

Memahami keadaan yang berkenaan amat penting kerana OS menghantar notifikasi secara berbeza dalam setiap keadaan, dan respons ketikan pengguna melalui laluan kod yang berbeza bergantung pada keadaan aplikasi ketika mereka mengetik.

addNotificationReceivedListener

Notifications.addNotificationReceivedListener dicetuskan apabila notifikasi tiba semasa aplikasi berada di latar hadapan. Secara lalai, notifikasi tidak memaparkan sepanduk atau bunyi apabila aplikasi sudah terbuka — anda mesti mengendalikannya dalam aplikasi. Pendengar menerima objek notifikasi lengkap termasuk semua kandungan dan muatan data.

Gunakannya untuk memaparkan sepanduk dalam aplikasi, mengemas kini antara muka pengguna (contohnya, memuat semula utas sembang), atau memainkan bunyi tersuai — supaya pengguna mendapat pengalaman yang sama seperti apabila notifikasi tiba semasa aplikasi berada di latar belakang.

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 dicetuskan apabila pengguna mengetik notifikasi, tanpa mengira sama ada aplikasi berada di latar belakang atau telah ditamatkan. Pendengar menerima objek respons yang mengandungi notifikasi, pengecam tindakan (butang yang diketuk) dan sebarang input teks pengguna.

Gunakannya untuk pergi ke skrin yang berkaitan berdasarkan muatan data notifikasi. Ini ialah pengendali notifikasi yang paling penting kerana ia menggerakkan tingkah laku navigasi mendalam yang dijangkakan pengguna apabila mengetik notifikasi.

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();
}, []);

Reka Bentuk Muatan Data Notifikasi

Medan data dalam notifikasi tolak ialah kontrak aplikasi anda dengan dirinya sendiri — medan ini menentukan perkara yang berlaku apabila notifikasi diketuk. Reka bentuk skema yang konsisten dengan memasukkan nama skrin destinasi dan semua parameter yang diperlukan oleh skrin tersebut.

Muatan data yang direka dengan baik membolehkan mana-mana notifikasi pergi tepat ke skrin yang betul dengan kandungan yang betul tanpa sebarang tekaan. Gunakan pemalar selamat jenis untuk jenis tindakan bagi mengelakkan kesilapan ejaan yang menyebabkan kegagalan navigasi secara senyap.

// 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;
}

Kawalan Paparan Notifikasi Latar Hadapan

Secara lalai dalam expo-notifications, notifikasi yang diterima semasa aplikasi berada di latar hadapan adalah senyap (tiada sepanduk atau bunyi). Kawal perkara ini dengan setNotificationHandler yang ditetapkan semasa aplikasi dimulakan. Fungsi pengendali adalah tak segerak — anda juga boleh membuat panggilan API untuk menentukan sama ada notifikasi perlu dipaparkan berdasarkan keutamaan pengguna.

Kembalikan shouldShowAlert: true untuk memaparkan sepanduk sistem walaupun aplikasi sedang terbuka. Ini sesuai untuk notifikasi daripada pengguna lain (mesej), tetapi selalunya tidak sesuai untuk notifikasi aktiviti aplikasi anda sendiri.

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,
    };
  },
});

Pengendalian Notifikasi Latar Belakang pada iOS

Pada iOS, anda boleh mengkonfigurasi notifikasi latar belakang (tolakan senyap) yang mengaktifkan aplikasi di latar belakang untuk mendapatkan data tanpa memaparkan sepanduk. Tetapkan content-available: 1 dalam muatan APNs. Aplikasi mendapat tempoh singkat (~30 saat) untuk mendapatkan data.

Pengambilan data latar belakang berguna untuk memuatkan kandungan terlebih dahulu sebelum pengguna membuka aplikasi daripada notifikasi, supaya skrin sedia dipaparkan serta-merta. Kendalikannya dengan tugasan notifikasi latar belakang expo-notifications menggunakan pengurus tugasan 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);

Butang Tindakan Notifikasi

Notifikasi boleh mengandungi butang tindakan yang membolehkan pengguna memberikan respons tanpa membuka aplikasi. Contohnya, notifikasi mesej mungkin mempunyai butang 'Balas' dan 'Tandakan Sudah Dibaca'. Konfigurasikan kategori dengan Notifications.setNotificationCategoryAsync dan rujuk kategori tersebut dalam muatan tolak anda.

response.actionIdentifier dalam pendengar respons ketikan memberitahu anda butang yang diketuk. Untuk tindakan input teks, response.userText mengandungi perkara yang ditaip pengguna terus daripada notifikasi.

// 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);
}

Mengurus Bilangan Lencana

Bilangan lencana ialah nombor merah pada ikon aplikasi iOS anda. Tetapkannya dengan memasukkan nombor badge dalam muatan tolak anda, atau kemas kini dari dalam aplikasi menggunakan Notifications.setBadgeCountAsync(count). Kurangkan lencana apabila pengguna membaca notifikasi atau mengunjungi skrin yang berkaitan.

Pola yang biasa: pelayan menetapkan lencana kepada bilangan belum dibaca apabila menghantar tolakan, dan aplikasi memanggil setBadgeCountAsync(0) apabila pengguna membuka peti masuk. Sentiasa dapatkan bilangan sebenar yang belum dibaca daripada pelayan anda dan bukannya menambah pembilang setempat, kerana berbilang peranti perlu kekal disegerakkan.

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);
}

Menutup Notifikasi yang Dipaparkan

Selepas membaca notifikasi dalam aplikasi, anda hendaklah menutup notifikasi yang sepadan daripada pusat notifikasi supaya tidak mengelirukan pengguna. Gunakan Notifications.dismissNotificationAsync(identifier) untuk notifikasi tertentu atau Notifications.dismissAllNotificationsAsync() untuk mengosongkan semuanya.

Panggil fungsi tutup dalam pengendali respons notifikasi selepas pergi ke skrin yang berkaitan, atau dalam useEffect pada skrin sasaran apabila skrin itu dipasang. Pengecam notifikasi tersedia dalam objek respons.

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);
  }
);

Mendapatkan Semua Notifikasi Tertunda

Dapatkan semula semua notifikasi yang sedang dipaparkan dalam pusat notifikasi dengan Notifications.getPresentedNotificationsAsync(). Gunakannya semasa aplikasi dilancarkan untuk mengendalikan notifikasi yang belum diketuk oleh pengguna, atau untuk memaparkan lencana bilangan belum dibaca berdasarkan kandungan sebenar pusat notifikasi.

Apabila aplikasi berada di latar hadapan, anda juga boleh mengulangi semua notifikasi tertunda dan menutup notifikasi yang kini sudah lapuk (contohnya, promosi yang telah tamat tempoh atau acara yang telah berlalu).

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]);

Persediaan Pengendali Notifikasi Lengkap

Persediaan notifikasi sedia untuk pengeluaran menggabungkan semua bahagian: tetapkan pengendali semasa permulaan, daftarkan pendengar dalam cangkuk tersuai dan sambungkannya kepada navigasi. Cangkuk tersuai mengendalikan kedua-dua notifikasi latar hadapan (memaparkan sepanduk, mengemas kini keadaan) dan respons ketikan (pergi ke skrin), serta sentiasa membersihkan pendengar apabila komponen dinyahpasang.

Seni bina ini memastikan logik notifikasi berpusat, boleh diuji dan berasingan daripada komponen skrin individu.

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);

Semakan Ringkas

Uji pemahaman anda tentang konsep Pembangunan Mudah Alih React Native daripada pelajaran ini.

Jawab dalam pelajaran interaktif

Ulang Kaji Pelajaran

Dalam pelajaran ini, anda telah mempelajari bahawa: addNotificationReceivedListener mengendalikan notifikasi yang tiba semasa aplikasi berada di latar hadapan, addNotificationResponseReceivedListener mengendalikan ketikan pengguna pada notifikasi daripada mana-mana keadaan aplikasi dan hendaklah pergi ke skrin yang berkaitan, serta butang tindakan dengan kategori membolehkan pengguna membalas atau melakukan tindakan terus daripada notifikasi tanpa membuka aplikasi. Seterusnya, kita akan mengkonfigurasi saluran notifikasi dan menambah kandungan kaya seperti imej serta butang tindakan.

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 30
Pelajaran: 120

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Mengurus Pemberitahuan Latar Depan dan Latar Belakang” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran React Native Academy, termasuk “Mengurus Pemberitahuan Latar Depan dan Latar Belakang”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Mengurus Pemberitahuan Latar Depan dan Latar Belakang”?

Gunakan addNotificationReceivedListener untuk mengurus pemberitahuan ketika aplikasi terbuka, dan addNotificationResponseReceivedListener untuk bertindak balas apabila pengguna mengetik pemberitahuan. Anda berlatih React Native Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan React Native Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran React Native Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “Mengurus Pemberitahuan Latar Depan dan Latar Belakang” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran React Native Academy ini?

Ya. Setiap pelajaran React Native Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Meminta Kebenaran dan Mendapatkan Token Tolak
Menghantar Pemberitahuan melalui API Tolak Expo
Mengurus Pemberitahuan Latar Depan dan Latar Belakang
Saluran Pemberitahuan dan Kandungan Kaya

← Kembali ke React Native Academy