Hello everyone I am trying to implement deep linking using capacitor methods like App.getLaunchUrl().
everything work fine when App is closed but when the App is opened in the background the App.getLaunchUrl() returns empty.
This is the versions which I am using:
{
"@capacitor/android": "^2.1.0",
"@capacitor/core": "2.1.0",
"@capacitor/ios": "^2.1.0",
"@ionic-native/contacts": "^5.26.0",
"@ionic-native/core": "^5.26.0",
"@ionic-native/deeplinks": "^5.26.0",
"@ionic/app-scripts": "3.2.4",
"@ionic/pwa-elements": "^1.5.2",
"@ionic/react": "^5.1.0",
"@ionic/react-hooks": "0.0.8",
"@ionic/react-router": "^5.1.0",
"@testing-library/jest-dom": "^5.7.0",
"@testing-library/react": "^10.0.4",
"@testing-library/user-event": "^10.1.2",
"@types/jest": "^25.2.1",
"@types/lodash": "^4.14.153",
"@types/node": "^13.13.5",
"@types/react": "^16.9.35",
"@types/react-dom": "^16.9.8",
"@types/react-router": "^5.1.7",
"@types/react-router-dom": "^5.1.5",
"axios": "^0.19.2",
"cordova-plugin-contacts": "^3.0.1",
"ionic": "^5.4.16",
"ionic-plugin-deeplinks": "^1.0.20",
"ionicons": "^5.0.1",
"lodash": "^4.17.15",
"node-sass": "^4.14.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
"short-unique-id": "^3.0.3",
"typescript": "3.8.3"
}
And this is the related code,
import React, { useReducer, useEffect, useState } from "react";
import { Route, Redirect } from "react-router-dom";
import { IonApp, IonRouterOutlet } from "@ionic/react";
import { IonReactRouter } from "@ionic/react-router";
import Home from "./pages/Home/Home";
import InroPage from "./pages/IntroPage/IntroPage";
import Login from "./pages/Login/Login";
import Verfication from "./pages/Verification/Verifocation";
import Profile from "./pages/Profile/Profile";
import HomePage from "./pages/HomePage/HomePage";
import CircleDetail from "./pages/CircleDetail/CircleDetail";
import InvitationPage from "./pages/InvitationPage/InvitationPage";
import Actions, { Context, initialState, reducer } from "./state/globalState";
/* Core CSS required for Ionic components to work properly */
import "@ionic/react/css/core.css";
/* Basic CSS for apps built with Ionic */
import "@ionic/react/css/normalize.css";
import "@ionic/react/css/structure.css";
import "@ionic/react/css/typography.css";
/* Optional CSS utils that can be commented out */
import "@ionic/react/css/padding.css";
import "@ionic/react/css/float-elements.css";
import "@ionic/react/css/text-alignment.css";
import "@ionic/react/css/text-transformation.css";
import "@ionic/react/css/flex-utils.css";
import "@ionic/react/css/display.css";
/* Theme variables */
import "./theme/variables.css";
import "./styles/main.scss";
import { Plugins } from "@capacitor/core";
const { Storage } = Plugins;
const { App: CapApp } = Plugins;
const App: React.FC = () => {
// const history = useHistory();
const [hasData, setHasData] = useState(false);
const [URL, setURL]: any = useState(null);
const [store, dispatch] = useReducer(reducer, initialState);
const getObject = async () => {
const ret: any = await Storage.get({ key: "userData" });
const user = JSON.parse(ret.value);
return new Promise((resolve, reject) => {
resolve(user);
});
};
Plugins.App.addListener("appUrlOpen", (data: any) => {
console.log("from app URL in APP Component");
console.log(data);
const resultID = data.url.split("/")[data.url.split("/").length - 1];
setURL("/circle/" + resultID);
});
Plugins.App.addListener("appStateChange", async (state: any) => {
console.log("from app state change in APP Component", state);
const a = await Plugins.App.getLaunchUrl().then((ret) => {
console.log(ret);
if (ret.url !== "") {
const resultID = ret.url.split("/")[ret.url.split("/").length - 1];
setURL("/circle/" + resultID);
} else {
setURL(null);
}
});
setTimeout(() => {
console.log("in the settime out", a);
}, 2000);
});
useEffect(() => {
getObject().then((data: any) => {
// console.log(data);
if (data !== null) {
setHasData(true);
}
Plugins.App.getLaunchUrl().then((ret) => {
// console.log(ret);
if (ret.url !== "") {
// console.log("outside of useEffect");
// console.log(ret.url.split("/"));
const resultID = ret.url.split("/")[ret.url.split("/").length - 1];
setURL("/circle/" + resultID);
} else {
setURL(null);
}
});
// console.log(ret);
});
}, []);
return (
<Context.Provider value={{ store, dispatch }}>
<IonApp>
<IonReactRouter>
{/* <AppUrlListener></AppUrlListener> */}
{URL !== null && <Redirect to={URL} />}
<IonRouterOutlet>
<Route path="/circle/:id" component={InvitationPage} exact />
<Route exact path="/" component={hasData ? HomePage : InroPage} />
<Route exact path="/home-page" component={HomePage} />
<Route path="/login" component={Login} />
<Route path="/circle-detail/:id" component={CircleDetail} exact />
<Route path="/verification" component={Verfication} />
<Route path="/profile" component={Profile} />
<Route path="/home" component={Home} exact={true} />
</IonRouterOutlet>
</IonReactRouter>
</IonApp>
</Context.Provider>
);
};
export default App;
Also as you see I have tried to get the launch URL when the App state is changing.
And I tried other different methods as you can see inside the code like appUrlOpen.