You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

PhoneGap后台状态下FCM推送通知点击跳转指定页面失效问题

Fixing Background Notification Click Navigation with phonegap-plugin-push

Hey there, let’s work through that frustrating issue where clicking a push notification doesn’t open your target page when your app’s in the background. This is a super common gotcha with phonegap-plugin-push, so I’ve got concrete steps and code examples to fix it.

1. Listen to the Right Event (Critical!)

When your app’s in the foreground, the notification event fires when you receive a notification. But when the app’s in the background and the user taps the notification, you need to listen to the notificationOpened event—this is the plugin’s dedicated event for when a notification is tapped from the system tray.

A lot of developers miss this listener, which is exactly why the navigation doesn’t trigger.

2. Ensure Your FCM Payload Includes Custom Data

FCM handles background notifications differently: if you only send the notification object, the system displays the notification directly, and your app might not receive the custom navigation data when tapped. You need to add a data field to your FCM payload that includes your target page/route info.

Example FCM payload (JSON):

{
  "to": "YOUR_DEVICE_TOKEN",
  "notification": {
    "title": "New Update",
    "body": "Check out the latest content!"
  },
  "data": {
    "targetPage": "news-detail.html",
    "itemId": "456"
  }
}

The data fields will be passed directly to your plugin’s event handlers, so you can use them to trigger the correct navigation.

3. Full Working Initialization Code

Here’s a complete example that covers both foreground notification handling and background click navigation:

// Initialize Push Notification
var push = PushNotification.init({
    android: {
        senderID: "YOUR_FCM_SENDER_ID",
        icon: "app_notification_icon", // Ensure this icon exists in your Android drawables
        iconColor: "#2196F3",
        forceShow: true // Ensures notifications show even if app is in background
    },
    ios: {
        alert: "true",
        badge: "true",
        sound: "true"
    },
    windows: {}
});

// Handle notifications received while app is in foreground
push.on('notification', function(notificationData) {
    console.log('Foreground notification received:', notificationData);
    
    // Optional: Handle foreground taps if needed
    handleNotificationNavigation(notificationData.additionalData);
    
    // Critical for Android: Tell the system you've processed the notification
    notificationData.finish(function() {
        console.log('Foreground notification processed');
    });
});

// Handle notification taps from background (THIS IS THE KEY ONE!)
push.on('notificationOpened', function(openedData) {
    console.log('Notification tapped from background:', openedData);
    handleNotificationNavigation(openedData.additionalData);
});

// Shared navigation logic
function handleNotificationNavigation(additionalData) {
    // Check if we have the target page data
    if (additionalData && additionalData.targetPage) {
        // Navigate using plain JS (adjust this for your framework if needed)
        var navigationUrl = additionalData.targetPage;
        if (additionalData.itemId) {
            navigationUrl += '?id=' + additionalData.itemId;
        }
        window.location.href = navigationUrl;
        
        // If using a framework like Ionic/Angular, use its router instead:
        // $state.go('app.news-detail', { id: additionalData.itemId });
    }
}

// Handle successful registration
push.on('registration', function(regData) {
    console.log('Push registration ID:', regData.registrationId);
    // Send this ID to your backend to target the device
});

// Handle push errors
push.on('error', function(error) {
    console.error('Push notification error:', error.message);
});

4. Quick Troubleshooting Tips

  • Plugin Version: Make sure you’re using the latest version of phonegap-plugin-push—older versions had bugs with the notificationOpened event. Run cordova plugin update phonegap-plugin-push to update.
  • Android Manifest: If you’ve customized your main Activity, ensure it has the correct intent filters to receive FCM wake-up intents. The plugin usually auto-configures this, but double-check if you’ve made manual changes.
  • Background Permissions: On some Android devices (like Xiaomi, Huawei), you need to enable "Auto-Start" or "Background Activity" permissions for your app—otherwise, the app might not wake up when the notification is tapped.
  • Test Properly: Make sure your app is in the background (not force-closed) when testing. If the app is completely closed, the behavior might vary slightly, but the notificationOpened event should still fire once the app launches.

Give these steps a try—9 times out of 10, the issue is either missing the notificationOpened listener or not including the data payload in your FCM message. Let me know if you run into any other hurdles!

内容的提问来源于stack exchange,提问作者user2903570

火山引擎 最新活动