I need to create a deep link that allows user to click it from external (like e-mail or browser directly) and then it should be redirect to my-app.blablabla.com://path-to-route. I've already created a working deep link but it always redirect the user in my app homepage (like my-app.blablabla.com://). There is a way to pass the route-path with a deep link? Thanks in advance.
PS: I've also tried to catch up the referrer in app.component.ts but it's always = "".
PPS: the path-to-route is not considered at all. The application open in homepage if it is present or not.
I'm using angular2 and cordova.
This is cordova config:
<?xml version='1.0' encoding='utf-8'?>
<widget android-versionCode="20405" android-versionName="2.04.05" id="my-app.blablabla.com" ios-CFBundleShortVersion="20405" ios-CFBundleVersion="2.04.05" version="20405" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>Myapp</name>
<description>
My app
</description>
<author email="[email protected]" href="http://www.myapp.it">
Luca Taccagni
</author>
<content src="index.html" />
<preference name="DisallowOverscroll" value="true" />
<preference name="BackupWebStorage" value="local" />
<preference name="permissions" value="none" />
<preference name="orientation" value="portrait" />
<preference name="target-device" value="universal" />
<preference name="fullscreen" value="true" />
<preference name="android-windowSoftInputMode" value="stateVisible|adjustResize" />
<preference name="webviewbounce" value="true" />
<preference name="prerendered-icon" value="true" />
<preference name="stay-in-webview" value="false" />
<preference name="detect-data-types" value="true" />
<preference name="exit-on-suspend" value="false" />
<preference name="show-splash-screen-spinner" value="true" />
<preference name="disable-cursor" value="false" />
<preference name="android-minSdkVersion" value="14" />
<preference name="android-installLocation" value="auto" />
<preference name="SplashScreen" value="resources/browser/screen/[email protected]" />
<preference name="AutoHideSplashScreen" value="true" />
<preference name="SplashScreenDelay" value="3000" />
<platform name="browser">
<preference name="SplashScreen" value="res/browser/screen/[email protected]" />
<preference name="SplashScreenDelay" value="5000" />
<preference name="SplashScreenBackgroundColor" value="green" />
<preference name="ShowSplashScreen" value="true" />
<preference name="SplashScreenWidth" value="600" />
<preference name="SplashScreenHeight" value="300" />
</platform>
<platform name="ios">
</platform>
<platform name="android">
<icon density="mdpi" src="www/res/icon/android/icon-48-mdpi.png" />
<icon density="hdpi" src="www/res/icon/android/icon-72-hdpi.png" />
<icon density="xhdpi" src="www/res/icon/android/icon-96-xhdpi.png" />
<splash density="port-hdpi" src="www/res/screen/android/screen-hdpi-portrait.png" />
<splash density="port-mdpi" src="www/res/screen/android/screen-mdpi-portrait.png" />
<splash density="port-xhdpi" src="www/res/screen/android/screen-xhdpi-portrait.png" />
</platform>
<feature name="SplashScreen">
<param name="ios-package" value="CDVSplashScreen" />
<param name="onload" value="true" />
</feature>
<universal-links>
<host name="abc123.app.goo.gl" scheme="https" />
<host name="myapp.firebaseapp.com" scheme="https">
<path url="/__/auth/callback" />
</host>
</universal-links>
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="data:*" />
<allow-intent href="geo:*" />
<allow-navigation href="about:blank" />
<allow-navigation href="https://myapps.bla.it/*" />
<allow-navigation href="http://myapps.bla.it/*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<hook src="hooks/buildApp.js" type="before_prepare" />
<preference name="DisallowOverscroll" value="true" />
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<engine name="android" spec="^6.2.3" />
<plugin name="cordova-plugin-browsertab" spec="^0.2.0" />
<plugin name="cordova-plugin-buildinfo" spec="^2.0.1" />
<plugin name="cordova-plugin-customurlscheme" spec="^4.3.0">
<variable name="URL_SCHEME" value="my-app.blablabla.com" />
<variable name="ANDROID_SCHEME" value="https" />
<variable name="ANDROID_HOST" value="my-app.blablabla.com" />
<variable name="ANDROID_PATHPREFIX" value="/" />
<!-- already tried to put something here -->
</plugin>
<plugin name="cordova-plugin-inappbrowser" spec="^1.7.1" />
<plugin name="cordova-plugin-ios-safari" spec="git+https://github.com/morungos/cordova-plugin-ios-safari.git" />
<plugin name="cordova-plugin-whitelist" spec="^1.3.3" />
<plugin name="cordova-universal-links-plugin" spec="^1.2.1" />
</widget>For anyone who will find this question interesting:
I've completely changed my point of view. With cordova plugin for universal links (https://github.com/nordnet/cordova-universal-links-plugin) I've created a listener for the event fired from external universal link that open the app. With this I could read the link calling my app (like a referrer) and inside it I select my route where I navigate with angular router.
I'll post my cordova config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget android-versionCode="20405" android-versionName="2.04.05" id="my.app.com" ios-CFBundleShortVersion="20405" ios-CFBundleVersion="2.04.05" version="20405" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>My app</name>
<description>
my app
</description>
<author email="[email protected]" href="http://www.myapp.it">
Luca Taccagni
</author>
<content src="index.html" />
<preference name="DisallowOverscroll" value="true" />
<preference name="BackupWebStorage" value="local" />
<preference name="permissions" value="none" />
<preference name="orientation" value="portrait" />
<preference name="target-device" value="universal" />
<preference name="fullscreen" value="true" />
<preference name="android-windowSoftInputMode" value="stateVisible|adjustResize" />
<preference name="webviewbounce" value="true" />
<preference name="prerendered-icon" value="true" />
<preference name="stay-in-webview" value="false" />
<preference name="detect-data-types" value="true" />
<preference name="exit-on-suspend" value="false" />
<preference name="show-splash-screen-spinner" value="true" />
<preference name="disable-cursor" value="false" />
<preference name="android-minSdkVersion" value="14" />
<preference name="android-installLocation" value="auto" />
<preference name="SplashScreen" value="resources/browser/screen/[email protected]" />
<preference name="AutoHideSplashScreen" value="true" />
<preference name="SplashScreenDelay" value="3000" />
<platform name="browser">
<preference name="SplashScreen" value="res/browser/screen/[email protected]" />
<preference name="SplashScreenDelay" value="5000" />
<preference name="SplashScreenBackgroundColor" value="green" />
<preference name="ShowSplashScreen" value="true" />
<preference name="SplashScreenWidth" value="600" />
<preference name="SplashScreenHeight" value="300" />
</platform>
<platform name="ios">
</platform>
<platform name="android">
<icon density="mdpi" src="www/res/icon/android/icon-48-mdpi.png" />
<icon density="hdpi" src="www/res/icon/android/icon-72-hdpi.png" />
<icon density="xhdpi" src="www/res/icon/android/icon-96-xhdpi.png" />
<splash density="port-hdpi" src="www/res/screen/android/screen-hdpi-portrait.png" />
<splash density="port-mdpi" src="www/res/screen/android/screen-mdpi-portrait.png" />
<splash density="port-xhdpi" src="www/res/screen/android/screen-xhdpi-portrait.png" />
</platform>
<feature name="SplashScreen">
<param name="ios-package" value="CDVSplashScreen" />
<param name="onload" value="true" />
</feature>
<universal-links>
<ios-team-id value="DST94QR2E9" />
<host name="for.firebase.app.goo.gl" scheme="https" />
<host name="myapp.firebaseapp.com" scheme="https">
<path url="/__/auth/callback" />
</host>
<host event="universalEvent" name="myapp.site.com" scheme="https" />
</universal-links>
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="data:*" />
<allow-intent href="geo:*" />
<allow-navigation href="about:blank" />
<allow-navigation href="https://myapp.site.com/*" />
<allow-navigation href="http://myapp.site.com/*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<hook src="hooks/buildApp.js" type="before_prepare" />
<preference name="DisallowOverscroll" value="true" />
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<engine name="android" spec="^6.2.3" />
<engine name="ios" spec="^4.4.0" />
<plugin name="cordova-plugin-browsertab" spec="^0.2.0" />
<plugin name="cordova-plugin-buildinfo" spec="^2.0.1" />
<plugin name="cordova-plugin-customurlscheme" spec="^4.3.0">
<variable name="URL_SCHEME" value="my.app.com" />
<variable name="ANDROID_SCHEME" value="https" />
<variable name="ANDROID_HOST" value="my.app.com" />
<variable name="ANDROID_PATHPREFIX" value="/" />
</plugin>
<plugin name="cordova-plugin-google-analytics" spec="^1.8.3" />
<plugin name="cordova-plugin-inappbrowser" spec="^1.7.1" />
<plugin name="cordova-plugin-ios-safari" spec="git+https://github.com/morungos/cordova-plugin-ios-safari.git" />
<plugin name="cordova-plugin-whitelist" spec="^1.3.3" />
<plugin name="cordova-universal-links-plugin" spec="^1.2.1" />
</widget>And my app.component.ts
import { Component, OnInit, ViewChild, ChangeDetectorRef, AfterViewInit, Inject } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { Platform } from '@angular/cdk/platform';
declare var cordova;
declare var universalLinks;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, AfterViewInit {
subscriptionUniversalLinkMail: any;
urlRoute: string;
constructor(
private router: Router,
private platform: Platform,
@Inject(DOCUMENT) private document: any
) {
this.router.events.subscribe(e => {
const route: any = e[1];
this.router.navigated = true;
});
this.subscriptionUniversalLinkMail = universalLinks.subscribe('universalEvent', callBack.bind(this));
function callBack(eventData) {
this.urlRoute = eventData.url.split('myapp.site.com/')[1];
};
}
async ngOnInit() {
document.addEventListener('backbutton', backButtonHandler, false);
function backButtonHandler() {
console.log('native back button canceled');
};
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
window.open = cordova.InAppBrowser.open;
}
document.addEventListener('pause', pauseCallback.bind(this), false);
function pauseCallback() {
if (this.subscriptionUniversalLinkMail) {
this.subscriptionUniversalLinkMail.unsubscribe();
}
};
document.addEventListener('resume', resumeCallback.bind(this), false);
function resumeCallback() {
this.subscriptionUniversalLinkMail = universalLinks.subscribe('universalEvent', callBack.bind(this));
function callBack(eventData) {
this.urlRoute = eventData.url.split('myapp.site.com/')[1];
this.sendUserToRoute(this.urlRoute);
};
}
// detect platform
this.opSystem = this.platform.ANDROID ? 'android' : (this.platform.IOS ? 'ios' : null);
this.router.events.subscribe((evt) => {
if (!(evt instanceof NavigationEnd)) {
return;
}
if (typeof window !== 'undefined') {
window.scrollTo(0, 0);
}
});
}
async ngAfterViewInit() {
const hostName = this.opSystem ? this.opSystem : (this.document.location ? this.document.location.hostname : '');
setTimeout(() => {
this.sendUserToRoute(this.urlRoute);
if (this.subscriptionUniversalLinkMail) {
this.subscriptionUniversalLinkMail.unsubscribe();
}
}
}, 5000);
}
sendUserToRoute(url: string) {
if (url) {
this.router.navigateByUrl(url);
}
}
}