URL Scheme: Проверка наличия установленного приложения в Javascript

Недавно столкнулся с необходимостью определить, зарегистрирована ли URL Scheme в браузере, чтобы в зависимости от результата показывать либо кнопку загрузки приложения, либо прямой URL на его запуск.

Оказалось, что каких-либо стандартных механизмов для этого не существует. Но поскольку пользователи никак не хотели обращать внимания на кнопку Download и красную надпись о необходимости предварительной установки приложения, пришлось искать варианты. Об этом и пойдет речь ниже.

Сразу хочу предупредить, что не оказалось ни одного способа, сработавшего хотя бы в двух браузерах стабильно одинаково. Поэтому любителей красивых кроссбраузерных решений ждет разочарование — статья полна хаков (просьба не минусовать за это, самому тошно, но задача есть задача).

Для начала создадим наши ссылки.

<a class="runlink" href="myapp://command_line_parameters">Run</a> <a class="downloadlink" style="display:none;" href="http://mysite.com/download/app.exe">Download</a> 

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

function initApplicationLink(runlink, downloadlink) { 	// Проверяем браузер 	var func = null; 	if (navigator.userAgent.indexOf('Firefox')>=0 ) func = checkFirefox; 	else if (navigator.userAgent.indexOf('Opera')>=0 ) func = checkOpera; 	else if (navigator.userAgent.indexOf('Chrome')>=0 ) func = checkChrome; 	else if (navigator.userAgent.indexOf('Safari')>=0 ) func = checkSafari; 	if ( func!=null ) { 		// Скрываем ссылку Download 		$(downloadlink).hide(); 		// Вешаем выбранную функцию на клик по ссылке запуска приложения  		$(runlink).on('click', function(){ 			func(runlink, downloadlink); 			// Отменяем нажатие ссылки, чтобы она не открылась в окне браузера 			return false; 		}); 	} 	else { 		// Для всех других браузеров просто показываем ссылку Download 		$(downloadlink).show(); 	} }  function downloadConfirmation(downloadlink) { 	if ( confirm('You need to install our application first. Do you really want to download it now?') ) 		document.location = $(downloadlink).attr('href'); } 

Начнем с Firefox и Opera, поскольку они в этом вопросе предоставляют 100% надежный и красивый механизм исключений. Но, к сожалению, реализация все равно отличается.

У Firefox самое простое решение.

function checkFirefox(runlink, downloadlink) { 	// Создаем скрытый фрейм, в котором пытаемся открыть наш URL 	var f = createFrame(); 	try { 		f.contentWindow.location = $(runlink).attr('href'); 	} 	catch (e) { 		// Если URL открыть не удалось, выводим запрос на загрузку приложения 		downloadConfirmation(downloadlink); 	} 	// Удаляем наш временный фрейм 	deleteFrame(f); } 

Opera не намного отличается от Firefox, за исключением того, что она отлавливает исключение не в момент попытки загрузки во фрейм URL с незарегистрированным протоколом, а в момент попытки обращения к не определенному атрибуту фрейма (contentWindow.location).

function checkOpera(runlink, downloadlink) { 	var f = createFrame(); 	f.contentWindow.location = $(runlink).attr('href'); 	setTimeout(function (){ 		try { 			// Пытаемся поработать с не определенным атрибутом фрейма 			// (вместо something можно использовать что-угодно) 			if ( f.contentWindow.location!='something' ) {} 		} 		catch (e) { 			downloadConfirmation(downloadlink); 		} 		deleteFrame(f); 	}, 0); } 

Функции createFrame() и deleteFrame() для Firefox и Opera:

function createFrame() { 	var f = document.createElement('iframe'); 	f.style.display = 'none'; 	return document.body.appendChild(f); }  function deleteFrame(f) { 	document.body.removeChild(f); } 

Safari под Windows тоже умеет ловить исключения, но со скрытым фреймом этот номер не прошел. Как вариант, можно использовать обычное окно. Решение не элегантное, но рабочее.

Safari под MacOS с исключениями, видимо, не дружит. Поэтому тут придется применить чисто костыльный метод. Фишка заключается в том, чтобы после запуска приложения проверить фокус нашего окна браузера. Если приложение успешно запустилось, то окно потеряло фокус, и в обработчике этого события мы зафиксировали этот факт. Если же приложение не открылось, то окно по-прежнему имеет фокус.

К сожалению, этот способ не на 100% стабилен. Например, если за время таймаута браузер не успел открыть приложение, или наоборот — пользователь успел закрыть приложение до наступления таймаута, и окно опять получило фокус. В результате, такие варианты выливаются в следующую неприятную картину. Всплывает окно с предложением загрузки, а через секунду стартует приложение. Или наоборот — стартует приложение, пользователь его тут же закрывает, и появляется окно с предложением загрузки. Поэтому увеличение или уменьшение таймаута почти одинаково плохо (увеличение все-таки немного лучше, т.к. в большинстве случаев пользователь не станет мгновенно закрывать только что открытое приложение). На практике наиболее приемлемым получился таймаут в одну секунду.

function checkSafari(runlink, downloadlink) { 	if ( navigator.userAgent.indexOf('Windows')>=0 ) { 		// Открываем маленькое окошко с нашим не стандартным URL 		var w = window.open($(runlink).attr('href'), '', 'width=50, height=50'); 		setTimeout(function(){ 			try { 				// Пытаемся поработать с не определенным атрибутом окна 				if ( w.location!='about:blank' ) {} 				w.close(); 				 window.focus(); 			} 			catch (e) { 				w.close(); 				window.focus(); 				downloadConfirmation(downloadlink); 			} 		}, 1000); 	} 	else { 		// Под MacOS и теоретически под iOS 		document.location = $(runlink).attr('href'); 		setTimeout(function(){ 			// Если окно по-прежнему в фокусе, значит приложение не запустилось 			if ( window.isFocused ) downloadConfirmation(downloadlink); 		}, 1000); 	} }  // Обработчики событий получения и потери фокуса окна браузера window.isFocused = true; $(window).on('focus', function(){ 	window.isFocused = true; }) .on('blur', function(){ 	window.isFocused = false; }); 

Chrome оказался полностью совместимым с Safari под MacOS, за исключением таймаута (Safari потребовалась почти секунда, чтобы запустить приложение, в то время, как Chrome запустил его меньше, чем за 250 миллисекунд).

(На практике способ с таймаутом очень сильно зависит от загруженности компьютера в момент запуска приложения. Я попадал на ситуации с Chrome и Safari, когда приложение не успевало запуститься, и выводилось окно с предложением о загрузке, после чего запускалось приложение. Опять-таки проблема с таймаутом, описанная выше).

function checkChrome(runlink, downloadlink) { 	document.location = $(runlink).attr('href'); 	setTimeout(function(){ 		if ( window.isFocused ) downloadConfirmation(downloadlink); 	}, 1000); } 

Ну и наконец Internet Explorer не показал стабильного результата при всех стараниях. Для IE технически подходит вариант Safari под Windows (с открытием маленького окна). Но получить хотя бы 50% стабильность так и не удалось. Поэтому IE ушел в ветку «другие браузеры», которая не делает никаких проверок, а просто отображает обе ссылки — на запуск и на загрузку приложения. (Буду признателен, если кто-то подскажет способ для IE).

Теперь нам осталось только проинициализировать наши ссылки.

initApplicationLink('.runlink', '.downloadlink'); 

Примечание: Решение тестировалось в последних версиях Chrome, Firefox, Opera, Safari и IE на платформах Windows и MacOS. В мобильных браузерах тесты не проводились, но вариант с таймаутом вполне может оказаться работоспособным на Android и iOS.