Files
crowd-funder-for-time-pwa/doc/daily-notification-plugin-checklist.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

8.6 KiB

Daily Notification Plugin - Integration Checklist

Integration Date: 2026-01-21
Plugin Version: 1.0.11
Status: Phase 1 Complete


Phase 1: Infrastructure Setup COMPLETE

Code Files

  • Created src/plugins/DailyNotificationPlugin.ts
  • Created src/services/notifications/NotificationService.ts
  • Created src/services/notifications/NativeNotificationService.ts
  • Created src/services/notifications/WebPushNotificationService.ts
  • Created src/services/notifications/index.ts

Android Configuration

  • Added permissions to AndroidManifest.xml:
    • POST_NOTIFICATIONS
    • SCHEDULE_EXACT_ALARM
    • USE_EXACT_ALARM
    • RECEIVE_BOOT_COMPLETED
    • WAKE_LOCK
  • Registered receivers in AndroidManifest.xml:
    • DailyNotificationReceiver
    • BootReceiver
  • Added dependencies to build.gradle:
    • Room (androidx.room:room-runtime:2.6.1)
    • WorkManager (androidx.work:work-runtime-ktx:2.9.0)
    • Coroutines (org.jetbrains.kotlinx:kotlinx-coroutines-android:1.7.3)
    • Room Compiler (androidx.room:room-compiler:2.6.1)
  • Registered plugin in MainActivity.java

iOS Configuration

  • Added to Info.plist:
    • UIBackgroundModes (fetch, processing)
    • BGTaskSchedulerPermittedIdentifiers
    • NSUserNotificationAlertStyle
  • ⚠️ MANUAL STEP: Xcode capabilities (see Phase 5)

Documentation

  • Created doc/daily-notification-plugin-integration.md
  • Created doc/daily-notification-plugin-integration-summary.md
  • Created doc/daily-notification-plugin-architecture.md
  • Created this checklist

Phase 2: UI Integration TODO

Update Components

  • Modify PushNotificationPermission.vue:
    • Import NotificationService
    • Replace direct web push calls with service methods
    • Add platform-aware messaging
    • Test permission flow
    • Test notification scheduling

Update Views

  • Update AccountViewView.vue:
    • Use NotificationService for status checks
    • Add platform indicator
    • Test settings display

Settings Integration

  • Verify settings save/load correctly:
    • notifyingNewActivityTime for native
    • notifyingReminderMessage for native
    • notifyingReminderTime for native
    • Existing web push settings preserved

Phase 3: Web Push Integration TODO

Wire WebPushNotificationService

  • Extract subscription logic from PushNotificationPermission.vue
  • Implement scheduleDailyNotification() method
  • Implement cancelDailyNotification() method
  • Implement getStatus() method
  • Test web platform notification flow

Server Integration

  • Verify web push server endpoints still work
  • Test subscription/unsubscription
  • Test scheduled message delivery

Phase 4: Testing TODO

Desktop Development

  • Code compiles without errors
  • ESLint passes
  • TypeScript types are correct
  • Platform detection works in browser console

Android Emulator

  • App builds successfully
  • Plugin loads without errors
  • Can open app and navigate
  • No JavaScript console errors

Android Device (Real)

  • Request permissions dialog appears
  • Permissions can be granted
  • Schedule notification succeeds
  • Notification appears at scheduled time
  • Notification survives app close
  • Notification survives device reboot
  • Notification can be cancelled

iOS Simulator

  • App builds successfully
  • Plugin loads without errors
  • Can open app and navigate
  • No JavaScript console errors

iOS Device (Real)

  • Request permissions dialog appears
  • Permissions can be granted
  • Schedule notification succeeds
  • Notification appears at scheduled time
  • Background fetch works
  • Notification survives app close
  • Notification can be cancelled

Web Browser

  • Existing web push still works
  • No JavaScript errors
  • Platform detection selects web service
  • Permission flow works
  • Subscription works

Phase 5: iOS Xcode Setup ⚠️ MANUAL REQUIRED

