Deep Linking has evolved heavily over the years. All modern-day apps use this feature (like instagram://). Deep-linking is a feature that allows a user to go to contents concealed deep within a native app, either from another app or a web browser. Deep linking has been quite prevalent in web development as it was rather a straightforward implementation. But with native applications, it hasn't always been apparent how to connect to an app the same way we link web pages.
To start, we need to decide a few things.
- URL scheme
- Deep-link host
- Deep-linking path
myapp://example.com/path
The URL scheme in this deep-link would be myapp, the deep-link host would be example.com and the deep-linking path would be path.
Install the deep-link plugin from Cordova and Ionic.
$ ionic cordova plugin add ionic-plugin-deeplinks --variable URL_SCHEME=myapp --variable DEEPLINK_SCHEME=https --variable DEEPLINK_HOST=example.com --variable ANDROID_PATH_PREFIX=/
The URL_SCHEME and DEEPLINK_HOST values should be what we have decided previously.
Install the native plugin now.
$ npm install --save @ionic-native/deeplinks@4
Import the deep link module and add it to providers.
Once the cordova plugin and native plugin is installed, open app.module.ts.
import { Deeplinks } from '@ionic-native/deeplinks';
........
@NgModule({
....
providers: [
......
Deeplinks
})
export class AppModule {}
Add deeplink path to app.component.ts
.........
import { Deeplinks } from '@ionic-native/deeplinks';
import { Nav } from 'ionic-angular';
export class MyApp {
@ViewChild(Nav) navChild:Nav;
constructor(......private deeplinks:Deeplinks){
platform.ready().then(() => {
this.deeplinks.routeWithNavController(this.navChild, {
'/path/:id':'PageToBeOpened'
}).subscribe(match => {
console.log('Successfully matched route', match);
}, nomatch => {
console.error('Got a deeplink that didn\'t match', nomatch);
});
});
}
}
The added path is '/path/:id'. Where '/path/' is the path and id is the parameter.
If your link is myapp://example.com/path/sampleData , a match would be found and your PageToBeOpened page will be opened. Additionally, a parameter in the name of id will be passed as well. In the above link, sampleData would be passed as a parameter.
This parameter can be obtained in the PageToBeOpened page by this.navParams.get('id');
You can pass query strings as well. This would allow you to pass string variables which contain/ (slash). These type of string variables would cause trouble when being passed as parameters.
You will face a similar experience if you are using deep links to pass activation and verification codes.
To pass a query string, your link should be as follows,
myapp://example.com/path/sampleData?This-is-/meant-/to-be-/sent
You can access your query string in app.component.ts by match.$link.queryString
this.deeplinks.routeWithNavController(this.navChild, {
'/path/:id':'PageToBeOpened'
}).subscribe(match => {
console.log(match.$link.queryString)
console.log('Successfully matched route', match);
}
Conclusion
That's all there is to it! A lot of work is done behind the scenes to ensure that our app opens from both custom URL schemes and Universal Links, and that it works from both a cold boot (when a deeplink received when the program is not functioning) and while operating.
References