Implementing Deep Linking and Universal Links

import { defineCustomElements } from '@ionic/core/loader';

defineCustomElements();

const deeplinks = [
  {
    url: 'myapp://profile/:id',
    component: 'app-profile-page'
  },
  {
    url: 'myapp://settings',
    component: 'app-settings-page'
  }
];

export { deeplinks };

<key>com.apple.developer.associated-domains</key>
<array>
  <string>applinks:yourdomain.com</string>
</array>

import { Deeplinks } from '@ionic-native/deeplinks/ngx';

constructor(private deeplinks: Deeplinks) {}

ionViewDidLoad() {
  this.deeplinks.routeWithDeepLinks({
    '/user/:id': 'UserPage',
    '/product/:id': 'ProductPage'
  }).subscribe((match) => {
    console.log('Matched:', match);
  }, (nomatch) => {
    console.log('No match:', nomatch);
  });
}

import { RouteConfig } from '@ionic/angular';

const routes: RouteConfig[] = [
  {
    path: 'deep-link/:id',
    component: ContentPage
  },
  {
    path: 'deep-link/:category/:id',
    component: CategoryContentPage
  }
];

import { parseUrl } from '@ionic/utils';

const url = 'ionic://myapp/somepage?param1=value1&param2=value2';
const parsed = parseUrl(url);

console.log(parsed.path); // /somepage
console.log(parsed.queryParams); // { param1: 'value1', param2: 'value2' }

import { registerPlugin } from '@capacitor/core';
import { App } from '@capacitor/app';

const handleOpenUrl = (url: string) => {
  console.log('URL opened:', url);
};

App.addListener('appUrlOpen', handleOpenUrl);

// Register custom scheme
registerPlugin({
  name: 'CustomUrlScheme',
  platforms: ['ios', 'android'],
  // Implementation details...
});

// Test deep link navigation in Ionic app
import { TestBed } from '@angular/core/testing';
import { Router } from '@angular/router';
import { DeepLinker } from '@ionic/angular';

describe('Deep Link Testing', () => {
  let router: Router;
  let linker: DeepLinker;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [IonicModule.forRoot()],
      providers: [DeepLinker]
    });
    router = TestBed.inject(Router);
    linker = TestBed.inject(DeepLinker);
  });

  it('should navigate to correct route', () => {
    const url = '/user/123/profile';
    const route = linker.getRouteFromPath(url);
    expect(route).toBe('/user/:id/profile');
  });
});

import { IonicConfig } from '@ionic/angular';

const config: IonicConfig = {
  deferredDeepLink: true,
  deepLinkPath: '/app/deep-link'
};

export default config;

// Install Branch SDK
npm install branch-sdk

// Import in app.module.ts
import { Branch } from 'branch-sdk';

// Initialize in app.component.ts
Branch.init('key_live_xxx');

// Handle deep link
Branch.subscribe((data) => {
  console.log('Deep link data:', data);
});

import { Plugins } from '@capacitor/core';

const { App } = Plugins;

App.addListener('appUrlOpen', (event) => {
  console.log('Deep link opened:', event.url);
  // Log the full URL and any query parameters
});

App.addListener('appRestoredResult', (event) => {
  console.log('App restored from background:', event);
});