How to do deep linking to the app from the Website?

Deeplink is the URI(Uniform Resource Identifier) which navigates to that content rather than its homepage.

When it comes to the mobile app, it is a similar concept and we open the app to that specific location. For a mobile application, there are two scenarios:

App Installed:- If an app installed, then we can navigate to that content. Here also comes two scenarios but that will handle by the mobile developers like, if the redirection to authorization URL then we(mobile developer) need to check whether it has authorized to this page, in simple terms the user is login or subscribeto that page or anyone, if the user has access then navigate to that mobile layout or page otherwise redirect to log in or purchase subscription depending on the requirements.

App not installed:- What if the user has not installed the app, then we need to navigate the user to the app store, for android users navigate to “playstore” and for ios users navigate to “iTunes” to download the app.

Now come to the coding part, how it can be done. I am doing using javascript event called “navigator” and it can be implemented in any web page. So I implemented that using Angular 6.

Let’s assume my URL is http://myrl.com/mycomponent and inside that there are a lot of trips/events or anything is there, now if I open in the mobile browser, then I want to open the open with that link

Component TS File:- trips.component.ts

import { Component, OnInit } from '@angular/core';
import { DeeplinkService } from 'folderpath/deeplink.service'
// declare function deeplink(): any;
@Component({
  selector: 'app-trips',
  templateUrl: './trips.component.html',
  styleUrls: ['./trips.component.scss']
})
export class TripsComponent implements OnInit {
  constructor(private deeplinkService : DeeplinkService) {
  }
  ngOnInit() {
  }
  handleTripDetail(params){
    this.deeplinkService.deeplink(params);
  }
}

Now I make all the trip details layouts/pages for mobile app also, so for this I’ll check firstly it opened in android or ios browser is so then navigate to that page in inside the mobile app, otherwise redirect to the website URL

Service File:- deeplink.service.ts

import { Injectable } from "@angular/core";
@Injectable()
export class DeeplinkService {
 constructor() {}
 deeplink() {
   let ua = navigator.userAgent.toLowerCase();
   let isAndroid = ua.indexOf("android") > -1; // android check
   let isIphone = ua.indexOf("iphone") > -1; // ios check
   if (isIphone == true) {
    let app = { 
      launchApp: function() {
       setTimeout(function() {
         window.location.href = "https://itunes.apple.com/us/app/appname/appid";
       }, 25);
       window.location.href = "bundlename://linkname"; //which page to open(now from mobile, check its authorization)
      },
      openWebApp: function() {
       window.location.href = "https://itunes.apple.com/us/app/appname/appid";
      }
  };
  app.launchApp();
 } else if (isAndroid== true) {
    let app = { 
      launchApp: function() {
        window.location.replace("bundlename://linkname"); //which page to open(now from mobile, check its authorization)
        setTimeout(this.openWebApp, 500);
      },
      openWebApp: function() {
        window.location.href =  "https://play.google.com/store/apps/details?id=packagename";
      }
  };
  app.launchApp();
 }else{
  //navigate to website url
 }
}

In a similar way, it can be done in REACT, VUE, EJS, PHP, etc.