Open Xcode Project

cd ios
open App/App.xcodeproj

Configure Capabilities

  • Select "App" target in project navigator
  • Go to "Signing & Capabilities" tab
  • Click "+ Capability" button
  • Add "Background Modes":
    • Enable "Background fetch"
    • Enable "Background processing"
  • Click "+ Capability" button again
  • Add "Push Notifications" (if using remote notifications)

Install CocoaPods

cd ios
pod install
cd ..
  • Run pod install successfully
  • Verify CapacitorDailyNotification pod is installed

Verify Configuration

  • Build succeeds in Xcode
  • No capability warnings
  • No pod errors
  • Can run on simulator

Phase 6: Build & Deploy TODO

Sync Capacitor

npx cap sync
  • Sync completes without errors
  • Plugin files copied to native projects

Build Android

npm run build:android:debug
  • Build succeeds
  • APK/AAB generated
  • Can install on device/emulator

Build iOS

npm run build:ios:debug
  • Build succeeds
  • IPA generated (if release)
  • Can install on device/simulator

Test Production Builds

  • Android release build works
  • iOS release build works
  • Notifications work in production

Troubleshooting Checklist

Android Issues

Notifications Not Appearing

  • Verified DailyNotificationReceiver is in AndroidManifest.xml
  • Checked logcat for errors: adb logcat | grep DailyNotification
  • Verified permissions granted in app settings
  • Checked "Exact alarms" permission (Android 12+)
  • Verified notification channel is created

Build Errors

  • Verified all dependencies in build.gradle
  • Ran ./gradlew clean and rebuilt
  • Verified Kotlin version compatibility
  • Checked for conflicting dependencies

iOS Issues

Notifications Not Appearing

  • Verified Background Modes enabled in Xcode
  • Checked Xcode console for errors
  • Verified permissions granted in Settings app
  • Tested on real device (not just simulator)
  • Checked BGTaskScheduler identifiers match Info.plist

Build Errors

  • Ran pod install successfully
  • Verified deployment target is iOS 13.0+
  • Checked for pod conflicts
  • Cleaned build folder (Xcode → Product → Clean Build Folder)

Web Issues

Web Push Not Working

  • Verified service worker is registered
  • Checked browser console for errors
  • Verified VAPID keys are correct
  • Tested in supported browser (Chrome 42+, Firefox)
  • Checked push server is running

Permission Issues

  • Verified permissions not blocked in browser
  • Checked site settings in browser
  • Verified HTTPS connection (required for web push)

Verification Commands

Check Plugin is Installed

npm list @timesafari/daily-notification-plugin

Check Capacitor Sync

npx cap ls

Check Android Build

cd android
./gradlew clean
./gradlew assembleDebug

Check iOS Build

cd ios
pod install
xcodebuild -workspace App/App.xcworkspace -scheme App -configuration Debug build

Check TypeScript

npm run type-check

Check Linting

npm run lint

Next Immediate Actions

  1. Run Capacitor Sync:

    npx cap sync
    
  2. For iOS Development:

    cd ios
    open App/App.xcodeproj
    # Enable Background Modes capability
    pod install
    cd ..
    
  3. Test on Emulator/Simulator:

    npm run build:android:debug  # For Android
    npm run build:ios:debug      # For iOS
    
  4. Update UI Components:

    • Start with PushNotificationPermission.vue
    • Import and use NotificationService

Success Criteria

  • Phase 1: All files created and configurations applied
  • Phase 2: Components use NotificationService
  • Phase 3: Web push integrated with service
  • Phase 4: All tests pass on all platforms
  • Phase 5: iOS capabilities configured in Xcode
  • Phase 6: Production builds work on real devices

Questions or Issues?

See documentation:

  • Full guide: doc/daily-notification-plugin-integration.md
  • Architecture: doc/daily-notification-plugin-architecture.md
  • Summary: doc/daily-notification-plugin-integration-summary.md

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


Current Status: Ready for Phase 2 (UI Integration) 🚀