Mobile App Deep Links

// Generate deep link URL
function createDeepLink(screen, params = {}) {
  // Custom URL scheme
  const scheme = 'myapp://';
  const path = screen;
  const query = new URLSearchParams(params).toString();
  
  return `${scheme}${path}${query ? '?' + query : ''}`;
}

// Universal link (iOS) / App Link (Android)
function createUniversalLink(path, params = {}) {
  const baseUrl = 'https://example.com';
  const url = new URL(path, baseUrl);
  
  Object.entries(params).forEach(([key, value]) => {
    url.searchParams.set(key, value);
  });
  
  return url.toString();
}

// Smart link with fallback
function createSmartLink(screen, params = {}) {
  const deepLink = createDeepLink(screen, params);
  const webFallback = createUniversalLink(`/${screen}`, params);
  
  return {
    deepLink,
    webFallback,
    // Combined URL with fallback
    smartUrl: `${deepLink}?fallback=${encodeURIComponent(webFallback)}`
  };
}

// Open deep link with fallback
function openDeepLink(deepLink, fallbackUrl, timeout = 2000) {
  // Try to open deep link
  window.location.href = deepLink;
  
  // Set timeout to fallback
  const start = Date.now();
  const timer = setTimeout(() => {
    // If app didn't open (still in browser), go to fallback
    if (Date.now() - start < timeout + 100) {
      window.location.href = fallbackUrl;
    }
  }, timeout);
  
  // Clear timeout if page becomes hidden (app opened)
  document.addEventListener('visibilitychange', () => {
    if (document.hidden) {
      clearTimeout(timer);
    }
  });
}

// Usage
const link = createSmartLink('product/123', { 
  ref: 'email',
  campaign: 'summer_sale'
});

// Open with button click
button.addEventListener('click', () => {
  openDeepLink(
    'myapp://product/123',
    'https://example.com/product/123'
  );
});

<!-- iOS Universal Links meta tag -->
<meta name="apple-itunes-app" content="app-id=123456789, app-argument=https://example.com/product/123">

<!-- Android App Links -->
<link rel="alternate" href="android-app://com.example.app/https/example.com/product/123">

<!-- Smart banner -->
<a href="myapp://product/123" 
   onclick="setTimeout(function() { 
     window.location='https://example.com/product/123'; 
   }, 1500);">
  Open in App
</a>