Замена мобильных браузеров на родное приложение - Проблемы с Chrome, когда приложение не установлено

У меня есть веб-страница, назовите ее entry.html.

Когда пользователь вводит эту страницу, код javascript (см. ниже) пытается глубоко связать пользователя с родным приложением iOS/Android.

Если сбой глубокой связи (возможно, если приложение не установлено на устройстве), пользователь должен "отступить" на другую страницу - позвонит ему fallback.html.

вот код javascript, который работает на entry.html:

$(function(){
    window.location = 'myapp://';
    setTimeout(function(){
        window.location = 'fallback.html';
    }, 500);
});

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

это отлично работает, поскольку на устройстве установлено еще одно приложение.

но если приложение не установлено, это поведение при попытке глубокой ссылки:

Mobile Safari. Я вижу предупреждение, в котором говорится, что "Safari не может открыть эту страницу..." на мгновение, а затем верно отбрасывается на fallback.html - это ожидаемое поведение.

Мобильный Chrome - моя проблема.

когда приложение не установлено, браузер фактически перенаправляется на URL-адрес myapp://, который, конечно, недействителен, поэтому я получаю страницу "не найден", и спад не происходит.

Наконец - мой вопрос:

Как я могу исправить свой код, так что FALL-BACK WILL OCCUR на мобильном Chrome тоже? как мобильный Safari?

note: я вижу, что мобильный сайт LinkedIn делает это правильно, с Safari и Chrome, с установленным или отсутствующим приложением, но я не смог отследить код, ответственный за него: (

note2: я попытался добавить iframe вместо window.location = url, это работает только на Safari, мобильный Chrome не имеет глубокой ссылки при добавлении iFrame, даже если приложение установлено.

Спасибо всем!

UPDATE:

я нашел достойное решение и ответил на свой вопрос. см. принятый ответ для моего решения.

ОТВЕТЫ

Ответ 1

для тех, кого это интересует, мне удалось найти достойное решение для решения этих проблем с deeplinking Chrome на Android.

я отказался от подхода myapp://, я оставил его работоспособным только в случае устройства iOS.

для Android-устройств, теперь я использую intents, которые концептуально отличаются, чем протокол myapp://.

Я в основном веб-разработчик, а не разработчик Android, поэтому мне потребовалось некоторое время, чтобы понять концепцию, но это довольно просто. я попробую объяснить и продемонстрировать здесь MY решение (обратите внимание, что есть другие подходы, которые могут быть реализованы с помощью 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-устройству, появляется диалоговое окно "chooser", спрашивающее, с каким приложением я хочу открыть следующее? [chrome, myapp]

причина, по которой этот диалог появился при нажатии на "обычный" URL-адрес, заключается в том, что мы зарегистрировали намерение с помощью схемы http.

с этим подходом, deeplink даже не обрабатывается на веб-странице, он обрабатывается устройством сам, когда нажимает соответствующую ссылку на существующее правило намерения, определенное в манифесте приложения Android.

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

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

Я действительно надеюсь, что это может помочь кому-то, кто сталкивается с тем же... пожелать, чтобы у меня было такое объяснение;)

приветствий.

Ответ 2

Очень важно удостовериться, что при попытке открыть URL-адрес deeplink с JavaScript, чтобы URL-адрес был правильно отформатирован для устройства и браузера. (Если вы не используете соответствующий URL-адрес развязки для браузера/платформы, пользователь может быть перенаправлен на страницу "Страница не найдена", и это то, что вы испытываете.)

Теперь вы должны заметить, что 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>

Подробнее см. здесь:
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 по-прежнему требует условного разрешения, поскольку более старые версии ОС по-прежнему используют браузер AOSP.

Ответ 3

`Я использую этот код для deeplinking.
Если приложение будет установлено, приложение откроется.
Если приложение не установлено, оно остается таким, как оно есть.
Если вы хотите добавить любое другое условие для приложения без установки, то просто раскомментируйте код setTimeout.

var deeplinking_url = scootsy://vendor/1; 

  $(document).ready(function(){<br>

  call_me_new(deeplinking_url);<br>

}); 

var call_me_new = function(deeplinking_url){<br>

        if(deeplinking_url!=''){<br>
                var fallbackUrl ='http://scootsy.com/';<br>
                var iframe = document.createElement("iframe");<br>
                var nativeSchemaUrl = deeplinking_url;<br>
                console.log(nativeSchemaUrl);<br>

                iframe.id = "app_call_frame";<br>
                iframe.style.border = "none";<br>
                iframe.style.width = "1px";<br>
                iframe.style.height = "1px";<br>
                iframe.onload = function () {<br>
                    document.location = nativeSchemaUrl;<br>
                };<br>
                iframe.src = nativeSchemaUrl; //iOS app schema url<br>
                window.onload = function(){<br>
                    document.body.appendChild(iframe);<br>
                }<br>

                //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.<br>
                /*<br>
                setTimeout(function(){<br>
                   console.log('Iframe Removed...');<br>
                    document.getElementById("app_call_frame").remove();<br>

               window.location = fallbackUrl; //fallback url<br>
                },5000);*/          <br>    
        }<br>
};<br>


`

Ответ 4

Я создал плагин Javascript, который поддерживает большинство современных браузеров на мобильных устройствах. Но для этого требуется иметь глубокую привязку целевых страниц к междоменному домену (нежели универсальный URL-адрес) для работы с ios9 Facebook с использованием универсальной ссылки. Существует также другой способ заставить это работать на Facebook iOS9 с помощью Facebook SDK. Я разделяю это, если кто-нибудь может найти это полезным. В настоящее время он не является резервным вариантом, но если возвращается в App Store.

https://github.com/prabeengiri/DeepLinkingToNativeApp