Implement deeplink using Nodejs for iOS applications

I n the applications, sometimes you want to open a specific page in your application when the user clicks on a certain link. So this is possible by using deeplink. In this article, we will see how we can create deeplink and how we will open the app-specific location using deeplink in nodejs for the applications.

What is deeplink?

Deeplink is nothing but it's a kind of link that contained some information as other links. But the working of deeplink is different as compared to others. but both are to redirect for some locations. The normal link is just a route but deeplink is used to open the app with a specific page. Normal link opens the page in the browser but deeplink opens the mobile application if this specific application is installed in your mobile. otherwise, it redirects to the handler page. most probably handler page is app store page where the user can install the application.

In this article, we'll implement the deeplink for the iOS app and our server will be in nodejs. To implementation deeplink in nodejs and iOS, you have some understanding about the Nodejs server and its routes, Also you should have some knowledge about iOS app development. I am hoping you are here then you have a better understanding about Nodejs and iOS.

So let's get started.

Implement deeplink using Nodejs for iOS applications

Create a file with name "apple-app-site-association":

In this step, we need to create a file with the name "apple-app-site-association". It will be a plaintext file and should not have an extension `.json` to the apple-app-site-association file name. The apple-app-site-association file must be stored at a well-known path. The apple-app-site-association file a very important file that is used for the association of your website domains with your native applications. The apple-app-site-association file makes universal links. The apple-app-site-association file contains a JSON object with some given information about the app like applinks, appID and paths and apps.

Let's have a look about the keys and values:

In the apple-app-site-association file, all the keys have their specific meanings and important too.

applinks: apple-app-site-association is not only used for Implement deeplink using nodejs for iOS applications, but it's also used in Shared Web Credentials. applinks keys are a kind of parent object in the apple-app-site-association file.

apps: The apps array must be empty. I also don't know why :), I think the developer just added this and later forget to remove it if he couldn't use this. Hahahaha ... Just kidding.

appID: The value of appID will be your application's ID, but it would be a combination of your app’s Team ID + the Bundle Identifier.

paths: The value of key paths will be an array of strings for the deeplink. You can include or exclude from the association the paths from the association. Use NOT to exclude. You should use * as a wildcard to enable all the routes after the given paths.

Example of apple-app-site-association file:

apple-app-site-association:

                            
                    
                            {
                                "applinks": {
                                  "apps": [],
                                  "details": [
                                    {
                                      "appID": "XXXXXXXXXXXXX.io.ABCXXXX.XXXX.aplha",
                                      "paths": [ "/abc/deeplink/*"  ]
                                    },
                                    {
                                       "appID": "XXXXXXXXXXXXX.io.XYZXXXX.XXXX.beta",
                                       "paths": [ "/abc/deeplink/*" ]
                                    },
                                     {
                                       "appID": "XXXXXXXXXXXXX.io.DEFXXXX.XXXX.prod",
                                       "paths": [ "/abc/deeplink/*" ]
                                    }
                                  ]
                                }
                              }
                              
                        

Location and rules of apple-app-site-association file:

After creating the file, you should have this file in a specific location on your server either at https://YOUR_DOMAIN/apple-app-site-association or at https://YOUR_DOMAIN/.well-known/apple-app-site-association.

Also you need to care about the following rules:

It should be leverage with HTTPS with content type as application/json MIME type.

The file size should'nt exceeding 128 Kb (In iOS 9.3.1 onwards).

Note:
Get your app's Team ID: Go to https://developer.apple.com/account and get it from the Membership section.
Get your app's Bundle ID: Go to your Xcode project, select project and then the ‘General’ section.

Create an API routes to serve apple-app-site-association file:

Now this time to create a route to support the deeplink. You can create in your specific language like Nodejs, HapiJS, KoaJS, ExpressJS as per your requirements.
Here I am creatig in HapiJs, because my server was using HapiJs.

                    
                              'use strict';
                              exports.register = (server, options, next) => {
                              
                              server.route([{
                                method: 'GET',
                                path: '/apple-app-site-association',
                                handler: function (request, reply) {
                                  reply.file(__dirname + '/apple-app-site-association');
                                },
                                config: {
                                  description: 'apple-app-site-association API',
                                  notes: 'This api will return static apple-app-site-association file to support deeplink',
                                  auth:false
                                }
                              }]);
                    
                              next();
                              };
                    
                    

Now create a route to support deeplink:

In this step, we'll create a route to support the deeplink. It will be the actual API that will be called to open the application's specific page. This API will be responsible to associate the link and application. You can pass the specific data in the deeplink and using this data app will open the specific page within the application. If your application will not be installed then this link will redirect to the app store page where you can install the application.

Let's create the route:

In the below code, you can see I have created a route will endpoint "/deeplink".

                        {
                            method: 'GET',
                            path: '/deeplink',
                            handler: function (request, reply) {
                                reply.file(__dirname + '/client.html');
                            },
                            config: {
                              description: 'Return static file.',
                              notes: 'This api will return static file for app store redirection',
                              auth: false
                            }
                          }
                         
                        

In the above API, the endpoint /deeplink will send an HTML file, that will be open in the application browser, after clicking on deeplink in the application.

Inside file client.html:

client.html:

                            <!DOCTYPE html>
                            <html lang="en">
                            <head>
                                <meta charset="utf-8" />
                                <script>
                                    window.onload = function () {
                                        window.location.href = 'YOUR_LOCAL_UNIQUE_APP_URL://pageID=5'; // Your app's URL to open the app and then pageID to open specific page.
                                        setTimeout(function () {
                                            window.location.href = 'https://itunes.apple.com/us/app/ABCGF/APPIDNXXXXXX'; //'YOUR_APP_STORE_LINK';
                                        }, 5000);
                                    }
                                </script>
                            </head>
                            <body>
                                   
                                   <img src="../assets/yourAppIcon.png" alt="" />
                               <br/>
                                   <a href='https://itunes.apple.com/us/app/ABCGF/APPIDNXXXXXX'></a>
                            </body>
                            </html>
                             
                            

So, when you have created a deeplink like https://www.YOUR_DOMIN.com/deeplink/ and snd this to your mobile through SMS or any media, where you have installed your iOS applications.
Now you clicked on this deeplink https://www.YOUR_DOMIN.com/deeplink/. Then this deeplink will be called as an API call to your server.

Now on your server "/deeplink" route will be called. After calling "/deeplink" API, this API will send a response with a file name "client.html".

This will be opened in the default browser of your mobile. When the browser will compile the HTML code, its script (javascript) code will be executed. And here magic will happen, Because of your unique `YOUR_LOCAL_UNIQUE_APP_URL`, your iOS will open the application after asking permission.

Once you give the permission, it will open the application. Now it's not done. Now how will open the specific page?
So, your app will open the specific page because of you have given the pageID in the script. This logic you need to handle in application's code.

So, your logic to open the specific page will open the specific page based on the pageID.

If your mobile doesn't have the app installed, then it will redirect to the app store page after 5 seconds. but if you have the app then the setTimeout code will not be executed.

That is how deeplink will work.

---

Conclusion:

In this article, we learned how to implement deeplink using nodejs for iOS applications? and how to create the routes to support the deeplinks. This a little bit tricky, but I have put my all efforts to make you understand. Hope you liked it and learned somethings.