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

• Android
• Browser
• iOS

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.

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.

DeeplinkMatch