Skip to content

Instantly share code, notes, and snippets.

@Nodonisko
Last active July 21, 2016 09:29
Show Gist options
  • Save Nodonisko/f265d367d45f56753bfbdc6b17e25cb0 to your computer and use it in GitHub Desktop.
Save Nodonisko/f265d367d45f56753bfbdc6b17e25cb0 to your computer and use it in GitHub Desktop.
Ionic 2 Custom URL Scheme integration
import {Component} from '@angular/core';
import {Platform, ionicBootstrap} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsDashboardPage} from './pages/tabs-dashboard/tabs-dashboard';
import {DeepLinkProvider} from './providers/deep-link-provider/deep-link-provider';
@Component({
templateUrl: './build/app.html'
})
export class MyApp {
rootPage: any = TabsDashboardPage;
constructor(
private platform: Platform,
private deepLinkProvider : DeepLinkProvider)
{
platform.ready().then(() => {
StatusBar.styleDefault();
this.watchDeepLink();
});
}
watchDeepLink() {
this.deepLinkProvider.deepLink$.subscribe(url => {
console.log("Opening deeplink: ", url);
console.log("Deeplink data:", this.parseUrl(url));
});
}
parseUrl(url: string): any {
url = url.replace(/^((?:.*)\?)/, '');
let result = {};
url.split("&").forEach(part => {
let item = part.split("=");
result[item[0]] = decodeURIComponent(item[1]);
});
return result;
}
}
ionicBootstrap(MyApp, [
DeepLinkProvider
]);
import {Injectable} from '@angular/core';
import {Observable, BehaviorSubject} from 'rxjs/Rx';
export const deepLinkName = 'deepLink';
@Injectable()
export class DeepLinkProvider {
public deepLink$ : Observable<any>;
constructor() {
this.initWatchDeepLink();
}
initWatchDeepLink() {
this.deepLink$ = Observable.fromEvent(window, deepLinkName)
.merge(new BehaviorSubject("init"))
.filter(() => localStorage.getItem(deepLinkName))
.map(() => {
let url = localStorage.getItem(deepLinkName);
localStorage.removeItem(deepLinkName);
return url;
});
}
}
<!DOCTYPE html>
<html lang="cs" dir="ltr">
<head>
<title>Ionic</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link ios-href="build/css/app.ios.css" rel="stylesheet">
<link md-href="build/css/app.md.css" rel="stylesheet">
<link wp-href="build/css/app.wp.css" rel="stylesheet">
</head>
<body>
<ion-app></ion-app>
<!-- cordova.js required for cordova apps -->
<script src="cordova.js"></script>
<!-- Polyfill needed for platforms without Promise and Collection support -->
<script src="build/js/es6-shim.min.js"></script>
<!-- Zone.js and Reflect-metadata -->
<script src="build/js/Reflect.js"></script>
<script src="build/js/zone.js"></script>
<!-- the bundle which is built from the app's source code -->
<script src="build/js/app.bundle.js"></script>
<!-- DeepLinks event dispatcher - IMPORTANT!!! -->
<script src="./deepLinks.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment