Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

Deeplinks

Improve this doc

This plugin handles deeplinks on iOS and Android for both custom URL scheme links and Universal App Links.

Repo: https://github.com/ionic-team/ionic-plugin-deeplinks

Installation

  1. Install the Cordova and Ionic Native plugins:
    $ ionic cordova plugin add ionic-plugin-deeplinks --variable URL_SCHEME=myapp --variable DEEPLINK_SCHEME=https --variable DEEPLINK_HOST=example.com --variable ANDROID_PATH_PREFIX=/
    $ npm install --save @ionic-native/deeplinks@4
    
  2. Add this plugin to your app's module

Supported platforms

Usage

import { Deeplinks } from '@ionic-native/deeplinks';

constructor(private deeplinks: Deeplinks) { }

this.deeplinks.route({
     '/about-us': AboutPage,
     '/universal-links-test': AboutPage,
     '/products/:productId': ProductPage
   }).subscribe(match => {
     // match.$route - the route we matched, which is the matched entry from the arguments to route()
     // match.$args - the args passed in the link
     // match.$link - the full link data
     console.log('Successfully matched route', match);
   }, nomatch => {
     // nomatch.$link - the full link data
     console.error('Got a deeplink that didn\'t match', nomatch);
   });

Alternatively, if you're using Ionic, there's a convenience method that takes a reference to a NavController and handles the actual navigation for you:

this.deeplinks.routeWithNavController(this.navController, {
  '/about-us': AboutPage,
  '/products/:productId': ProductPage
}).subscribe(match => {
    // match.$route - the route we matched, which is the matched entry from the arguments to route()
    // match.$args - the args passed in the link
    // match.$link - the full link data
    console.log('Successfully matched route', match);
  }, nomatch => {
    // nomatch.$link - the full link data
    console.error('Got a deeplink that didn\'t match', nomatch);
  });

See the Ionic Deeplinks Demo for an example of how to retrieve the NavController reference at runtime.

Instance Members

route(paths)

Define a set of paths to match against incoming deeplinks.

Param Type Details
paths paths

Define a set of paths to match against incoming deeplinks. paths takes an object of the form { 'path': data }. If a deeplink matches the path, the resulting path-data pair will be returned in the promise result which you can then use to navigate in the app as you see fit.

Returns: Observable<DeeplinkMatch> Returns an Observable that is called each time a deeplink comes through, and errors if a deeplink comes through that does not match a given path.

routeWithNavController(navController, paths, options)

This is a convenience version of route that takes a reference to a NavController from Ionic, or a custom class that conforms to this protocol:

NavController.push = function(View, Params){}

This handler will automatically navigate when a route matches. If you need finer-grained control over the behavior of a matching deeplink, use the plain route method.

Param Type Details
navController Nav

Define a set of paths to match against incoming deeplinks. paths takes an object of the form { 'path': data }. If a deeplink matches the path, the resulting path-data pair will be returned in the promise result which you can then use to navigate in the app as you see fit.

paths Object
options DeeplinkOptions

Returns: Observable<DeeplinkMatch> Returns an Observable that resolves each time a deeplink comes through, and errors if a deeplink comes through that does not match a given path.

DeeplinkMatch

Param Type Details
$route any

The route info for the matched route

$args any

Any arguments passed either through route parameters or GET parameters

$link any

The deeplink object processed from the plugin, along with any any internal native data available as "extras" at the time the route was matched (for example, Facebook sometimes adds extra data)

API

Native

General