基于Ionic React+Capacitor的Android和iOS无第三方（如Firebase）推送通知实现方案咨询

First, let’s split this into two common scenarios based on where the new sale record is created—either within your app or from an external backend system:

Scenario 1: New sale is added directly from your app #

If users are adding sales through your Ionic app, you can use local notifications (no external services required). Capacitor’s built-in LocalNotifications plugin lets you trigger notifications directly from the app, which fits your "static implementation" request perfectly.

Step-by-Step Implementation: #

1. Install the plugin:

npm install @capacitor/local-notifications
npx cap sync

2. Request notification permissions (do this early, e.g., on app load):

import { LocalNotifications } from '@capacitor/local-notifications';

async function requestNotificationPermissions() {
  const result = await LocalNotifications.requestPermissions();
  if (result.display === 'granted') {
    // Permissions approved, ready to send notifications
  }
}

3. Trigger a notification after successfully adding a sale:
   Modify your sale creation function to send a notification when the POST request succeeds:

async function addNewSale(newSaleData: Sale) {
  try {
    const response = await Http.request({
      url: baseURL + "/sale",
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Token: token,
      },
      data: newSaleData
    });

    // Schedule local notification immediately
    await LocalNotifications.schedule({
      notifications: [
        {
          title: "New Sale Recorded",
          body: `Sale #${response.data.id} has been added to your history`,
          id: Date.now(), // Unique ID to avoid duplicates
          schedule: { at: new Date(Date.now() + 1000) }, // Trigger right away
          sound: "default"
        }
      ]
    });

    // Refresh your sale history list
    fetchSaleHistory(); // Call your existing useEffect-based fetch function here
  } catch (error) {
    console.error("Failed to add sale:", error);
  }
}

This is a self-contained, static solution with no reliance on external services.

Scenario 2: New sale is added from an external backend (e.g., admin panel) #

If sales are added outside your app and you need to notify users, you’ll need to connect your backend directly to the native push APIs of each platform (no third-party middlemen like Firebase).

For iOS: Directly use Apple Push Notification Service (APNs) #

Apple allows you to send push notifications directly via their APNs HTTP/2 API. Here’s how to set this up:

1. Generate APNs Credentials:
   • Go to the Apple Developer Portal, create an APNs authentication key or SSL certificate for your app.
   • Store this credential securely on your backend.
2. Collect Device Tokens:
   • In your Ionic app, use Capacitor’s PushNotifications plugin to get the iOS device token and send it to your backend for storage:

     import { PushNotifications } from '@capacitor/push-notifications';
     
     async function registerForPushNotifications() {
       const { token } = await PushNotifications.register();
       // Send this token to your backend, linked to the user's account
     }
     

3. Backend Implementation:
   • Your backend sends POST requests to the APNs endpoint (e.g., https://api.push.apple.com/3/device/{device-token}) with the notification payload and your authentication key. Example payload:

     {
       "aps": {
         "alert": {
           "title": "New Sale Added",
           "body": "A new sale record has been added to your history"
         },
         "sound": "default"
       }
     }
     

For Android: Challenges and Workarounds #

Android’s primary push system is Firebase Cloud Messaging (FCM), but since you can’t use Firebase, here are two viable alternatives:

1. Backend Polling:
   • Have your app periodically check the backend for new sales (e.g., every 5 minutes). When a new sale is detected, trigger a local notification. This is a static approach, though less efficient than real push.
   • Example polling code:

     useEffect(() => {
       const pollingInterval = setInterval(async () => {
         const latestSales = await fetchSaleHistoryData(); // Your existing fetch logic
         if (latestSales.length > saleEntries.length) {
           // New sale found, trigger notification
           await LocalNotifications.schedule({
             notifications: [{
               title: "New Sale Recorded",
               body: "A new sale has been added to your history",
               id: Date.now()
             }]
           });
           setSaleEntries(latestSales);
         }
       }, 300000); // 5 minutes in milliseconds
     
       return () => clearInterval(pollingInterval);
     }, [saleEntries]);
     

2. Alternative Push Services (Non-Google):
   • For devices without Google Play Services (e.g., Amazon Fire), you could use Amazon Device Messaging, but this counts as a third-party service. Polling is likely the better fit for your restriction.

Key Notes: #

• For backend-to-device pushes, you’ll need to manage token storage, handle token expiration (APNs tokens can change), and debug API errors from Apple/Android.
• Polling is simpler to implement but uses more battery and data compared to real push notifications.

内容的提问来源于stack exchange，提问作者Ani