wake-up-neo.net

Mobile Browser nicht mehr mit nativer App verknüpfen - Probleme mit Chrome, wenn App nicht installiert ist

Ich habe eine Webseite, nennen wir sie entry.html.

Wenn ein Benutzer diese Seite aufruft, versucht ein Javascript-Code (siehe unten), den Benutzer mit der nativen iOS/Android App) zu verknüpfen.

Wenn der Deep-Link fehlschlägt (wahrscheinlich, wenn die App nicht auf dem Gerät installiert ist), sollte der Benutzer auf eine andere Seite "zurückgreifen" - nennen wir sie fallback.html.

hier ist der Javascript-Code, der auf entry.html ausgeführt wird:

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

dies ist eine standardmäßige Deep-Link-Methode, die im gesamten Netzwerk empfohlen wird. Versuchen Sie, eine Deep-Link-Verbindung herzustellen, und wenn das Timeout ausgelöst wird, bedeutet dies, dass keine Deep-Link-Verbindung aufgetreten ist.

Dies funktioniert gut, solange die App auf dem Gerät installiert ist.

wenn die App jedoch nicht installiert ist, ist dies das Verhalten beim Versuch, einen Deep-Link zu erstellen:

Mobile Safari: Ich erhalte eine Warnmeldung mit der Meldung "Safari kann diese Seite nicht öffnen ...", und die Meldung wird ordnungsgemäß auf fallback.html Zurückgesetzt. Dies ist das erwartete Verhalten .

Mobile Chrome ist mein Problem.

wenn die App nicht installiert ist, wird der Browser auf die URL myapp:// umgeleitet, die natürlich ungültig ist. Ich erhalte daher eine Seite, die nicht gefunden wurde, und es kommt nicht zu einem Fallback.

Endlich - meine Frage ist:

Wie kann ich meinen Code so korrigieren, dass FALL-BACK auch auf Mobilgeräten Chrome) auftritt? Genau wie bei Mobile Safari?

