Deeplinking mobile browsers to native app-проблемы с Chrome, когда приложение не установлено
у меня есть веб-страница, давайте назовем ее entry.html.
когда пользователь входит на эту страницу, код javascript (см. ниже) пытается глубоко связать пользователя с родным приложением iOS / Android.
если deep-link терпит неудачу (возможно, если приложение не установлено на устройстве), пользователь должен "отступить" на другую страницу - давайте назовем его fallback.html.
вот код JavaScript, который работает на entry.html:
$(function(){
window.location = 'myapp://';
setTimeout(function(){
window.location = 'fallback.html';
}, 500);
});
это стандартный метод глубокой компоновки, который рекомендуется по всей сети; попробуйте deep-link, и если тайм-аут срабатывает, это означает, что deep-link не произошел - поэтому резервный.
это работает нормально, пока приложение установлено на устройстве.
но, если приложение не установлено, это-поведение при попытке глубокого ссылке:
Мобильный Сафари: я вижу предупреждение: "Safari не может открыть эту страницу...- на мгновение, а потом он падает ... --2-->- что ожидаемое поведение.
Мобильный Chrome - это моя проблема.
когда приложение не установлено, браузер фактически перенаправляется на myapp:// url, который, конечно, недействителен-поэтому я получаю страницу "не найден", и откат не происходит.
наконец-то- мой вопрос:
как я могу исправить свой код, так что откат будет происходить и на мобильном Chrome? так же, как mobile Safari?
примечание: Я вижу, что Мобильный сайт LinkedIn делает это правильно, с Safari & Chrome, с установленным приложением или без него, но я не мог отследить код, ответственный за это: (
note2: я попытался добавить iframe вместо window.location = url, это работает только на Safari, mobile Chrome не имеет глубокой связи при добавлении iFrame, даже если приложение установлено.
спасибо всем!
обновление:
я нашел достойное решение, и я сам ответил на свой вопрос. см. принятый ответ для моего решения.
4 ответов
для тех, кто заинтересован, мне удалось найти достойное решение для решения этих проблем с deeplinking Chrome на Android.
Я бросил myapp:// подход, я оставил его работать только в случаях устройства iOS.
для устройств Android я теперь использую intents, которые принципиально разные чем myapp:// протокол.
Я в основном веб-разработчик, а не разработчик Android, поэтому мне потребовалось некоторое время, чтобы понять концепцию, но все очень просто. я попытаюсь объяснить и продемонстрировать свое решение здесь (обратите внимание ,что есть другие подходы, которые могут быть реализованы с помощью intents, но это сработало для меня отлично).
вот соответствующая часть манифеста приложения для Android, регистрирующая правила намерения (обратите внимание на android:scheme="http" - поговорим об этом в ближайшее время):
<receiver android:name=".DeepLinkReceiver">
<intent-filter >
<data android:scheme="http" android:host="www.myapp.com" />
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.BROWSABLE"/>
<category android:name="android.intent.category.DEFAULT"/>
</intent-filter>
</receiver>
теперь, после того, как это объявлено в манифесте приложения, я отправляю себе электронное письмо с "http://www.myapp.com" в сообщении.
когда ссылка нажата с Android устройства, появляется диалоговое окно" выбор", спрашивая, с каким приложением я хочу открыть следующее? [хром, myapp]
причина, по которой этот диалог появился при нажатии на" обычный " url, заключается в том, что мы зарегистрировали намерение с адресу http схема.
при таком подходе deeplink даже не обрабатывается в веб-страница, она обрабатывается устройства сам, при нажатии на соответствующую ссылку на существующее правило намерения, определенное в манифесте приложения Android.
и да, как я уже сказал, этот подход отличается концепцией от подхода iOS, который вызывает deeplink из веб-страницы, но он решает проблему, и это делает магию.
Примечание: когда приложение не установлено, диалог выбора не появится, вы просто перейдете к фактической сети страница с заданным адресом (если у вас нет более 1 браузера, поэтому вам нужно выбрать один... но давайте не будем мелочными).
Я очень надеюсь, что это может помочь кому-то, кто смотрит то же самое.. жаль, что у меня нет такого объяснения; -)
ура.
очень важно убедиться, что при попытке открыть URL-адрес deeplink с помощью JavaScript URL-адрес правильно отформатирован устройства и браузера. (если вы не используете соответствующий URL-адрес deeplink для браузера / платформы, пользователь может быть перенаправлен на" страницу не найдена", что вы испытываете.)
теперь вы должны отметить, что Chrome на Android имеет другой формат URL, чем старый стандартный браузер Android 1! Вам нужно аннотировать глубокие ссылки, используя href="android-app://" в разметке HTML ваших веб-страниц. Вы можете сделать это в разделе для каждой веб-страницы, добавив тег и указав глубокую ссылку в качестве альтернативного URI.
например, следующий фрагмент HTML показывает, как можно указать соответствующую глубокую ссылку на веб-странице с примером URL: / / gizmos.
<html>
<head>
<link rel="alternate"
href="android-app://com.example.android/example/gizmos" />
...
</head>
<body> ... </body>
для получения более подробной информации см. ссылки here:
https://developer.chrome.com/multidevice/android/intents
https://developers.google.com/app-indexing/webmasters/server
https://developer.android.com/training/app-indexing/enabling-app-indexing.html#webpages
и вот инструмент тестирования глубокой ссылки для Android:https://developers.google.com/app-indexing/webmasters/test.html
надеюсь, что помогает.
1 поскольку старый браузер AOSP был заменен chromium, теперь это способ по умолчанию обрабатывать глубокие ссылки для последних версий Android. Тем не менее, Android по-прежнему требует условного soltion, потому что старые версии ОС по-прежнему используют браузер AOSP.
Я использую этот код для deeplinking. Если приложение установлено, приложение откроется.. Если приложение не установлено, то это остается как есть.. Если вы хотите добавить любое другое условие для приложения без установки, просто раскомментируйте код setTimeout .
<script>
var deeplinking_url = scootsy://vendor/1;
$(document).ready(function(){
call_me_new(deeplinking_url);
});
var call_me_new = function(deeplinking_url){
if(deeplinking_url!=''){
var fallbackUrl ='http://scootsy.com/';
var iframe = document.createElement("iframe");
var nativeSchemaUrl = deeplinking_url;
console.log(nativeSchemaUrl);
iframe.id = "app_call_frame";
iframe.style.border = "none";
iframe.style.width = "1px";
iframe.style.height = "1px";
iframe.onload = function () {
document.location = nativeSchemaUrl;
};
iframe.src = nativeSchemaUrl; //iOS app schema url
window.onload = function(){
document.body.appendChild(iframe);
}
//IF the App is not install then it will remain on the same page.If you wish to send the use to other page then uncomment the below code and send a time interval for the redirect.
/*
setTimeout(function(){
console.log('Iframe Removed...');
document.getElementById("app_call_frame").remove();
window.location = fallbackUrl; //fallback url
},5000);*/
}
};
</script>
Я создал плагин JavaScript, который поддерживает большинство современных браузеров на мобильных. Но для работы на iOS9 Facebook с использованием универсальной ссылки необходимо иметь глубокие целевые страницы для размещения на кросс-домене(отличном от универсального url-адреса ссылки). Существует также другой способ заставить это работать на Facebook iOS9 с помощью Facebook SDK. Я делюсь этим, если кто-то может найти это полезным. В настоящее время он не резервный вариант, но если падает обратно в App Store.