Files
crowd-funder-for-time-pwa/doc/daily-notification-plugin-integration-summary.md
Jose Olarte III 14ffcb5434 feat: integrate daily notification plugin for native iOS/Android
Add native notification support via @timesafari/daily-notification-plugin
while maintaining existing Web Push for web/PWA builds. Platform detection
automatically selects the appropriate notification system at runtime.

Key Changes:
- Created NotificationService abstraction layer with unified API
- Implemented NativeNotificationService for iOS/Android
- Stubbed WebPushNotificationService for future web integration
- Registered DailyNotificationPlugin in Capacitor plugin system

Android Configuration:
- Added notification permissions (POST_NOTIFICATIONS, SCHEDULE_EXACT_ALARM, etc.)
- Registered DailyNotificationReceiver for alarm-based notifications
- Registered BootReceiver to restore schedules after device restart
- Added Room, WorkManager, and Coroutines dependencies
- Registered plugin in MainActivity.java

iOS Configuration:
- Added UIBackgroundModes (fetch, processing) to Info.plist
- Configured BGTaskSchedulerPermittedIdentifiers
- Added NSUserNotificationAlertStyle

Documentation:
- Created comprehensive integration guide
- Added architecture overview with diagrams
- Created implementation checklist
- Documented platform-specific behavior

Manual Steps Required:
- iOS: Enable Background Modes capability in Xcode
- iOS: Run `pod install` to install CapacitorDailyNotification pod
- Run `npx cap sync` to sync native projects

Platform Support:
- iOS: Native UNUserNotificationCenter (requires Xcode setup)
- Android: Native NotificationManager with AlarmManager
- Web/PWA: Existing Web Push (coexists, not yet wired to service)
- Electron: Ready (uses native implementation)

Status: Phase 1 complete - infrastructure ready for UI integration
Next: Update PushNotificationPermission.vue to use NotificationService
2026-01-21 22:22:48 +08:00

5.2 KiB

Daily Notification Plugin Integration - Summary

Date: 2026-01-21
Status: Phase 1 Complete
Next Phase: UI Integration


What Was Completed

Plugin Infrastructure

  1. Plugin Registration: src/plugins/DailyNotificationPlugin.ts

    • Capacitor plugin registered with full TypeScript types
    • Native-only (iOS/Android)
  2. Service Abstraction: src/services/notifications/

    • NotificationService.ts - Platform detection & factory
    • NativeNotificationService.ts - Native implementation
    • WebPushNotificationService.ts - Web stub (for future)
    • index.ts - Barrel export
  3. Android Configuration:

    • Permissions added to AndroidManifest.xml
    • Receivers registered (DailyNotificationReceiver, BootReceiver)
    • Dependencies added to build.gradle (Room, WorkManager, Coroutines)
    • Plugin registered in MainActivity.java
  4. iOS Configuration:

    • Background modes added to Info.plist
    • BGTaskScheduler identifiers configured
    • ⚠️ Requires manual Xcode setup (capabilities)
  5. Documentation: doc/daily-notification-plugin-integration.md


Platform Support

Platform Notification System Status
iOS Native (UNUserNotificationCenter) Configured
Android Native (NotificationManager + AlarmManager) Configured
Web/PWA Web Push (existing) 🔄 Coexists, not yet wired
Electron Native (via Capacitor) Ready

Key Feature: Both systems coexist using runtime platform detection.


Quick Start Usage

import { NotificationService } from '@/services/notifications';

// Automatically uses native on iOS/Android, web push on web
const service = NotificationService.getInstance();

// Request permissions
const granted = await service.requestPermissions();

if (granted) {
  // Schedule daily notification at 9 AM
  await service.scheduleDailyNotification({
    time: '09:00',
    title: 'Daily Check-In',
    body: 'Time to check your TimeSafari activity'
  });
}

// Check status
const status = await service.getStatus();
console.log('Notifications enabled:', status.enabled);

Next Steps

Immediate (Phase 2)

  1. Update UI Components:

    • Modify PushNotificationPermission.vue to use NotificationService
    • Add platform-aware messaging
    • Test on simulator/emulator
  2. iOS Xcode Setup (Required):

    cd ios
    open App/App.xcodeproj
    
    • Enable "Background Modes" capability
    • Enable "Push Notifications" capability
    • Run pod install

Short-term (Phase 3)

  1. Wire Web Push: Connect WebPushNotificationService to existing web push logic
  2. Test on Devices: Real iOS and Android devices
  3. Update Settings: Ensure notification preferences save correctly

Build & Sync

# Sync native projects with web code
npx cap sync

# Build for Android
npm run build:android:debug

# Build for iOS (after Xcode setup)
cd ios && pod install && cd ..
npm run build:ios:debug

Important Notes

⚠️ Critical Requirements

Android:

  • DailyNotificationReceiver must be in AndroidManifest.xml ( done)
  • Runtime permissions needed for Android 13+ (API 33+)
  • Exact alarm permission for Android 12+ (API 31+)

iOS:

  • Background Modes capability must be enabled in Xcode (⚠️ manual)
  • BGTaskScheduler identifiers must match Info.plist ( done)
  • Test on real device (simulators have limitations)

Web:

  • Existing Web Push continues to work unchanged
  • No conflicts - platform detection ensures correct system

Files Created/Modified

Created (8 files)

  • src/plugins/DailyNotificationPlugin.ts
  • src/services/notifications/NotificationService.ts
  • src/services/notifications/NativeNotificationService.ts
  • src/services/notifications/WebPushNotificationService.ts
  • src/services/notifications/index.ts
  • doc/daily-notification-plugin-integration.md
  • doc/daily-notification-plugin-integration-summary.md

Modified (4 files)

  • android/app/src/main/AndroidManifest.xml - Permissions + Receivers
  • android/app/build.gradle - Dependencies
  • android/app/src/main/java/app/timesafari/MainActivity.java - Plugin registration
  • ios/App/App/Info.plist - Background modes + BGTaskScheduler

Testing Checklist

Before Device Testing

  • Code compiles without errors
  • Platform detection logic verified
  • Service factory creates correct implementation

Android Device

  • Request permissions (Android 13+)
  • Schedule notification
  • Notification appears at scheduled time
  • Notification survives app close
  • Notification survives device reboot

iOS Device

  • Xcode capabilities enabled
  • Request permissions
  • Schedule notification
  • Notification appears at scheduled time
  • Background fetch works
  • Notification survives app close

Web/PWA

  • Existing web push still works
  • No errors in console
  • Platform detection selects web implementation

Questions?

See full documentation: doc/daily-notification-plugin-integration.md

Plugin README: node_modules/@timesafari/daily-notification-plugin/README.md


Status: Ready for Phase 2 (UI Integration) 🚀