Hinweis: Ich sehe, dass die LinkedIn Mobile-Website dies mit Safari & Chrome mit oder ohne installierte App ordnungsgemäß ausführt, aber ich konnte den dafür verantwortlichen Code nicht nachverfolgen: (

Anmerkung 2: Ich habe versucht, ein iframe anstelle von window.location = url anzufügen. Dies funktioniert nur auf Safari, mobil Chrome nicht Deep-Link beim Anhängen eines iFrames, auch wenn die App installiert ist.

Vielen Dank an alle!


PDATE:

ich fand eine anständige Lösung und beantwortete meine eigene Frage. Siehe akzeptierte Antwort für meine Lösung.

24
geevee

für jeden, der interessiert ist, habe ich es geschafft, eine anständige Lösung zu finden, um diese Probleme mit deeplinking Chrome auf Android zu lösen.

ich habe den myapp:// - Ansatz aufgegeben und ihn nur für iOS-Geräte aktiviert.

für Android Geräte verwende ich jetzt intents, die konzeptionell anders sind als das myapp:// - Protokoll.

Ich bin hauptsächlich ein Webentwickler, kein Android Entwickler, daher habe ich einige Zeit gebraucht, um das Konzept zu verstehen, aber es ist ganz einfach. Ich werde versuchen, hier MEINE Lösung zu erklären und zu demonstrieren ( Beachten Sie, dass es andere Ansätze gibt, die mit intents implementiert werden könnten, aber dieser hat bei mir perfekt funktioniert.

hier ist der relevante Teil im Android App-Manifest, das die Intent-Regeln registriert (beachte den Android:scheme="http" - wir werden gleich darauf eingehen):

<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>

nachdem dies im App-Manifest deklariert wurde, sende ich mir eine E-Mail mit " http://www.myapp.com " in der Nachricht.

wenn der Link mit dem Android Gerät getippt wird, erscheint ein "Auswahl" -Dialog, in dem gefragt wird, mit welcher Anwendung ich das folgende öffnen möchte? [chrome, myapp ]

der Grund, warum dieses Dialogfeld beim Tippen auf eine "normale" URL angezeigt wurde, ist, dass wir die Absicht mit dem Schema http registriert haben.

bei diesem Ansatz wird der Deeplink nicht einmal auf der Webseite behandelt, sondern von dem Gerät selbst, wenn auf einen passenden Link zu einer vorhandenen Absichtsregel getippt wird, die in Android App-Manifest.

und ja, wie gesagt, dieser Ansatz unterscheidet sich konzeptionell von dem iOS-Ansatz, bei dem der Deeplink von der Webseite aus aufgerufen wird, aber er löst das Problem und macht die Magie.

Hinweis: Wenn die App nicht installiert ist, wird kein Auswahldialog angezeigt. Sie werden lediglich zur aktuellen Webseite mit der angegebenen Adresse navigiert (es sei denn, Sie haben mehr als einen Browser Sie müssen eine auswählen ... aber nicht kleinlich sein).

ich hoffe wirklich, dass dies jemandem helfen könnte, der vor der gleichen Sache steht. Ich wünschte, ich hätte eine solche Erklärung ;-)

prost.

13
geevee

Es ist sehr wichtig, dass Sie beim Öffnen einer Deeplink-URL mit JavaScript sicherstellen, dass die URL für das Gerät und den Browser richtig formatiert ist . (Wenn Sie nicht die entsprechende Deeplink-URL für den Browser/die Plattform verwenden, wird ein Benutzer möglicherweise zu einer Seite umgeleitet, die nicht gefunden wurde.)

Jetzt müssen Sie beachten, dass Chrome auf Android ein anderes URL-Format hat als der alte Standard Android Browser  1! Sie müssen die Deep Links mit href="Android-app://" Im HTML-Markup Ihrer Webseiten mit Anmerkungen versehen. Sie können dies im Abschnitt für jede Webseite tun, indem Sie ein Tag hinzufügen und den Deep Link als alternativen URI angeben.

Das folgende HTML-Snippet zeigt beispielsweise, wie Sie den entsprechenden Deep Link in einer Webseite mit dem URL-Beispiel angeben können: // gizmos.

<html>
<head>
    <link rel="alternate"
          href="Android-app://com.example.Android/example/gizmos" />
    ...
</head>
<body> ... </body>

Weitere Details finden Sie in den Referenzen hier:
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

Und hier ist ein Deep Link-Testtool für Android: https://developers.google.com/app-indexing/webmasters/test.html

Ich hoffe, das hilft.

1 Da der alte AOSP-Browser durch Chrom ersetzt wurde, ist dies jetzt die Standardmethode, um Deep-Links für aktuelle Android) -Versionen zu verarbeiten. Dennoch erfordert Android) weiterhin eine Bedingung Lösung, da ältere Betriebssystemversionen immer noch den AOSP-Browser verwenden.

8
eyecatchUp

Ich habe ein Javascript-Plugin erstellt, das die meisten modernen Browser auf Mobilgeräten unterstützt. Deep-Link-Zielseiten müssen jedoch domänenübergreifend gehostet werden (anders als die universelle Link-URL), damit sie unter ios9 Facebook mit universeller Verknüpfung funktionieren. Es gibt auch einen anderen Weg, um das mit Facebook SDK auf Facebook iOS9 zum Laufen zu bringen. Ich teile dies, wenn jemand dies hilfreich finden könnte. Derzeit gibt es keine Fallback-Option, aber wenn auf den App Store zurückgegriffen wird.

https://github.com/prabeengiri/DeepLinkingToNativeApp

1
prabeen giri

Ich verwende diesen Code für das Deeplinken. Wenn die App installiert ist, wird sie geöffnet. Wenn die App nicht installiert ist, bleibt sie unverändert. Wenn Sie eine andere Bedingung für die App hinzufügen möchten, ohne sie zu installieren, müssen Sie nur den setTimeout-Code auskommentieren.

<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
Stephen Salve