A comprehensive showcase application demonstrating all the features of the Firebase Messaging Handler plugin with the new modular architecture.
This example app requires Firebase to be properly configured before it can run.
When you first run the app, you'll see a Firebase Setup Screen with step-by-step instructions. This prevents crashes and guides you through the complete setup process.
- Run the app - You'll see the Firebase setup screen
- Follow the on-screen instructions - Complete setup in the app
- Test notifications - Use the built-in test features
- Firebase project (create at Firebase Console)
- Android:
google-services.jsonfile - iOS:
GoogleService-Info.plistfile + APNs key - 5 minutes of setup time
Before testing, you should configure this example with your own Firebase project:
-
Change Package Name (recommended):
# Update package name in pubspec.yaml name: your_app_name_example # Update Android package name # android/app/build.gradle applicationId "com.yourcompany.yourapp" # Update iOS bundle identifier # ios/Runner/Info.plist CFBundleIdentifier: com.yourcompany.yourapp
-
Set Up Your Firebase Project:
- Create project at Firebase Console
- Add Android app with your package name
- Add iOS app with your bundle ID
- Download configuration files
-
Replace Configuration Files:
- Place
google-services.jsoninandroid/app/ - Place
GoogleService-Info.plistinios/Runner/
- Place
-
Update Firebase Options:
- Run
flutterfire configureor manually updatelib/firebase_options.dart
- Run
The app will guide you through everything step-by-step! ๐ฏ
This example now showcases the refactored plugin architecture with:
- ๐ง Modular Design - Clear separation of concerns with interfaces, services, and managers
- ๐งช Better Testability - Interface-based design enables easy mocking and testing
- ๐ Enhanced Scalability - Modular structure supports future feature additions
- ๐ก๏ธ Robust Error Handling - Comprehensive error handling and logging system
- โ๏ธ Configuration Management - Centralized configuration with validation
- ๐ Backward Compatibility - Existing APIs work unchanged with new architecture
This example app showcases every feature of our Firebase messaging handler plugin:
- Unified notification stream handling all notification types
- Flexible initial notification control (stream or separate handling)
- Smart token management with single backend call optimization
- Cross-platform support (Android, iOS, Web)
- Interactive notification actions with custom payloads
- Notification scheduling (one-time and recurring)
- Badge management (iOS and Android)
- Notification grouping and threading
- Custom sound support
- Built-in analytics tracking
- Testing utilities with mock data
- Create a Firebase project at Firebase Console
- Add your Android and iOS apps to the project
- Download and place
google-services.jsoninandroid/app/ - Download and place
GoogleService-Info.plistinios/Runner/
Find your project's Sender ID in:
- Firebase Console > Project Settings > Cloud Messaging
- Look for "Sender ID" (usually a 12-digit number)
Update the sender ID in lib/services/firebase_messaging_handler_example_service.dart:
senderId: 'YOUR_SENDER_ID', // Replace with your actual sender ID# Install dependencies
flutter pub get
# Run on connected device/emulator
flutter run
# Or run on specific platform
flutter run -d android
flutter run -d ios- Shows initialization status
- Displays FCM token
- Badge count indicators
- Copy FCM Token button in app bar
- Send Test Notification: Interactive notification with action buttons
- Schedule Notification: Schedule a notification for 1 minute from now
- Schedule Recurring: Daily recurring notifications
- Create Notification Group: Group multiple notifications together
- Update Badges: Update badge counts for both platforms
- Custom Sounds: Create notification channels with custom sounds
- View recent notifications with rich metadata
- See notification types (foreground, background, terminated)
- Check notification actions and payloads
- Shows the notification that launched the app (if any)
- Demonstrates separate handling approach
- Tap "Send Test Notification"
- You'll see a notification with "Reply", "View Details", and "Dismiss" buttons
- Tap any button to see the action handling in action
- Tap "Schedule Notification" - notification will appear in 1 minute
- Tap "Schedule Recurring" - daily notifications at 9:00 AM
- Check "Recent Notifications" to see scheduled notifications
- Tap "Update Badges" - sets iOS badge to 5, Android badge to 3
- See badge counts update in the dashboard
- Tap "Create Notification Group" - creates a group of 3 notifications
- See how notifications are organized together
- Test notification channels and custom sounds
- Verify badge management
- Check notification grouping behavior
- Test scheduled notifications
- Test badge management (requires proper APNs setup)
- Verify notification threading
- Check sound customization
- Test scheduled notifications
๐ iOS APNs Setup Required:
For iOS notifications to work properly, you MUST configure APNs:
-
Generate APNs Key:
- Go to Apple Developer Console
- Navigate to Certificates, Identifiers & Profiles
- Go to Keys section
- Create a new key with "Apple Push Notifications service (APNs)" enabled
- Download the
.p8key file
-
Upload to Firebase:
- Go to Firebase Console > Project Settings > Cloud Messaging
- Scroll to "Apple app configuration"
- Upload your APNs key (
.p8file) - Enter your Key ID and Team ID
- Choose environment: Sandbox (development) or Production
-
Without APNs setup:
- iOS notifications will NOT work
- FCM tokens will show "APNs token not set" error
- This is normal behavior until APNs is configured
- Test browser notification permissions
- Verify notification display in browser
- Check service worker integration
- Remote FCM is not available on these platforms
- Use the example to validate desktop local mode instead
- Open Notification Doctor and confirm it reports
FCM unavailablewith local desktop mode active - Test local notification scheduling, inbox flows, and in-app templates
The example demonstrates various configuration options:
// Different notification channels
NotificationChannelData(
id: 'default_channel',
name: 'Default Notifications',
importance: NotificationImportanceEnum.high,
priority: NotificationPriorityEnum.high,
playSound: true,
enableVibration: true,
enableLights: true,
),
// Interactive actions
NotificationAction(
id: 'reply',
title: 'Reply',
payload: {'action': 'reply', 'user_id': 'user123'},
),
// Scheduling options
scheduleNotification(
id: 1,
title: 'Meeting Reminder',
body: 'Team meeting in 30 minutes',
scheduledDate: DateTime.now().add(Duration(minutes: 30)),
),
// Analytics tracking
messagingHandler.setAnalyticsCallback((event, data) {
print('Analytics: $event - $data');
});Notifications not showing:
- Check Firebase configuration files are in place
- Verify sender ID is correct
- Check AndroidManifest.xml permissions
Scheduled notifications not working:
- Ensure broadcast receivers are added to AndroidManifest.xml
- Check scheduled time is in the future
iOS badges not updating:
- Requires proper APNs certificate configuration
- May not work in simulator
- Must upload APNs key to Firebase Console
APNs token not set error:
- This is NORMAL until APNs is configured
- Generate APNs key in Apple Developer Console
- Upload
.p8key file to Firebase Console - Choose correct environment (Sandbox/Production)
- This is a Firebase requirement, not a plugin issue
Custom sounds not playing:
- Add sound files to correct platform directories
- Create notification channels before using sounds
The example logs all analytics events to the console:
notification_received- When notifications arrivenotification_clicked- When notifications are tappednotification_action- When action buttons are pressednotification_scheduled- When notifications are scheduledfcm_token- Token events (fetched, updated, error)
This example app proves that our Firebase messaging handler plugin:
- โ Works exactly as documented - Every feature works as described
- โ Handles all edge cases - Initial notifications, scheduling, actions, etc.
- โ Provides excellent developer experience - Simple APIs that "just work"
- โ Is production-ready - Comprehensive error handling and logging
- โ Supports all platforms - Android, iOS, and Web
- โ Offers advanced features - Beyond basic Firebase messaging capabilities
- โ Uses modern architecture - Modular, scalable, and maintainable design
- โ Maintains backward compatibility - Existing code continues to work
After testing this example:
- Customize for your app - Modify the notification channels and handlers
- Add your Firebase config - Replace placeholder values with real Firebase project
- Implement your logic - Add your app's specific notification handling
- Test thoroughly - Use the testing utilities to ensure reliability
- Deploy with confidence - Our plugin is production-ready!
To integrate into your app:
- Copy the notification service structure
- Customize notification channels for your use case
- Implement your handlers for different notification types
- Add analytics tracking for your metrics
- Test with your Firebase project
The example serves as both a showcase and a starting point for your own implementation! ๐