feat(rn): 增加notifee用于本地通知

Author: moonrailgun

client/mobile/ios/Podfile.lock

@@ -419,6 +419,11 @@ PODS:
     - React
   - RNGestureHandler (2.9.0):
     - React-Core
+  - RNNotifee (7.4.0):
+    - React-Core
+    - RNNotifee/NotifeeCore (= 7.4.0)
+  - RNNotifee/NotifeeCore (7.4.0):
+    - React-Core
   - RNReanimated (2.14.4):
     - DoubleConversion
     - FBLazyVector
@@ -513,6 +518,7 @@ DEPENDENCIES:
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - ReactNativeUiLib (from `../node_modules/react-native-ui-lib`)
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
+  - "RNNotifee (from `../node_modules/@notifee/react-native`)"
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
@@ -607,6 +613,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-ui-lib"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
+  RNNotifee:
+    :path: "../node_modules/@notifee/react-native"
   RNReanimated:
     :path: "../node_modules/react-native-reanimated"
   Yoga:
@@ -662,6 +670,7 @@ SPEC CHECKSUMS:
   ReactCommon: f697c0ac52e999aa818e43e2b6f277787c735e2d
   ReactNativeUiLib: 8d3804947431a465a69f09c5e785c988314612a9
   RNGestureHandler: 071d7a9ad81e8b83fe7663b303d132406a7d8f39
+  RNNotifee: da8dcf09f079ea22f46e239d7c406e10d4525a5f
   RNReanimated: cc5e3aa479cb9170bcccf8204291a6950a3be128
   SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
   Yoga: 5b0304b3dbef2b52e078052138e23a19c7dacaef

client/mobile/package.json

@@ -10,6 +10,7 @@
     "test": "jest"
   },
   "dependencies": {
+    "@notifee/react-native": "^7.4.0",
     "immer": "^9.0.19",
     "react": "18.2.0",
     "react-native": "0.71.2",

client/mobile/src/AppMain.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { WebView } from 'react-native-webview';
+import { initNotificationEnv } from './lib/notifications';
 
 /**
  * Tailchat的主要内容
@@ -12,6 +13,10 @@ interface Props {
   host: string;
 }
 export const AppMain: React.FC<Props> = React.memo((props) => {
+  useEffect(() => {
+    initNotificationEnv();
+  }, []);
+
   return (
     <View style={styles.root}>
       <WebView source={{ uri: props.host }} />

client/mobile/src/lib/notifications/index.ts

@@ -0,0 +1,81 @@
+import notifee, { EventType } from '@notifee/react-native';
+
+interface NotificationInfo {
+  title: string;
+  body: string;
+}
+
+// Create a channel (required for Android)
+async function createDefaultChannel() {
+  const channelId = await notifee.createChannel({
+    id: 'default',
+    name: 'Default Channel',
+  });
+
+  return channelId;
+}
+
+/**
+ * 显示本地通知
+ */
+export async function showNotification(info: NotificationInfo) {
+  // Request permissions (required for iOS)
+  await notifee.requestPermission();
+
+  const channelId = await createDefaultChannel();
+
+  // Display a notification
+  await notifee.displayNotification({
+    title: info.title,
+    body: info.body,
+    android: {
+      channelId,
+      // pressAction is needed if you want the notification to open the app when pressed
+      pressAction: {
+        id: 'default',
+      },
+    },
+  });
+}
+
+export async function initNotificationEnv() {
+  await notifee.requestPermission();
+
+  await initForegroundService();
+}
+
+async function initForegroundService() {
+  notifee.registerForegroundService((_notification) => {
+    return new Promise(() => {
+      // 一直pending，因此前台服务会一直存在
+
+      notifee.onForegroundEvent(async ({ type, detail }) => {
+        if (
+          type === EventType.ACTION_PRESS &&
+          detail.pressAction?.id === 'stop'
+        ) {
+          await notifee.stopForegroundService();
+        }
+      });
+    });
+  });
+
+  const channelId = await createDefaultChannel();
+
+  notifee.displayNotification({
+    title: 'Foreground service',
+    body: 'This notification will exist for the lifetime of the service runner',
+    android: {
+      channelId,
+      asForegroundService: true,
+      actions: [
+        {
+          title: '停止前台服务',
+          pressAction: {
+            id: 'stop',
+          },
+        },
+      ],
+    },
+  });
+}

client/mobile/yarn.lock

@@ -1436,6 +1436,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@notifee/react-native@^7.4.0":
+  version "7.4.0"
+  resolved "https://registry.npmmirror.com/@notifee/react-native/-/react-native-7.4.0.tgz#0f20744307bf3b800f7b56eb2d0bbdd474748d09"
+  integrity sha512-c8pkxDQFRbw0JlUmTb07OTG/4LQHRj8MBodMLwEcO+SvqIxK8ya8zSUEzfdcdWsSVqdoym0v3zpSNroR3Quj/w==
+
 "@react-native-community/cli-clean@^10.1.1":
   version "10.1.1"
   resolved "https://registry.npmmirror.com/@react-native-community/cli-clean/-/cli-clean-10.1.1.tgz#4c73ce93a63a24d70c0089d4025daac8184ff504"