Skip to content

Commit 244b237

Browse files
ucswiftucswift
committed
RE1-T88 Removing expo-notification so that FCM works.
1 parent 3b7933e commit 244b237

File tree

5 files changed

+550
-218
lines changed

5 files changed

+550
-218
lines changed

‎docs/push-notification-fcm-refactor.md‎

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
# Push Notification Service - Firebase Cloud Messaging Refactor
2+
3+
## Overview
4+
5+
The push notification service has been completely refactored to use Firebase Cloud Messaging (FCM) and Notifee exclusively, removing the dependency on Expo Notifications. This provides better native support, more reliable notification delivery, and enhanced features for both iOS and Android platforms.
6+
7+
## Key Changes
8+
9+
### 1. **Package Dependencies**
10+
11+
#### Removed
12+
- `expo-notifications` - No longer used for notification handling
13+
14+
#### Now Using
15+
- `@react-native-firebase/messaging` - Primary package for push notifications
16+
- `@notifee/react-native` - For advanced Android notification channels and iOS notification management
17+
18+
### 2. **Service Refactoring**
19+
20+
#### Notification Channel Management (Android)
21+
- Migrated from `Notifications.setNotificationChannelAsync()` to `notifee.createChannel()`
22+
- Improved channel properties with better Android 13+ support
23+
- Maintains all 32 notification channels (standard + custom call tones)
24+
25+
#### Permission Handling
26+
- **iOS**: Uses `messaging().requestPermission()` with support for:
27+
- Standard notifications (alert, badge, sound)
28+
- **Critical Alerts** - Emergency notifications that bypass Do Not Disturb
29+
- Provisional authorization
30+
31+
- **Android**: Uses both FCM and Notifee permission systems
32+
- FCM for push token management
33+
- Notifee for notification channel permissions
34+
35+
#### Message Handling
36+
37+
The service now handles three types of notifications:
38+
39+
1. **Foreground Messages**:
40+
- Handled via `messaging().onMessage()`
41+
- Shows notification modal when app is open
42+
- Processes eventCode for navigation
43+
44+
2. **Background Messages**:
45+
- Handled via `messaging().setBackgroundMessageHandler()`
46+
- Processes data payloads when app is in background
47+
- System displays notifications automatically if payload includes notification object
48+
49+
3. **Notification Taps**:
50+
- `messaging().onNotificationOpenedApp()` - App in background
51+
- `messaging().getInitialNotification()` - App was killed
52+
- Both trigger modal display for eventCode-based navigation
53+
54+
### 3. **Token Management**
55+
56+
- FCM tokens obtained via `messaging().getToken()`
57+
- Automatic token refresh handled by Firebase SDK
58+
- Token registration with backend continues to work seamlessly
59+
- Platform detection (iOS=1, Android=2) maintained
60+
61+
### 4. **Lifecycle Management**
62+
63+
#### Initialization
64+
```typescript
65+
await pushNotificationService.initialize();
66+
```
67+
- Sets up Android notification channels
68+
- Registers background message handler
69+
- Establishes foreground message listener
70+
- Sets up notification tap handlers
71+
72+
#### Cleanup
73+
```typescript
74+
pushNotificationService.cleanup();
75+
```
76+
- Unsubscribes from all FCM listeners
77+
- Cleans up resources properly
78+
- Safe to call multiple times
79+
80+
### 5. **Event-Driven Architecture**
81+
82+
The service maintains integration with the `usePushNotificationModalStore` for handling notification events:
83+
84+
```typescript
85+
// Notification data structure
86+
{
87+
eventCode: string, // Required for modal display
88+
title?: string,
89+
body?: string,
90+
data: Record<string, unknown>
91+
}
92+
```
93+
94+
Event codes trigger different app behaviors:
95+
- `C:*` - Call notifications
96+
- `M:*` - Message notifications
97+
- `T:*` - Chat notifications
98+
- `G:*` - Group notifications
99+
100+
## Integration Points
101+
102+
### No Breaking Changes
103+
104+
The public API remains unchanged:
105+
106+
```typescript
107+
// Hook usage (unchanged)
108+
const { pushToken } = usePushNotifications();
109+
110+
// Manual registration (unchanged)
111+
const token = await pushNotificationService.registerForPushNotifications(
112+
unitId,
113+
departmentCode
114+
);
115+
116+
// Get current token (unchanged)
117+
const token = pushNotificationService.getPushToken();
118+
```
119+
120+
### Store Integration
121+
122+
The service continues to work with existing stores:
123+
- `usePushNotificationModalStore` - For displaying notification modals
124+
- `useCoreStore` - For active unit tracking
125+
- `securityStore` - For department rights
126+
127+
## Platform-Specific Features
128+
129+
### iOS
130+
- Critical alert support for emergency notifications
131+
- Proper authorization status handling
132+
- Support for provisional authorization
133+
- Badge and sound management
134+
135+
### Android
136+
- Rich notification channels with custom sounds
137+
- Vibration patterns per channel
138+
- High importance for emergency calls
139+
- LED light colors and lockscreen visibility
140+
- Android 13+ notification permission support
141+
142+
## Testing
143+
144+
Comprehensive test coverage includes:
145+
146+
1. **Notification Handling Tests**
147+
- Call notifications with eventCode
148+
- Message notifications
149+
- Chat and group notifications
150+
- Edge cases (empty eventCode, missing data, non-string eventCode)
151+
152+
2. **Listener Management Tests**
153+
- Initialization verification
154+
- Cleanup verification
155+
- Multiple cleanup calls
156+
- Cleanup without initialization
157+
158+
3. **Registration Tests**
159+
- Successful registration
160+
- Permission request flow
161+
- Permission denial handling
162+
- Token retrieval
163+
164+
4. **Android Channel Tests**
165+
- Verifies all 32 channels are created
166+
- Platform-specific behavior
167+
168+
All tests passing: **1421 tests passed**
169+
170+
## Migration Notes
171+
172+
### For Developers
173+
174+
No code changes required in components using the push notification service. The refactor is fully backward compatible.
175+
176+
### For Deployment
177+
178+
1. Ensure Firebase configuration files are present:
179+
- `google-services.json` (Android)
180+
- `GoogleService-Info.plist` (iOS)
181+
182+
2. Verify native dependencies are installed:
183+
```bash
184+
cd ios && pod install
185+
cd android && ./gradlew clean
186+
```
187+
188+
3. Test push notifications on both platforms in:
189+
- Foreground state
190+
- Background state
191+
- Killed/terminated state
192+
193+
## Benefits
194+
195+
1. **Reliability**: FCM is the native push notification service for both platforms
196+
2. **Features**: Access to platform-specific features (critical alerts, rich notifications)
197+
3. **Performance**: Better battery optimization and delivery guarantees
198+
4. **Maintenance**: Aligned with platform best practices and future updates
199+
5. **Debugging**: Better logging and error handling with Firebase console integration
200+
201+
## Future Enhancements
202+
203+
Potential improvements enabled by this refactor:
204+
205+
- Rich notifications with images and actions
206+
- Notification grouping and bundling
207+
- Custom notification layouts (Android)
208+
- Notification scheduling with Notifee
209+
- Enhanced analytics via Firebase Analytics integration
210+
- A/B testing for notification content
211+
212+
## References
213+
214+
- [Firebase Cloud Messaging Documentation](https://rnfirebase.io/messaging/usage)
215+
- [Notifee Documentation](https://notifee.app/react-native/docs/overview)
216+
- [iOS Critical Alerts](https://developer.apple.com/documentation/usernotifications/asking_permission_to_use_notifications#3544375)
217+
- [Android Notification Channels](https://developer.android.com/develop/ui/views/notifications/channels)

‎src/app/_layout.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ import '../lib/i18n';
55
import { Env } from '@env';
66
import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
77
import { registerGlobals } from '@livekit/react-native';
8+
import notifee from '@notifee/react-native';
89
import { createNavigationContainerRef, DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
910
import * as Sentry from '@sentry/react-native';
1011
import { isRunningInExpoGo } from 'expo';
11-
import * as Notifications from 'expo-notifications';
1212
import { Stack, useNavigationContainerRef } from 'expo-router';
1313
import * as SplashScreen from 'expo-splash-screen';
1414
import React, { useEffect } from 'react';
@@ -102,13 +102,14 @@ function RootLayout() {
102102
}
103103

104104
// Clear the badge count on app startup
105-
Notifications.setBadgeCountAsync(0)
105+
notifee
106+
.setBadgeCount(0)
106107
.then(() => {
107108
logger.info({
108109
message: 'Badge count cleared on startup',
109110
});
110111
})
111-
.catch((error) => {
112+
.catch((error: Error) => {
112113
logger.error({
113114
message: 'Failed to clear badge count on startup',
114115
context: { error },

‎src/components/calls/dispatch-selection-modal.tsx‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -121,8 +121,9 @@ export const DispatchSelectionModal: React.FC<DispatchSelectionModalProps> = ({
121121
<TouchableOpacity onPress={() => toggleUser(user.Id)}>
122122
<HStack className="items-center space-x-3">
123123
<Box
124-
className={`size-5 items-center justify-center rounded border-2 ${selection.users.includes(user.Id) ? 'border-blue-500 bg-blue-500' : colorScheme === 'dark' ? 'border-neutral-600' : 'border-neutral-300'
125-
}`}
124+
className={`size-5 items-center justify-center rounded border-2 ${
125+
selection.users.includes(user.Id) ? 'border-blue-500 bg-blue-500' : colorScheme === 'dark' ? 'border-neutral-600' : 'border-neutral-300'
126+
}`}
126127
>
127128
{selection.users.includes(user.Id) && <CheckIcon size={12} className="text-white" />}
128129
</Box>
@@ -147,8 +148,9 @@ export const DispatchSelectionModal: React.FC<DispatchSelectionModalProps> = ({
147148
<TouchableOpacity onPress={() => toggleGroup(group.Id)}>
148149
<HStack className="items-center space-x-3">
149150
<Box
150-
className={`size-5 items-center justify-center rounded border-2 ${selection.groups.includes(group.Id) ? 'border-blue-500 bg-blue-500' : colorScheme === 'dark' ? 'border-neutral-600' : 'border-neutral-300'
151-
}`}
151+
className={`size-5 items-center justify-center rounded border-2 ${
152+
selection.groups.includes(group.Id) ? 'border-blue-500 bg-blue-500' : colorScheme === 'dark' ? 'border-neutral-600' : 'border-neutral-300'
153+
}`}
152154
>
153155
{selection.groups.includes(group.Id) && <CheckIcon size={12} className="text-white" />}
154156
</Box>
@@ -173,8 +175,9 @@ export const DispatchSelectionModal: React.FC<DispatchSelectionModalProps> = ({
173175
<TouchableOpacity onPress={() => toggleRole(role.Id)}>
174176
<HStack className="items-center space-x-3">
175177
<Box
176-
className={`size-5 items-center justify-center rounded border-2 ${selection.roles.includes(role.Id) ? 'border-blue-500 bg-blue-500' : colorScheme === 'dark' ? 'border-neutral-600' : 'border-neutral-300'
177-
}`}
178+
className={`size-5 items-center justify-center rounded border-2 ${
179+
selection.roles.includes(role.Id) ? 'border-blue-500 bg-blue-500' : colorScheme === 'dark' ? 'border-neutral-600' : 'border-neutral-300'
180+
}`}
178181
>
179182
{selection.roles.includes(role.Id) && <CheckIcon size={12} className="text-white" />}
180183
</Box>
@@ -199,8 +202,9 @@ export const DispatchSelectionModal: React.FC<DispatchSelectionModalProps> = ({
199202
<TouchableOpacity onPress={() => toggleUnit(unit.Id)}>
200203
<HStack className="items-center space-x-3">
201204
<Box
202-
className={`size-5 items-center justify-center rounded border-2 ${selection.units.includes(unit.Id) ? 'border-blue-500 bg-blue-500' : colorScheme === 'dark' ? 'border-neutral-600' : 'border-neutral-300'
203-
}`}
205+
className={`size-5 items-center justify-center rounded border-2 ${
206+
selection.units.includes(unit.Id) ? 'border-blue-500 bg-blue-500' : colorScheme === 'dark' ? 'border-neutral-600' : 'border-neutral-300'
207+
}`}
204208
>
205209
{selection.units.includes(unit.Id) && <CheckIcon size={12} className="text-white" />}
206210
</Box>

0 commit comments

Comments
 (0)