Chào các bạn, khi làm việc với những app mobile, nhất là các app mạng xã hội, mua sắm… thì việc xử lí push notification chắc hẳn quen thuộc và cần thiết. Trong bài này, mình xin giới thiệu qua về một thư viện giúp xử lí công việc đó.
1. Giới thiệu thư viện react-native-firebase
Đây là một thư viện, theo mình thấy là khá tốt và ổn định cho việc xử lí với firebase và push notification.
Config thư viện với project:
- Cài đặt: Mình có thể chạy lệnh yarn hoặc npm, ở đây mình dùng npm
1 2 | npm install --save react-native-firebase |
- Sau khi chạy xong, mình cần một vài config riêng cho Android và IOS, cũng như việc chuẩn bị config trên https://console.firebase.google.com/u/0/ để tải xuống file config cho cả 2 nền tảng Android và IOS (Đối với android: google-services.json, đối với ios: GoogleService-Info.plist).
Sau khi config và cài đặt thành công thư viện cho project, chúng ta bắt tay vào tìm hiểu và sử dụng thư viện đó.
Tham khảo link : https://rnfirebase.io/docs/v4.2.x/messaging/receiving-messages
2. Yêu cầu quyền và lắng nghe notification
- Gọi tới firebase
import firebase from 'react-native-firebase' - Khi bắt đầu muốn cho phép việc gửi, nhận, hiển thị notification, đầu tiên ta phải
requestPermissionAndListenbằng hàm:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | const requestPermissionAndListen = async () => { try { await firebase.messaging().requestPermission(); // User has authorised and listen permission listenNotifications() // return return Promise.resolve(true) } catch (error) { } // User has rejected permissions return Promise.reject(false) } |
- Check xem đã có quyền chưa
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | const permissionEnabled = async () => { try { const enabled = await firebase.messaging().hasPermission(); if (enabled) { // user has permissions return Promise.resolve(true) } } catch (error) { } // User has rejected permissions return Promise.reject(false) } |
- Khi muốn firebase gửi notification về, thì ta cần có được token của máy đó, ta sử dụng hàm
getToken
1 2 3 4 5 6 7 8 9 10 11 12 13 | const currentToken = async () => { try { const fcmToken = await firebase.messaging().getToken(); if (fcmToken) { // user has a device token return Promise.resolve(fcmToken) } } catch (error) { } // user doesn't have a device token yet return Promise.reject(null) } |
3. Các vấn đề gặp phải khi hiển thị push notification bên Android và IOS
Khi làm việc với Android và IOS, mình nhận thấy có sự khác biệt về xử lí hiển thị notification, bởi cần handle việc hiển thị notification ở trong lúc dùng app, ngoài app và cả trường hợp kill app. (background, foreground, kill app)
Bên IOS :
1 2 3 4 5 6 | firebase.notifications().onNotification((notification) => { try { // showNotification } catch (error) { } }); |
Bên Android:
1 2 3 4 5 6 | firebase.messaging().onMessage((message) => { // handle for Android // showNotificationAndroid // setBadge() }); |
Sự khác biệt:
| Sự khác biệt | Android | IOS |
|---|---|---|
| Badge và Notification | Chỉ đúng với case background | Tự hiển thị tương ứng cho cả 3 case |
- Đối với IOS: Dựa và thông tin trả về bên firebase, sẽ hiển thị tương ứng, title, message và badge tương ứng.
Action
1 2 3 4 5 6 7 | firebase.messaging().onMessage((message) => { // Process your message as required // handle for Android // showNotificationAndroid // setBadge() }); |
Hiển thị
1 2 | firebase.notifications().displayNotification(new_notification).catch(err => console.error(err)); |
- Đối với bên Android: Không thể tự xử lí được việc hiển thị đúng badge trả về ở cả 3 case ( TH kill app và foreground, ta phải tự handle cho đúng từ việc hiển thị tới badge tương ứng).
Cách xử lí
1 2 | AppRegistry.registerHeadlessTask('RNFirebaseBackgroundMessage', () => PushNotificationHandler.bgMessaging) |
Handle việc hiển thị notification
1 2 3 4 5 6 7 8 9 | const localNotification = new firebase.notifications.Notification() .setNotificationId(data.notificationId) .setTitle(data.title) .setData({ data }) .setBody(data.body) .android.setChannelId(ANDROID_CHANNEL_ID) .android.setSmallIcon(SMALL_ICON) return firebase.notifications().displayNotification(localNotification); |
4. Xử lí action với notification
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | // when a notification is clicked / tapped / opened // App in Foreground and background this.notificationOpenedUnlistener = firebase.notifications().onNotificationOpened((notificationOpen) => { // Get the action triggered by the notification being opened const action = notificationOpen.action; // Get information about the notification that was opened const notification = notificationOpen.notification; firebase.notifications().removeDeliveredNotification(notification._notificationId) clickNotification(notification) }); try { // App Closed const notificationOpen = await firebase.notifications().getInitialNotification(); if (notificationOpen) { // App was opened by a notification // Get the action triggered by the notification being opened const action = notificationOpen.action; // Get information about the notification that was opened const notification = notificationOpen.notification; firebase.notifications().removeDeliveredNotification(notification._notificationId) clickNotification(notification) } } catch (error) { } |
Trên đây là một vài giới thiệu về xử lí push notification trong react native, tuỳ từng phiên bản lại có một chút sự thay đổi, nên các bạn nên đọc qua thêm ở trang chủ của firebase (Version RN hiện tại mình dùng trong bài là 0.59).