Firebase push notifications tap in background mode redirect not working

Capacitor
1

Hi, I’m building app where I receive firebase push notifications with data if app is open everything work but when app is in background mode or killed totally I receive notification and after tap the app open redirects me to specific page but before fully loading page redirects again but to home page.

I’m using Ionic with React and capacitor/push-notifications plugin

Listener component:

import { useEffect } from "react";
import { useHistory } from "react-router-dom";
import {
  ActionPerformed,
  PushNotificationSchema,
  PushNotifications,
  Token,
} from "@capacitor/push-notifications";

import { storage } from "src/chain";
import { useToast } from "src/hooks";

const NotificationsListener: React.FC = () => {
  const history = useHistory();
  const { showToast } = useToast();

  useEffect(() => {
    initFirebbase();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const initFirebbase = () => {
    PushNotifications.checkPermissions().then(res => {
      if (res.receive !== "granted") {
        PushNotifications.requestPermissions().then(res => {
          if (res.receive === "denied") {
            showToast({
              message: "Push Notification permission denied",
              color: "danger",
            });
          } else {
            showToast({
              message: "Push Notification permission granted",
              color: "success",
            });
            registerListeners();
          }
        });
      } else {
        registerListeners();
      }
    });
  };

  const registerListeners = () => {
    PushNotifications.register();

    PushNotifications.addListener("registration", (token: Token) => {
      storage.setItem("firebaseToken", token.value).then(res => {
        if (res) {
          console.log("Firebase token saved: ", token.value);
        }
      });
    });

    PushNotifications.addListener("registrationError", (error: any) => {
      console.log("Error on registration: " + JSON.stringify(error));
    });

    PushNotifications.addListener(
      "pushNotificationReceived",
      (data: PushNotificationSchema) => handleNotifications(data),
    );

    PushNotifications.addListener(
      "pushNotificationActionPerformed",
      (data: ActionPerformed) => {
        console.log(data);
        return handleNotifications(data);
      },
    );
  };

  const handleNotifications = async (data: any) => {
    storage.setItem("notification", data).then(res => {
      if (res) {
        history.push("/action");
      }
    });
  };

  return null;
};

export default NotificationsListener;

and how I’m using it in App.tsx:

const App: React.FC = () => {
  return (
    <IonApp>
      <IonReactRouter>
        <Route exact path="/intro" component={IntroPage} />
        <Route path="/" component={hasIdentity ? MainTabs : IntroPage} />

        {hasIdentity && (
          <>
            <AppUrlListener />
            <NotificationsListener />
          </>
        )}
      </IonReactRouter>
    </IonApp>
  );
};

export default App;

{
  "dependencies": {
    "@capacitor/android": "3.2.2",
    "@capacitor/app": "1.0.3",
    "@capacitor/core": "3.2.2",
    "@capacitor/haptics": "1.0.3",
    "@capacitor/ios": "^3.2.2",
    "@capacitor/keyboard": "1.0.3",
    "@capacitor/network": "^1.0.3",
    "@capacitor/push-notifications": "^1.0.4",
    "@capacitor/splash-screen": "^1.1.2",
    "@capacitor/status-bar": "1.0.3",
    "@ionic-native/fingerprint-aio": "^5.36.0",
    "@ionic-native/native-storage": "^5.36.0",
    "@ionic-native/qr-scanner": "^5.36.0",
    "@ionic-native/social-sharing": "^5.36.0",
    "@ionic/react": "^5.7.0",
    "@ionic/react-router": "^5.7.0",
    "@ionic/storage": "^3.0.6",
    "aes256": "^1.1.0",
    "cordova-plugin-fingerprint-aio": "^4.0.2",
    "cordova-plugin-nativestorage": "^2.3.2",
    "cordova-plugin-qrscanner": "^3.0.1",
    "cordova-plugin-x-socialsharing": "^6.0.3",
    "es6-promise-plugin": "^4.2.2",
    "i18next": "^20.4.0",
    "i18next-resources-to-backend": "^1.0.0",
    "ionicons": "^5.4.0",
    "jetifier": "^2.0.0",
    "node-sass": "^6.0.1",
    "qrcode.react": "^1.0.1",
    "react": "^17.0.1",
    "react-circular-progressbar": "^2.0.4",
    "react-dom": "^17.0.1",
    "react-hook-form": "^7.15.0",
    "react-i18next": "^11.11.4",
    "react-router": "^5.2.1",
    "react-router-dom": "^5.3.0",
    "react-scripts": "4.0.3",
    "recheck-clientjs-library": "^1.0.22-beta.5",
    "swiper": "^6.8.4"
  }

Ionic:

Ionic CLI : 6.17.0 (/Users/byurhanbeyzat/.nvm/versions/node/v14.17.3/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 5.7.0

Capacitor:

Capacitor CLI : 3.1.2
@capacitor/android : 3.2.2
@capacitor/core : 3.2.2
@capacitor/ios : 3.2.2

Utility:

cordova-res : not installed globally
native-run (update available: 1.4.1) : 1.4.0

System:

NodeJS : v14.17.3 (/Users/byurhanbeyzat/.nvm/versions/node/v14.17.3/bin/node)
npm : 7.20.3
OS : macOS Catalina