In the fast-evolving world of mobile app development, deep linking has emerged as an essential feature for enhancing user experience and app functionality. Whether you’re building an e-commerce platform that should direct users to specific products or an educational app that needs to navigate to particular lessons, deep links allow seamless transitions within your app. In this article, we’ll explore how to set up deep links—also known as universal links on iOS and app links on Android—with Ionic and Capacitor.

What Are Deep Links?

Deep links are URLs that direct users to a specific content or page within a mobile application. They can be particularly useful for providing quick access to particular sections of an app without needing to navigate through several screens. For example, clicking on a link to a product page on Amazon can directly open the corresponding app page, if installed.

Why Use Capacitor with Ionic?

Capacitor is a cross-platform native runtime that allows web developers to build native mobile applications using JavaScript, HTML, and CSS. It enhances Ionic’s capabilities by giving access to native APIs (like camera, GPS, etc.) with ease. Using Capacitor, developers can create deep links in their Ionic applications without the need for additional plugins alongside easy integration with custom domains.

Setting Up Your Ionic Application for Deep Linking

1. Create Your Ionic App

To start, generate a new Ionic application if you haven’t done so:

ionic start myApp blank --type=angular
cd myApp
ionic build

After your app is set up, add Capacitor to your app:

ionic cap add ios
ionic cap add android

2. Configure Capacitor

Open your capacitor.config.ts or capacitor.config.json file in the root directory of your app. The app ID is crucial as it will be required later for both iOS and Android deep link configurations. Set your app ID, for instance:

{
  "appId": "com.example.app",
  "appName": "MyApp",
  "webDir": "www"
}

3. Set Up Routing

Modify the app routing in your app-routing.module.ts. For deep linking to work, you must define your routes correctly. Here’s an example of defining a path with a wildcard ID:

const routes: Routes = [
  { path: 'details/:id', component: DetailsPage }
];

In your details page component, use Angular’s ActivatedRoute to access the parameters from the URL:

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.paramMap.subscribe(params => {
    this.productID = params.get('id');  
  });
}

4. Implement Deep Link Handling with Capacitor

In your main app component, import the Capacitor plugin and listen for the app URL open event:

import { Plugins } from '@capacitor/core';
const { App } = Plugins;

ngOnInit() {
  App.addListener('appUrlOpen', (data: any) => {
    // Extract URL data
    const url = data.url;
    const id = url.split('/').pop();
    // Navigate to the appropriate route
    this.router.navigate(['details', id]);
  });
}

This method allows your app to respond appropriately when the user clicks on a deep link.

Setting Up Deep Links in iOS

5. Configure Associated Domains

Log in to your Apple developer account, and under Certificates, Identifiers & Profiles, enable Associated Domains for your app ID. You’ll need to create and upload an apple-app-site-association file to your server at “.well-known/”. The file should look similar to this:

{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appID": " teamID.com.example.app",
        "paths": ["/details/*"]
      }
    ]
  }
}

6. Test Your Domain Configuration

Use tools like Branch.io to validate that your apple-app-site-association file is accessible and correctly configured.

Setting Up Deep Links in Android

7. Create and Host Asset Links

For Android, facilitate deep links with an assetlinks.json file, which provides authentication to your domain. Host this file under “.well-known/” similar to the iOS configuration:

[
  {
    "relation": ["delegate_permission/common.handle_all_urls"],
    "target": {
      "namespace": "android_app",
      "package_name": "com.example.app",
      "sha256_cert_fingerprints": ["YOUR=SHA=FINGERPRINT"]
    }
  }
]

8. Add Intent Filters to Android Manifest

To allow handling of the deep link clicks, you need to modify the AndroidManifest.xml file:

<intent-filter>
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data android:scheme="https" android:host="yourdomain.com" android:pathPrefix="/details" />
</intent-filter>

9. Build and Test Your App

Once both iOS and Android configurations are in place, build your app and test it:

ionic cap sync
ionic cap open ios
ionic cap open android

Conclusion

Deep linking with Capacitor simplifies the integration process for Ionic applications, enabling direct navigation that enhances user experience. The steps outlined above streamline the complexities traditionally associated with configuring deep links, ensuring a smoother development process. Whether you’re a seasoned Ionic developer or just starting, implementing deep links can significantly add value to your application.

For further assistance and deep link configurations, consider browsing through comprehensive resources, tutorials, and the Ionic Academy.

Feel free to reach out in the comments for suggestions on future topics or clarifications on the content covered. Happy coding!