Как открыть диплинк, только если есть приложение, которое его обрабатывает?

Когда мы говорим о диплинках (deep links), мы обычно имеем в виду особую URL-схему, которая открывает определенное приложение на мобильном устройстве. JavaScript позволяет проверить наличие приложения, которое может обработать диплинк, и затем открыть его, если приложение найдено.

Для начала, мы можем использовать window.navigator объект для доступа к информации о браузере и устройстве пользователя. Большинство мобильных устройств имеют функцию "открыть ссылку в приложении", которая позволяет перенаправить пользователя на соответствующее приложение, если оно установлено. Для проверки наличия приложения, мы можем использовать метод canOpenURL для взаимодействия с платформой мобильных устройств.

Вот как вы можете реализовать эту проверку на JavaScript:

function openDeepLink(deepLinkUrl) {
  const userAgent = window.navigator.userAgent || window.navigator.vendor || window.opera;
  
  // Для iOS устройств используем canOpenURL
  if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
    // Создаем элемент "фрейм", который будет использоваться для вызова canOpenURL
    const iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    iframe.src = deepLinkUrl;

    // Обработчик вызывается через 1 секунду
    const timeout = setTimeout(function() {
      window.location.href = 'https://www.example.com/'; // Если приложение не найдено, перенаправляем на определенную страницу
    }, 1000);

    // Обработчик вызывается при успешном открытии приложения
    window.addEventListener('pagehide', function() {
      clearTimeout(timeout);
    });

    // Вставляем iframe на страницу для вызова canOpenURL
    document.body.appendChild(iframe);
    document.body.removeChild(iframe);
  }
  
  // Для Android устройств проверяем, является ли ссылка доступной через Intent
  else if (/Android/.test(userAgent)) {
    const intentUrl = deepLinkUrl + "#Intent;package=com.example.package;scheme=http;end";
    
    // Создаем ссылку с параметрами Intent
    const link = document.createElement('a');
    link.setAttribute('href', intentUrl);

    // Обращаемся к ссылке событием "Клик" для проверки доступности приложения
    link.addEventListener('click', function() {
      setTimeout(function() {
        window.location.href = 'https://www.example.com/'; // Если приложение не найдено, перенаправляем на определенную страницу
      }, 1000);
    });

    // Нажатие на ссылку
    link.click();
  }
  
  // Для остальных устройств, просто открываем диплинк.
  else {
    window.location.href = deepLinkUrl;
  }
}

// Пример использования
openDeepLink('myapp://example/path');

С помощью этой функции мы сначала проверяем тип устройства и операционную систему пользователя, чтобы использовать соответствующий метод для проверки наличия приложения. Затем мы запускаем проверку, и если приложение найдено, мы открываем диплинк. Если приложение не найдено, мы перенаправляем пользователя на определенную страницу (в примере используется "https://www.example.com/").

Будьте осторожны при использовании диплинков, так как они могут быть критической функциональностью для пользователей с мобильными устройствами, и неправильная реализация может вызвать проблемы и немного снизить удобство использования.