Capacitor: Deep Links Support

[sandstrom]

Deep links are useful for many things (linking from emails into app content, for single sign-on flows, etc). Since Capacitor / Ionic are focusing on PWAs and the ability to write apps for native + web, being able to control where/how content is opened is even more useful.

Is deep links support on the radar?

The two Cordova plugins that support this today are:

• https://github.com/nordnet/cordova-universal-links-plugin
• https://github.com/BranchMetrics/cordova-ionic-phonegap-branch-deep-linking

There is also this custom url scheme plugin (somewhat related to deep links):
https://github.com/EddyVerbruggen/Custom-URL-scheme

[mlynch]

They’re already supported. See the App API’s appUrlOpen event https://capacitor.ionicframework.com/docs/apis/app#method-addListener-1

[sandstrom]

Awesome @mlynch! 🎉 🌟

(I looked through the docs, but expected a dedicated/separate heading for deep-links, probably why I didn't find it)

[WB3Tech]

@mlynch, is there an example of how to do this? I'm new to Ionic and Ionic Capacitor and am looking to set this up on for my Angular 7 app.

[sandstrom]

@WB3Tech This isn't the right forum for support question. Stackoverflow or similar would be better.

That said, it's fairly well documented in the docs referenced above.

[mlynch]

@WB3Tech use the App.getLaunchUrl method to get any URL used to launch the app, then listen for the App.addListener('appUrlOpen', (data) => data.url...) event for deep links while the app is open.

Let us know how you get on

[seanharr11]

@mlynch when using Ionic, as you mention above, we are ABLE to capture the appUrlOpen event and get the URL for the universal link that opened the app. However, how do we navigate to this URL? I have tried this:

  import { Plugins } from '@capacitor/core';
  const {App: IonicApp} = Plugins;

  IonicApp.addListener("appUrlOpen", (data) => {
    console.log("Opened app via universal link", data);
    const path = data.url.replace("http://", "").replace("https://", "").split("/").slice(1);
    const page = path.join("/");
    console.log("In APP! Navigating to: ", page);
    history.push({pathname: `/${page}`});
  });

...but there is currently no way to inject a custom history prop into the IonRouter, thus we don't have a handle on history in these listeners.

In the React case, do you suggest we nest these listeners within a routed React component (_e.g. to access the history prop_)? The following seems to work, but not sure if it is bad practice to nest these listeners within a react component, e.g.:

import { ReadonlyBrowserHistory } from '../history';
import { Plugins } from '@capacitor/core';

interface LoggedOutRouterProps {
  history: ReadonlyBrowserHistory;
}

const { App: IonicApp } = Plugins;

const LoggedOutRouter = ({history}: LoggedOutRouterProps) => {

  useEffect(() => {
    IonicApp.addListener("appUrlOpen", (data) => {
      console.log("Opened app via universal link", data);
      const path = data.url.replace("http://", "").replace("https://", "").split("/").slice(1);
      const page = path.join("/");
      console.log("Navigating to: ", page);
      history.push("/" + page);
    })
  }, []);

  return (
    <Component>
        ...
    <Component>
  )

I will move this to SO if you think the above is a proper use. Please advise.

[tx-tim]

@seanharr11 Were you able to get this figured out?