Chức năng gửi thông báo qua App bằng Firebase (P1)

KhanhND

Xin chào mọi người qua thời gian research mình đã hoàn thiện được chức năng gửi thông báo trên App điện thoại sử dụng Firebase của Google
Vì ứng dụng của chúng ta sẽ được cài đặt trên 2 nền tảng nên mình sẽ chia làm 2 bài viết setup và cấu hình bên Android và IOS
Đầu tiên mình sẽ tạo 1 Project trên Firebase
https://console.firebase.google.com/
Tên thì các bạn đặt sao cho giống dự án mình đang làm là được
Phần Application ID mình sẽ check tại đường dẫn {source_code}/android/app/build.gradle phần namespace
Sau khi tạo xong mình sẽ truy cập vào Project chọn Project setting

Setup Enabled mục Cloud Message API

Đảm bảo rằng Cloud Message được kích hoạt

Sau khi setup xong thì mọi người có thể lấy được Server Key để tiến hành gửi thông báo

Như vậy là đã setup xong
Tiếp theo về vấn đề code
Đầu tiên mình sẽ cần download file google-services.json lưu tại thư mục {source_code}/android/app

Tải file này ở đâu thì mình sẽ tạo ứng dụng Android trong Project mình vừa setup
Tạo xong thì file sẽ nằm ở đây

Tiếp đến phần xử lý code
Trong file android/build.gradle mình sẽ thêm dòng sau
classpath("com.google.gms:google-services:4.3.14") đây là phiên bản google message mình sử dụng

Trong file android/app/build.gradle
Mình sẽ cần thêm dòng này tại đây
apply plugin: "com.google.gms.google-services"

implementation(platform("com.google.firebase:firebase-bom:32.5.0")) implementation("com.google.firebase:firebase-analytics")

Lưu ý tuỳ theo từng phiên bản mà theo thời gian sẽ thay đổi nên tuỳ vào từng thời điểm việc setup này sẽ có chút khác nhau về phiên bản
Giờ vào code thôi
Vì làm demo nên mình sẽ tạo thêm component mà chỉ sử dụng View mặc định và component mặc định của RN thôi nhe
Mình sẽ cần cài thêm 1 vào package bằng cách chạy lệnh sau
yarn add @react-native-firebase/app @react-native-firebase/messaging react-native-permissions @notifee/react-native
Câu lệnh này sẽ cài 1 lúc 4 package các bạn có thể cài lần lượt để tìm hiểu thêm document của từng Package nhé
Sau khi cài xong mình sẽ tiến hành xử lý
Mình tạo 1 file {source_code}/src/helper/PushNotificationAndroid.ts
Trong đây mình sẽ xử lý những gì
Đầu tiên phải là quyền được hiển thị thông báo trên Android
Mình sẽ có hàm requestUserPermission này để check quyền đã được cấp hay chưa nếu không thì package sẽ cấp lại
Tiếp đó xử lý đến phần tạo Token ứng dụng sẽ gọi đến hàm getFCMToken
Thông báo qua Firebase mình sẽ cần Token này để Firebase nhận diện được ứng dụng cần gửi thông báo NotificationListener
Hàm onDisplayNotification có tác dụng hiển thị thông báo trên thanh thông báo của điện thoại

import messaging from '@react-native-firebase/messaging';
import AsyncStorage from '@react-native-async-storage/async-storage';
import notifee from '@notifee/react-native';

export const requestUserPermission = async () => {
  const authStatus = await messaging().requestPermission();
  const enabled =
    authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
    authStatus === messaging.AuthorizationStatus.PROVISIONAL;

  if (enabled) {
    console.log('Authorization status:', authStatus);
  }
};

export const getFCMToken = async () => {
  let fcmToken = await AsyncStorage.getItem('fcmToken');
  if (!fcmToken) {
    try {
      let token = messaging().getToken();
      if (token) {
        AsyncStorage.setItem('fcmToken', await token);
      }
    } catch (error) {
      console.log('____error____', error);
    }
  }

  console.log('______', fcmToken);
};

export const NotificationListener = () => {
  messaging().onNotificationOpenedApp(remoteMessage => {
    console.log(
      'Notification caused app to open from background state:',
      remoteMessage.notification,
    );
  });

  messaging()
    .getInitialNotification()
    .then(remoteMessage => {
      if (remoteMessage) {
        console.log(
          'Notification caused app to open from quit state:',
          remoteMessage.notification,
        );
      }
    });

  messaging().onMessage(async remoteMessage => {
    console.log('____Notification____', remoteMessage);
    onDisplayNotification(
      remoteMessage.notification?.title,
      remoteMessage.notification?.body,
    );
  });
};

export const onDisplayNotification = async (title: string, body: string) => {
  // Request permissions (required for iOS)
  await notifee.requestPermission();

  // Create a channel (required for Android)
  const channelId = await notifee.createChannel({
    id: 'default',
    name: 'Default Channel',
  });

  // Display a notification
  await notifee.displayNotification({
    title: title,
    subtitle: '&#129395;',
    body: body,
    android: {
      channelId,
      color: '#4caf50',
      actions: [
        {
          title: '<b>Dance</b> &#128111;',
          pressAction: {id: 'dance'},
        },
        {
          title: '<p style="color: #f44336;"><b>Cry</b> &#128557;</p>',
          pressAction: {id: 'cry'},
        },
      ],
    },
  });
};

Mình sẽ phải lấy token qua console.log và copy lại để check gửi thông báo
Cuối cùng mình sẽ hiển thị thông báo lên thanh tabbar trên điện thoại bằng đoạn code sau

Sau khi clean code mình sẽ tiến hành check gửi thông báo bằng đường dẫn testfcm
Lưu ý dùng đường dẫn trên để test gửi thông báo trong quá trình làm việc gửi thông báo chính thức sẽ do thông tin mình setup trên Firebase 1 cách tự động và theo lịch trình cụ thể
Mình sẽ cần server key khởi tạo lúc ban đầu và token của ứng dụng mình lấy được thông qua console.log

Phần title và body các bạn tự điền nhé
Điền đầy đủ xong mình ấn gửi nếu thấy Popup Success là bạn đã thành công trong việc gửi thông báo cho App
Sau đó check lại app xem có hiện thông báo không nhé

Như vậy là mình đã hiểu qua được cách thức hoạt động gửi thông báo bằng Firebase cho App như nào rồi
Mình xin kết thúc phần 1 tại đây !!! Source code tham khảo