Deeplinking mobile browsers to native app-проблемы с Chrome, когда приложение не установлено

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

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

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

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

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

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

Это работает нормально, пока приложение установлено на устройстве.

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

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

Мобильный хром - это мой проблема.

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

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

Как я могу исправить свой код, чтобы откат произошел и в мобильном Chrome? прямо как мобильное сафари?

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

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

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

Обновление:

Я нашел достойное решение и сам ответил на свой вопрос. смотрите принятый ответ для моего решения.
4 24
javascript deep-linking mobile-website

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 появляется диалоговое окно "выбор", спрашивающее, с помощью какого приложения я хочу открыть следующее? [chrome, myapp]

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

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

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

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

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

Ура.

11

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

8

Я использую этот код для глубокой связи. Если приложение установлено, оно откроется.. Если приложение не установлено, то это остается, как есть.. Если вы хотите добавить любое другое условие для приложения no install, просто раскомментируйте код 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>
1

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

Https://github.com/prabeengiri/DeepLinkingToNativeApp

0