Natuurlijk! Hier is een uitgebreide gids voor het bouwen van een aangepast notificatiesysteem in je Capacitor-app, inclusief zowel lokale als pushmeldingen voor iOS en Android. --- ### 1. Voorbereiding en benodigde plugins Gebruik de [`@capacitor/push-notifications`](https://capacitorjs.com/docs/apis/push-notifications) plugin voor pushmeldingen en de [`@capacitor/local-notifications`](https://capacitorjs.com/docs/apis/local-notifications) voor lokale meldingen. **Installatie:** ```bash npm install @capacitor/push-notifications @capacitor/local-notifications npx cap sync ``` --- ### 2. Permissies beheren #### iOS: - Voeg de volgende sleutels toe aan `Info.plist` voor notificatierechten: ```xml <key>NSLocationWhenInUseUsageDescription</key> <string>We gebruiken locatie voor meldingen</string> <key>NSUserNotificationUsageDescription</key> <string>We vragen toestemming voor meldingen</string> ``` - Vraag toestemming bij app-start: ```typescript import { PushNotifications } from '@capacitor/push-notifications'; PushNotifications.requestPermissions().then(permission => { if (permission.receive === 'granted') { // Toestemming verleend } }); ``` #### Android: - Voeg de vereiste machtigingen toe in `AndroidManifest.xml`: ```xml <uses-permission android:name="android.permission.POST_NOTIFICATIONS" /> ``` - Voor Android 13+ moet je runtime toestemming vragen: ```typescript import { PermissionsAndroid } from 'react-native'; async function requestAndroidNotificationPermission() { const granted = await PermissionsAndroid.request( PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS ); return granted === PermissionsAndroid.RESULTS.GRANTED; } ``` --- ### 3. Lokale meldingen implementeren **Basisvoorbeeld:** ```typescript import { LocalNotifications } from '@capacitor/local-notifications'; // Planning een lokale notificatie async function scheduleLocalNotification() { await LocalNotifications.schedule({ notifications: [ { title: "Hallo!", body: "Dit is een lokale notificatie.", id: 1, schedule: { at: new Date(Date.now() + 10000) }, // 10 seconden later sound: null, smallIcon: "ic_notification", color: "#488aff" } ] }); } // Afhandelen van interacties LocalNotifications.addListener('localNotificationActionPerformed', (notification) => { console.log('Notification actie:', notification); }); ``` ### 4. Pushmeldingen implementeren **Fasen:** - **Registratie voor pushmeldingen:** ```typescript import { PushNotifications } from '@capacitor/push-notifications'; PushNotifications.register(); PushNotifications.addListener('registration', (token) => { console.log('Push Token:', token.value); // Verstuur token naar je server }); ``` - **Ontvangen van pushmeldingen:** ```typescript PushNotifications.addListener('pushReceived', (notification) => { console.log('Push ontvangen:', notification); }); PushNotifications.addListener('pushActionPerformed', (notification) => { console.log('Gebruiker heeft op de notificatie gedrukt:', notification); }); ``` - **Configuratie van bijvoorbeeld Firebase Cloud Messaging (FCM):** Voor Android en iOS moet je je app registreren bij FCM en de API-sleutels configureren: - **iOS:** Voeg je APNs certificaten toe via Apple Developer Console. - **Android:** Voeg `google-services.json` toe en configureer je project. **Firebase configuratie voorbeeld:** - Installeer Firebase SDK en voeg je projectconfiguratie toe. - Gebruik je server om pushmeldingen te sturen naar het token dat je ontvangt. --- ### 5. Aanpassen van de uitstraling en gedrag van meldingen - Voor lokale meldingen kun je onder andere `smallIcon`, `color`, en `sound` instellen (Android). ```typescript { title: "Aangepaste notificatie", body: "Met aangepaste uitstraling", smallIcon: "ic_custom_icon", color: "#ff0000", sound: "custom_sound.mp3" } ``` - Voor pushmeldingen kun je in je server payloads aanpassen: ```json { "to": "<device_token>", "notification": { "title": "Aangepaste titel", "body": "Aangepaste inhoud", "icon": "my_icon", "sound": "default" }, "data": { // Extra gegevens } } ``` --- ### 6. Interactie met meldingen beheren - **Lokale meldingen:** ```typescript LocalNotifications.addListener('localNotificationActionPerformed', (notification) => { // Acties gebaseerd op gebruikersinteractie console.log('Gebruiker heeft de notificatie aangeraakt:', notification); }); ``` - **Pushmeldingen:** ```typescript PushNotifications.addListener('pushActionPerformed', (notification) => { // Afhankelijk van de actie kun je navigeren of data verwerken console.log('Gebruiker heeft op push gedrukt:', notification); }); ``` --- ### 7. Testen van meldingen - **Lokale meldingen:** gebruik `schedule` of `trigger` methoden en controleer of ze verschijnen op je toestel. - **Pushmeldingen:** gebruik tools zoals Firebase Console of je eigen backend om testmeldingen te sturen naar je device token. --- ### 8. Samenvatting en adviezen - **Permissies:** vraag altijd expliciete toestemming en informeer gebruikers over het gebruik. - **Aanpassen uitstraling:** gebruik iconen, kleuren en geluiden passend bij je app. - **Gedrag:** plan meldingen zorgvuldig, voorkom spam en respecteer de gebruikerservaring. - **Interacties:** behandel gebruikersactie-events om te navigeren of data te verwerken. - **Testen:** test op echte apparaten en verschillende scenario’s. --- Mocht je meer details willen over specifieke implementaties of hulp bij de setup van bijvoorbeeld Firebase, laat het gerust weten!

