SAPUI5 Hybrid App：使用kapsel-plugin-push添加推送通知自定义图标

Hey there! Let’s walk through how to get both your custom icon working properly AND fix that payload issue you’re seeing with the kapsel-plugin-push.

1. Making Sure Your Custom Icon Setup Doesn’t Break Payload #

First, let’s confirm your icon configuration is correct (since misconfiguring this can accidentally mess with payload parsing):

• Icon file requirements: For Android, your push icon needs to be placed in the appropriate res/drawable-* folders (mdpi, hdpi, xhdpi, etc.) with matching resolutions. The filename must follow Android resource naming rules—no spaces, special characters, or uppercase letters; stick to lowercase and underscores, like push_notification_icon.
• Correct gcmNotification structure: When defining the icon, make sure it’s part of the gcmNotification object, but keep your custom payload data in a separate top-level data object. A valid payload should look like this:

  {
    "gcmNotification": {
      "title": "New Alert",
      "body": "Check your app for updates",
      "icon": "push_notification_icon",
      "sound": "default"
    },
    "data": {
      "orderId": "12345",
      "priority": "high"
    }
  }
  

  Notice how data is a sibling to gcmNotification—not nested inside it. This is critical for the payload to be recognized.

2. Fixing Non-Working Notification Payload #

The most common reasons your payload isn’t working are related to structure or how you’re accessing it in your app:

• Wrong payload placement: If you put custom data inside gcmNotification, the plugin won’t pick it up as a payload. Always use the top-level data object for your custom key-value pairs.
• Incorrect callback handling: Make sure you’re accessing the payload correctly in your app’s push notification callback. Here’s an example of how to read the data:

  sap.Push.registerForPushNotifications(
    (registrationId) => console.log("Registered with ID:", registrationId),
    (error) => console.error("Push registration failed:", error),
    (event) => {
      // Handle incoming notification
      if (event.data) {
        // Access your custom payload here
        console.log("Order ID from payload:", event.data.orderId);
        // Trigger app logic based on the payload (e.g., open a specific screen)
      }
    }
  );
  

• Android background behavior: If your app is in the background, Android might handle the notification directly unless your payload includes the data field. Ensure your push message is a "data+notification" message (not just a notification message) so the plugin can pass the payload to your app even when it’s not in the foreground.
• SAP Mobile Services configuration: When testing pushes from SAP Mobile Services, don’t forget to add your custom payload in the Data tab (not just the Notification tab). The Data tab lets you input key-value pairs that will be included in the top-level data object of the push message.

3. Double-Checking Sound & Icon Coexistence #

Since you already fixed the sound issue, just a quick reminder: For custom sounds on Android, place the audio file in res/raw and reference it by filename (no extension) in the sound field. Using "sound": "default" will use the system’s default notification tone, which is usually safe.

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