Enabling Universal Links for iOS [Laravel]

Universal link basically is to verify that your domain belongs to you so that, if the corresponding link is detected, it can be directly to specific view as required. So, what we are waiting for? Let dive deep ?

Web Setup

• First of all, you need apple-app-site-association file. It is basically a .json file but Apple doesn’t want you to add .json extension after the file name. So remember, create a file name without any extension.
• Now paste following information in your file.

{
    "applinks": {
        "apps": [],
        "details": [
            {
                "appID": "teamID.bundleIdentifier",
                "paths": [
                    "*"
                ]
            }
        ]
    }
}

Here appID is a combination of team id and bundle identifier. paths is an array of strings where you can mention paths. *means, whatever link is provided, now the app will be opened. If you want to open only for login url for example, than you can replace * with /login. Further more, if you want any other link associated with login to work universal link, type /login/*. This way now any link which is started with login will work as universal link.

• Let’s create a route for this. I am covering for those who are using Laravel framework.
• Second part of route basically redirects to specific store. If you are browsing by iPhone, it will redirect you to app store with specific application download page. And if you using Android, it will redirect you to Play store again on a download page where you can download the app. Replace app store and play store link with yours. And remember the pattern of links provided

Route::get('/apple-app-site-association', function () {
    $json = file_get_contents(base_path('.well-known/apple-app-site-association'));
    return response($json, 200)
        ->header('Content-Type', 'application/json');
});

/* If the app is not install following route will help to redirect to respective store.*/
Route::get('/login/username/{username}', function () {
    preg_match("/iPhone|Android|iPad|iPod|webOS/", $_SERVER['HTTP_USER_AGENT'], $matches);
    $os = current($matches);

    switch ($os) {
        case 'iPhone':
            return redirect('itms-apps://itunes.apple.com/us/app/my-patro/id1049173930');
            break;
        case 'Android':
            return redirect('https://play.app.goo.gl/?link=https://play.google.com/store/apps/details?id=com.cninfotech.nepalichords&hl=en');
            break;
        case 'iPad':
            return redirect('itms-apps://itunes.apple.com/us/app/my-patro/id1049173930');
            break;
        case 'iPod':
            return redirect('itms-apps://itunes.apple.com/us/app/my-patro/id1049173930');
            break;
        case 'webOS':
            return redirect('https://apps.apple.com/us/app/my-patro/id1049173930');
            break;
    }
});

• If you want to do it without create a route? Well there is a way. Copy and paste one line of code in your root/.htaccess file. This will basically ignore /.well-known folder and you don’t have to write a route to access that file. This will be helpful if you are trying to setup assetlink.json file for Android application. Let me know if you need help on this.

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_URI} !^/.well-known
RewriteRule ^(.*)$ public/$1 [L]
</IfModule>

• Finally web setup part is completed. So, how verify? Well, goto this link https://branch.io/resources/aasa-validator/ and you can validate easily.

Validation issue tips

• Content Type issue:
  • Add following line of code in your .well-known/.htaccess file. Create it, if you don’t find .htaccess file in .well-known folder. Simply, run this command nano .well-known/.htaccess and now paste the following command.

<Files "apple-app-site-association">
ForceType 'application/json'
</Files>

• Json format issue:
  • Copy json value which you have included in apple-app-site-association file.
  • Now check that json format in https://jsonlint.com.

xCode Setup

It’s see how we can setup to implement universal link in xCode.

• Open xCode.
• Click on Signing & Capabilities
• Click ➕ Capabilities button.
• Search for Associated Domains
• Click ➕ icon and type domain name applinks:yourDomainName.com. Remember, don’t put https:// or www. Just replace yourDoomainName.com with your live domain name. And that’s all needed for a capabilities setup.
• Now regarding coding stuff add these code in your AppDelegate.swift file.

func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
        
        guard let url = userActivity.webpageURL else { return false }
        let pathComponents = url.pathComponents

        if pathComponents.contains("login") {
            Goto.loginViewController()
        }
        
        return true
    }

Update JSON:

If you want to update your apple-app-site-association file, update it and save it. If you run your app at this moment, you wont be able to see the changes made in apple-app-site-association file. To do so, you must delete your existing app first and install your app again. Now test, you will be see the changes. ?

That’s all guys. You have successfully setup universal link. I have tried to explain it as simple as possible. If you are confused regarding any of my point, let me know. I will be happy to help you. Comment down with your queries, I will try to help you.

I hope, it was helpful to you. If so, do me a favor by sharing it.

Thanks.