Переход по DeepLink из Web

Deeplink с fallback на App Store

Мобильные приложения используют кастомные URL-схемы (myapp://screen?tab=home), которые работают как deeplink'и. Проблема: в браузере нельзя проверить, установлено ли приложение.

Решение

Пытаемся открыть приложение и отслеживаем изменение видимости страницы:

const deepLink = `myapp://myscreen?tab=home`;
const appStoreLink = `https://onelink.to/myapp`;

const openAppStore = () => {
  window.location.href = appStoreLink;
};

const checkAppOpened = () => {
  const timeoutId = setTimeout(() => {
    // Если через 2.5с страница всё ещё видна - приложение не установлено
    if (document.visibilityState !== 'hidden') {
      openAppStore();
    }
  }, 2500);

  // Отслеживаем скрытие страницы (приложение открылось)
  document.addEventListener('visibilitychange', () => {
    if (document.hidden) {
      clearTimeout(timeoutId);
    }
  });
};

// Запускаем процесс
window.location.href = deepLink;
checkAppOpened();

Как это работает

• Пытаемся открыть приложение через deeplink
• Если приложение установлено - страница скрывается, таймер сбрасывается
• Если через 2.5 секунды страница видна - редиректим в App Store/Google Play