invertase / notifee

⚛️ A feature rich notifications library for React Native.
https://notifee.app
Apache License 2.0
1.88k stars 228 forks source link

Not able to retrieve data when app is in kill/background mode to navigate to specific screen #1036

Closed Raghu-M-S closed 5 months ago

Raghu-M-S commented 6 months ago

Currently I'm using Notifee to display notification and firebase FCM is my backend.

When app is in Foreground state I'm able to access data payload, based on that i can navigate to specific pages, but when app is in Background and in Kill mode when user tap on the notification, the app is getting open but data payload comes as empty.

So not able to navigate to specific screen

backend code

`try { console.log("Sending message to token", token); const response = await fcm.sendEachForMulticast({ tokens: [token], data: { notifee: JSON.stringify({ body, title, data: { screen: "screen-name" }, }), data: JSON.stringify({ screen: "screen-name" }), },

  android: {
    priority: "high",
    notification: {
      title: title,
      body: body,
      sound: "default",
      priority: "high",
    },
    data: {
      screen: "screen-name",
      keyu: "valu",
      data: JSON.stringify({ screen: "screen-name" }),
    },
  },
  apns: {
    payload: {
      aps: {
        contentAvailable: true,
      },
    },
    headers: {
      // "apns-push-type": "background",
      "apns-priority": "5",
      "apns-topic": "com.app.application",
    },
  },
});
console.log("Successfully sent message", response);

} catch (error) { console.error("Error sending message:", error); }`

I'm handling in frontend in the below manner

`const setupListeners = () => { handleForegroundEvents(); //wrote onTap press actions

messaging().onMessage(async (remoteMessage) => {
  await onDisplayNotification(remoteMessage);
});

messaging().onNotificationOpenedApp(async (remoteMessage) => {
  console.log("Notification opened in background:", remoteMessage);
  const screen = remoteMessage.data?.["screen"];
  console.log("remoteMessage.data?", screen);
  // const screen = remoteMessage.data?.screen;
  navigateFromNotification(screen);
  // if (screen) {
  //   navigation.navigate(screen);
  // }
});

Notifications.addNotificationResponseReceivedListener((response) => {
  console.log("Notification response received:", response);
  const screen = response.notification.request.content.data.screen;
  console.log("screen", response.notification);
  // if (screen) {
  //   navigation.navigate(screen);
  // }
});

messaging().setBackgroundMessageHandler(async (remoteMessage) => {
  console.log("Background notification received:", remoteMessage);
  await onDisplayNotification(remoteMessage);
});

messaging()
  .getInitialNotification()
  .then((remoteMessage) => {
    if (remoteMessage) {
      console.log("App launched from notification:", remoteMessage);
      const screen = remoteMessage.data?.["screen"];
      console.log("screen", screen);
    }
  });

}; useEffect(() => { requestUserPermission(); setupListeners(); }, []); `

github-actions[bot] commented 5 months ago

Hello 👋, to help manage issues we automatically close stale issues.

This issue has been automatically marked as stale because it has not had activity for quite some time.Has this issue been fixed, or does it still require attention?

This issue will be closed in 15 days if no further activity occurs.

Thank you for your contributions.

paulo-hortelan commented 4 months ago

I'm having the same issue, my deeplink is working on foreground and background states but not on killed/closed state.

My code on App.jsx looks like this

async function onForegroundNotification(remoteMessage) {
  await notifee.createChannel({
    id: 'defaultForeground',
    name: 'Default Channel',
    importance: AndroidImportance.HIGH,
  });

  notifee.onForegroundEvent(({ type, detail }) => {
    if (type === EventType.PRESS) {
      Linking.openURL(detail.notification.data.deeplink);
    }

    if (type === EventType.ACTION_PRESS && detail.pressAction.id) {
      console.log('User pressed an action with the id: ' + detail.pressAction.id);
    }
  });

  await notifee.displayNotification({
    title: remoteMessage?.data?.title ?? 'Titulo',
    body: remoteMessage?.data?.body ?? 'Mensagem',
    data: {
      deeplink: remoteMessage?.data?.deeplink ?? null,
    },
    android: {
      channelId: remoteMessage?.data?.channelId ?? 'defaultForeground',
      smallIcon: 'notification_icon',
    },
  });
}

async function onBackgroundNotification(remoteMessage) {
  await notifee.createChannel({
    id: 'defaultBackground',
    name: 'Default Channel',
    importance: AndroidImportance.HIGH,
  });

  notifee.onBackgroundEvent(async ({ type, detail }) => {
    if (type === EventType.PRESS) {
      Linking.openURL(detail.notification.data.deeplink);
    }

    if (type === EventType.ACTION_PRESS && detail.pressAction.id) {
      console.log('User pressed an action with the id: ' + detail.pressAction.id);
    }
  });

  await notifee.displayNotification({
    title: remoteMessage?.data?.title ?? 'Titulo',
    body: remoteMessage?.data?.body ?? 'Mensagem',
    data: {
      deeplink: remoteMessage?.data?.deeplink ?? null,
    },
    android: {
      channelId: remoteMessage?.data?.channelId ?? 'defaultBackground',
      smallIcon: 'notification_icon',
    },
  });
}

messaging().onMessage(async (remoteMessage) => {
  await onForegroundNotification(remoteMessage);
});

messaging().setBackgroundMessageHandler(async (remoteMessage) => {
  await onBackgroundNotification(remoteMessage);
});

And on my MainNavigator.jsx, which is called inside of App.jsx I have the deeplink configuration

  const linkingConfig = {
    prefixes: [Linking.createURL('/')],
    config: {
      screens: {
        Notificacoes: {
          path: 'notificacoes',
        },
        Notificacao: {
          path: 'notificacao/:id',
        },
      },
    }
  };