I'll help you build a comprehensive notification system for your Capacitor app. Here's a complete guide covering both local and push notifications for iOS and Android. ## 1. Setup and Installation First, install the necessary Capacitor plugins: ```bash npm install @capacitor/local-notifications npm install @capacitor/push-notifications npx cap sync ``` ## 2. Configuration Files ### iOS Configuration (Info.plist) Add these entries to your `ios/App/App/Info.plist`: ```xml <key>UIBackgroundModes</key> <array> <string>remote-notification</string> </array> <key>NSUserNotificationsUsageDescription</key> <string>We need to send you notifications</string> ``` ### Android Configuration (AndroidManifest.xml) Add these permissions to your `android/app/src/main/AndroidManifest.xml`: ```xml <uses-permission android:name="android.permission.POST_NOTIFICATIONS" /> <uses-permission android:name="android.permission.VIBRATE" /> <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" /> ``` ## 3. Notification Service Implementation Create a notification service file `src/services/notification.service.ts`: ```typescript import { LocalNotifications } from '@capacitor/local-notifications'; import { PushNotifications } from '@capacitor/push-notifications'; class NotificationService { private isInitialized = false; async initialize() { if (this.isInitialized) return; await this.setupPushNotifications(); await this.setupLocalNotifications(); this.isInitialized = true; } // Push Notifications Setup private async setupPushNotifications() { try { // Request permission let permStatus = await PushNotifications.checkPermissions(); if (permStatus.receive === 'prompt') { permStatus = await PushNotifications.requestPermissions(); } if (permStatus.receive !== 'granted') { throw new Error('User denied permissions!'); } // Register for push await PushNotifications.register(); // Set up listeners this.setupPushListeners(); } catch (error) { console.error('Push notification setup failed:', error); } } // Local Notifications Setup private async setupLocalNotifications() { try { // Request permission let permStatus = await LocalNotifications.checkPermissions(); if (permStatus.display === 'prompt') { permStatus = await LocalNotifications.requestPermissions(); } if (permStatus.display !== 'granted') { throw new Error('User denied permissions!'); } // Set up listeners this.setupLocalListeners(); } catch (error) { console.error('Local notification setup failed:', error); } } // Push Notification Listeners private setupPushListeners() { // On registration PushNotifications.addListener('registration', (token) => { console.log('Push registration success, token:', token.value); // Send this token to your backend server this.sendTokenToServer(token.value); }); // On registration error PushNotifications.addListener('registrationError', (error) => { console.error('Push registration error:', error); }); // When notification is received in foreground PushNotifications.addListener('pushNotificationReceived', (notification) => { console.log('Push received in foreground:', notification); // You can show a custom UI or handle the notification }); // When user taps on notification PushNotifications.addListener('pushNotificationActionPerformed', (notification) => { console.log('Push action performed:', notification); this.handleNotificationAction(notification); }); } // Local Notification Listeners private setupLocalListeners() { // When notification is displayed LocalNotifications.addListener('localNotificationReceived', (notification) => { console.log('Local notification received:', notification); }); // When user taps on local notification LocalNotifications.addListener('localNotificationActionPerformed', (notification) => { console.log('Local notification action performed:', notification); this.handleNotificationAction(notification); }); } // Send token to your backend private async sendTokenToServer(token: string) { try { await fetch('https://your-backend.com/register-device', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ token: token, platform: this.getPlatform(), }), }); } catch (error) { console.error('Failed to send token to server:', error); } } // Handle notification actions private handleNotificationAction(notification: any) { const data = notification.notification.data; const actionId = notification.actionId; console.log('Notification data:', data); console.log('Action ID:', actionId); // Handle different notification types switch (data?.type) { case 'chat': // Navigate to chat screen this.navigateToChat(data.chatId); break; case 'order': // Navigate to order details this.navigateToOrder(data.orderId); break; default: // Handle default action break; } } // Schedule Local Notification async scheduleLocalNotification(options: { title: string; body: string; schedule?: { at: Date }; extra?: any; }) { try { await LocalNotifications.schedule({ notifications: [ { title: options.title, body: options.body, id: this.generateNotificationId(), schedule: options.schedule, extra: options.extra, // Android specific smallIcon: 'ic_stat_icon', largeIcon: 'ic_launcher', // iOS specific sound: 'beep.wav', attachments: null, }, ], }); } catch (error) { console.error('Failed to schedule notification:', error); } } // Send Immediate Local Notification async sendNow(title: string, body: string, extra?: any) { await this.scheduleLocalNotification({ title, body, schedule: { at: new Date(Date.now() + 1000) }, // 1 second from now extra, }); } // Cancel specific notification async cancelNotification(ids: number[]) { await LocalNotifications.cancel({ notifications: ids }); } // Cancel all notifications async cancelAllNotifications() { await LocalNotifications.cancelAll(); } // Get delivered notifications async getDeliveredNotifications() { return await LocalNotifications.getDeliveredNotifications(); } // Utility methods private generateNotificationId(): number { return Math.floor(Math.random() * 10000); } private getPlatform(): string { return (window as any).Capacitor?.getPlatform() || 'web'; } private navigateToChat(chatId: string) { // Implement your navigation logic console.log('Navigating to chat:', chatId); } private navigateToOrder(orderId: string) { // Implement your navigation logic console.log('Navigating to order:', orderId); } } export const notificationService = new NotificationService(); ``` ## 4. App Integration Integrate the notification service in your main app component: ```typescript // src/App.vue (or your main component) import { notificationService } from './services/notification.service'; export default { name: 'App', async mounted() { // Initialize notifications when app starts await notificationService.initialize(); // Example: Schedule a welcome notification await notificationService.scheduleLocalNotification({ title: 'Welcome!', body: 'Thanks for installing our app!', schedule: { at: new Date(Date.now() + 5000) }, // 5 seconds from now extra: { type: 'welcome' } }); } } ``` ## 5. Advanced Customization ### Custom Notification Channels (Android) Create `android/app/src/main/res/values/notification_channels.xml`: ```xml <?xml version="1.0" encoding="utf-8"?> <resources> <string-array name="notification_channels"> <item>default</item> <item>chat</item> <item>orders</item> </string-array> <string-array name="notification_channels_names"> <item>Default</item> <item>Chat Messages</item> <item>Order Updates</item> </string-array> <string-array name="notification_channels_descriptions"> <item>General notifications</item> <item>Chat messages and conversations</item> <item>Order status updates</item> </string-array> </resources> ``` ### Custom Notification Icons (Android) Add notification icons to `android/app/src/main/res/drawable`: - `ic_stat_icon.png` (24x24 white icon) - `ic_launcher.png` (48x48 colored icon) ## 6. Testing Notifications ### Testing Local Notifications Create a test component `src/components/NotificationTester.vue`: ```vue <template> <div class="notification-tester"> <button @click="testLocalNotification">Test Local Notification</button> <button @click="testScheduledNotification">Test Scheduled Notification</button> <button @click="cancelAllNotifications">Cancel All Notifications</button> </div> </template> <script> import { notificationService } from '../services/notification.service'; export default { methods: { async testLocalNotification() { await notificationService.sendNow( 'Test Notification', 'This is a test local notification!', { type: 'test', screen: 'home' } ); }, async testScheduledNotification() { const inFiveMinutes = new Date(Date.now() + 5 * 60 * 1000); await notificationService.scheduleLocalNotification({ title: 'Scheduled Test', body: 'This notification was scheduled!', schedule: { at: inFiveMinutes }, extra: { type: 'scheduled_test' } }); }, async cancelAllNotifications() { await notificationService.cancelAllNotifications(); } } } </script> ``` ### Testing Push Notifications For testing push notifications, you can use services like: - **Firebase Cloud Messaging** (Android & iOS) - **APNs** (iOS) through Firebase or directly Example Firebase Cloud Messaging test payload: ```json { "message": { "token": "DEVICE_TOKEN_HERE", "notification": { "title": "Test Push", "body": "This is a test push notification" }, "data": { "type": "test", "screen": "profile", "userId": "123" } } } ``` ## 7. Platform-Specific Considerations ### iOS Specific Setup 1. **Capacitor Configuration** (`capacitor.config.ts`): ```typescript import { CapacitorConfig } from '@capacitor/cli'; const config: CapacitorConfig = { appId: 'com.yourcompany.yourapp', appName: 'Your App', webDir: 'dist', plugins: { PushNotifications: { presentationOptions: ['badge', 'sound', 'alert'] }, LocalNotifications: { smallIcon: 'ic_stat_icon', iconColor: '#488AFF', sound: 'beep.wav' } } }; export default config; ``` 2. **iOS Capabilities**: Enable "Push Notifications" and "Background Modes" in Xcode. ### Android Specific Setup 1. **Firebase Setup**: Add `google-services.json` to `android/app/` 2. **Custom Icons**: Ensure notification icons follow Android design guidelines ## 8. Permission Handling Best Practices ```typescript // Enhanced permission handling async requestNotificationPermission(): Promise<boolean> { try { // Check current status const permStatus = await LocalNotifications.checkPermissions(); if (permStatus.display === 'denied') { // Show custom explanation why notifications are needed this.showPermissionExplanation(); return false; } if (permStatus.display === 'prompt') { // Request permission with context const result = await LocalNotifications.requestPermissions(); return result.display === 'granted'; } return permStatus.display === 'granted'; } catch (error) { console.error('Permission request failed:', error); return false; } } private showPermissionExplanation() { // Show a custom modal explaining why notifications are beneficial // and guide users to app settings to enable them } ``` ## 9. Error Handling and Debugging ```typescript // Add comprehensive error handling async safeNotificationOperation(operation: () => Promise<void>) { try { await operation(); } catch (error) { console.error('Notification operation failed:', error); // Handle specific error types if (error.message.includes('permission')) { console.warn('Notification permission issue'); } else if (error.message.includes('schedule')) { console.warn('Scheduling issue'); } } } ``` This comprehensive notification system provides: - ✅ Local and push notification support - ✅ Cross-platform compatibility (iOS/Android) - ✅ Permission management - ✅ Custom notification handling - ✅ Testing utilities - ✅ Error handling and debugging Remember to test thoroughly on both platforms and handle edge cases specific to each operating system's notification behavior.