Capacitor Deep Linking

import { App } from '@capacitor/app';
// Listen for deep link opensApp.addListener('appUrlOpen', (event) => {  console.log('App opened with URL:', event.url);
  // Parse and navigate  const url = new URL(event.url);  handleDeepLink(url);});
function handleDeepLink(url: URL) {  // Custom scheme: myapp://product/123  // Universal link: https://myapp.com/product/123
  const path = url.pathname || url.host + url.pathname;
  // Route based on path  if (path.startsWith('/product/')) {    const productId = path.split('/')[2];    navigateTo(`/product/${productId}`);  } else if (path.startsWith('/user/')) {    const userId = path.split('/')[2];    navigateTo(`/profile/${userId}`);  } else if (path === '/login') {    navigateTo('/login');  } else {    navigateTo('/');  }}

import { App } from '@capacitor/app';import { useHistory } from 'react-router-dom';import { useEffect } from 'react';
function DeepLinkHandler() {  const history = useHistory();
  useEffect(() => {    App.addListener('appUrlOpen', (event) => {      const url = new URL(event.url);      const path = getPathFromUrl(url);
      // Navigate using React Router      history.push(path);    });
    // Check if app was opened with URL    App.getLaunchUrl().then((result) => {      if (result?.url) {        const url = new URL(result.url);        const path = getPathFromUrl(url);        history.push(path);      }    });  }, []);
  return null;}
function getPathFromUrl(url: URL): string {  // Handle both custom scheme and https  if (url.protocol === 'myapp:') {    return '/' + url.host + url.pathname;  }  return url.pathname + url.search;}

import { App } from '@capacitor/app';import { useRouter } from 'vue-router';import { onMounted } from 'vue';
export function useDeepLinks() {  const router = useRouter();
  onMounted(async () => {    App.addListener('appUrlOpen', (event) => {      const path = parseDeepLink(event.url);      router.push(path);    });
    const launchUrl = await App.getLaunchUrl();    if (launchUrl?.url) {      const path = parseDeepLink(launchUrl.url);      router.push(path);    }  });}

import { App } from '@capacitor/app';import { Preferences } from '@capacitor/preferences';
// On first launch, check for deferred linkasync function checkDeferredDeepLink() {  const { value: isFirstLaunch } = await Preferences.get({ key: 'firstLaunch' });
  if (isFirstLaunch !== 'false') {    await Preferences.set({ key: 'firstLaunch', value: 'false' });
    // Check with your attribution service    const deferredLink = await fetchDeferredLink();    if (deferredLink) {      handleDeepLink(new URL(deferredLink));    }  }}

App.addListener('appUrlOpen', (event) => {  const url = new URL(event.url);
  // Get query parameters  const source = url.searchParams.get('source');  const campaign = url.searchParams.get('campaign');  const referrer = url.searchParams.get('ref');
  // Track attribution  analytics.logEvent('deep_link_open', {    path: url.pathname,    source,    campaign,    referrer,  });
  // Navigate with state  navigateTo(url.pathname, {    state: { source, campaign, referrer },  });});

// Handle OAuth redirectApp.addListener('appUrlOpen', async (event) => {  const url = new URL(event.url);
  if (url.pathname === '/oauth/callback') {    const code = url.searchParams.get('code');    const state = url.searchParams.get('state');    const error = url.searchParams.get('error');
    if (error) {      handleOAuthError(error);      return;    }
    if (code && validateState(state)) {      await exchangeCodeForToken(code);      navigateTo('/home');    }  }});