2015-01-20 15 views
6

Meine App verfügt über ein benutzerdefiniertes URL-Schema und kann mithilfe von Deep Linking direkt von einer URL zu einem bestimmten Inhalt springen. Ich würde gerne das Verhalten in der aktuellen Facebook-Gruppen-App replizieren, die es dem Benutzer ermöglicht, auf die Schaltfläche "Zum Startbildschirm hinzufügen" in der App zu gelangen und diese auf eine benutzerdefinierte localhost-Seite in Safari zu verschieben Tippen Sie auf die Schaltflächen "Freigeben" und "Zum Startbildschirm hinzufügen" von Safari. Diese fügen dann ein Symbol zum Startbildschirm hinzu, mit dem sie in die Google Groups-App und in die jeweilige Gruppe aufgenommen werden.Link zu Safari "Zum Home-Bildschirm hinzufügen" von Inside-App?

Mein Problem ist, dass wenn ich mein benutzerdefiniertes URL-Schema Deep Link zu Safari sende, bevor der Benutzer Auf dem Home-Bildschirm tippen kann, folgt es diesem Link und endet einfach wieder in meiner App. Ich muss etwas an Safari senden, das dem Deep-Link nicht wirklich folgt, aber immer noch mit ihm verlinkt wird, wenn der Benutzer es zu seinem Home-Bildschirm hinzufügt, und ich habe keine Ahnung, wie das geht.

Facebook-Gruppen generierten Links in der Safari-Adressleiste in etwa so aussehen, haben sie direkt in die URL JavaScript vielleicht eingebettet ?:

data:text/html;charset=UTF-8;base64, <tens of thousands of characters in an alpha-numeric string> 

Jede Idee, was das ist, und wie könnte ich etwas Ähnliches tun ?

Antwort

8

Wenn Sie diese Zeichen in jedem Online-base64 Decoder einfügen, erhalten Sie folgendes:

<!DOCTYPE HTML> 
<html> 

<head id="htmlHead"> 
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" /> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <meta name="apple-mobile-web-app-capable" content="no" /> 
    <title>Promote Groups or Pages</title> 
    <link rel="apple-touch-icon-precomposed" href="data:image/png;base64, 
</head> 

<body> 
    <a id="redirect" href="fb-groups://group?id=1503507809911018&s=s"></a> 
</body> 

</html> 
<script type="text/javascript"> 
    function jump() { 
     var e = document.getElementById('redirect'); 
     var ev = document.createEvent('MouseEvents'); 
     ev.initEvent('click', true, true, document.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null); 
     e.dispatchEvent(ev); 
     window.close(); 
    } 
    if (("standalone" in window.navigator) && window.navigator.standalone) { 
     document.body.style.backgroundColor = '#000000'; 
     jump(); 
    } else { 
     var time = 1422371365; 
     var timeout = new Date().getTime()/1000; 
     if (timeout > time + 4) { 
      document.write('</head><body bgcolor="#fff"><div align="center"></div>'); 
      jump(); 
     } else { 
      document.write(
       #### 
         )} 
    } 
</script> 

Statt #### ist der folgende:

<style> 
    html, 
    body, 
    div, 
    span, 
    object, 
    iframe, 
    h1, 
    h2, 
    h3, 
    h4, 
    h5, 
    h6 { 
     margin: 0; 
     padding: 0; 
     border: 0; 
     font-size: 100%; 
     vertical-align: baseline; 
     font-family: HelveticaNeue-Light, sans-serif; 
     -webkit-touch-callout: none; 
     -webkit-user-select: none; 
     -khtml-user-select: none; 
     -moz-user-select: none; 
     -ms-user-select: none; 
     user-select: none 
    } 
    a { 
     color: inherit; 
     text-decoration: none 
    } 
    #headerBox { 
     width: 100%; 
     height: 48px; 
     border-bottom: .5px solid #979797; 
     background-color: #F6F6F6; 
     text-align: center 
    } 
    #popoverBox { 
     position: absolute; 
     bottom: 15px; 
     width: 290px; 
     height: 132px; 
     -webkit-border-radius: 11px; 
     border-radius: 11px; 
     background-color: #2891F7; 
     border: none; 
     margin-left: -145px; 
     left: 50% 
    } 
    #popoverBox:after { 
     top: 100%; 
     left: 50%; 
     border: solid transparent; 
     content: " "; 
     height: 0; 
     width: 0; 
     position: absolute; 
     pointer-events: none; 
     border-color: rgba(40, 145, 247, 0); 
     border-top-color: #2891F7; 
     border-width: 13px; 
     margin-left: -13px 
    } 
    .icon { 
     margin-bottom: 5px 
    } 
    #groupIconContainer { 
     margin-left: 40px; 
     width: 60px; 
     float: left; 
     height: 100% 
    } 
    #groupIcon { 
     height: 60px; 
     width: 60px; 
     -webkit-border-radius: 14px; 
     border-radius: 14px; 
     background-color: #FFF; 
     margin-top: 25px 
    } 
    #addToHomeIconContainer { 
     margin-right: 40px; 
     width: 60px; 
     float: right; 
     height: 100% 
    } 
    #addToHomeIcon { 
     margin-top: 25px 
    } 
    #arrow { 
     margin: 0 auto; 
     display: block; 
     margin-top: 49px 
    } 
    #infoText { 
     color: #141823; 
     font-size: 18px; 
     line-height: 28px; 
     text-align: center; 
     width: 280px; 
     height: 160px; 
     margin: auto; 
     position: absolute; 
     top: 0; 
     left: 0; 
     bottom: 0; 
     right: 0 
    } 
    .iconLabelContainer { 
     font-size: 12px; 
     color: #FFF; 
     line-height: 14px; 
     width: 100px; 
     height: 30px; 
     margin-left: -20px; 
     text-align: center 
    } 
    #groupCoverImage { 
     box-sizing: border-box; 
     -webkit-box-sizing: border-box; 
     background-size: cover; 
     background-position: center; 
     background-image: url("data:image/png;base64, 
     width: 52px; 
     height: 52px; 
     border-radius: 50%; 
     position: relative; 
     top: 4px; 
     left: 4px; 
     border: 0.5px solid rgba(0, 0, 0, 0.10); 
    } 
</style> 

<body> 
    <div id="headerBox"><span style="font-size:17px;color:#2891F7;line-height:20px;position:relative;top:13.5px"><a href="fb-groups://">Отмена</a></span> 
    </div> 
    <div id="infoText">Коснитесь кнопки 
     <svg style="vertical-align:text-bottom" width="22px" height="30px" viewbox="0 0 44 60" version="1.1"> 
      <defs></defs> 
      <g id="Final" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 
       <g id="Add-Group-to-Home-Screen" transform="translate(-299.000000, -459.000000)"> 
        <g id="Tap-+-below-+-Share-Icon" transform="translate(231.000000, 458.000000)"> 
         <g id="share-icon" transform="translate(60.000000, 0.000000)"> 
          <path d="M20.4,12 L30,2.4 L39.6,12" id="Shape" stroke="#3F75FF" stroke-width="2"></path> 
          <path d="M30,39.0000013 L30,2.7996" id="Shape" stroke="#3F75FF" stroke-width="2"></path> 
          <rect id="Rectangle-path" x="0" y="0" width="60" height="60"></rect> 
          <path d="M20.2682927,20 L9,20 L9,60 L51,60 L51,20 L39.7317073,20" id="Shape" stroke="#3F75FF" stroke-width="2"></path> 
         </g> 
        </g> 
       </g> 
      </g> 
     </svg> ниже, 
     <br>Затем коснитесь &ldquo;Добавить на основной экран&rdquo;</div> 
    <div id="popoverBox"> 
     <div id="groupIconContainer"> 
      <div id="groupIcon" class="icon"> 
       <div id="groupCoverImage"></div> 
      </div> 
      <div class="iconLabelContainer">Promote Groups or Pages</div> 
      <!-- Replace with dynamic name --> 
     </div> 
     <div id="addToHomeIconContainer"> 
      <svg id="addToHomeIcon" width="60px" height="60px" viewbox="0 0 120 120" version="1.1"> 
       <defs></defs> 
       <g id="Add-Group-to-Home-Screen-Spec" transform="translate(-410.000000, -802.000000)"> 
        <g id="Add-to-Home-Screen" transform="translate(367.000000, 802.000000)"> 
         <g id="Add-to-Home-Screen-Icon" transform="translate(43.000000, 0.000000)"> 
          <rect id="Rectangle-6" fill="#FFFFFF" x="0" y="0" width="120" height="120" rx="28"></rect> 
          <rect id="Rectangle-6" fill="#686870" x="25" y="25" width="70" height="70" rx="15"></rect> 
          <path d="M58,58 L58,46.991617 C58,45.8978404 58.8954305,45 60,45 C61.1122704,45 62,45.8916773 62,46.991617 L62,58 L73.008383,58 C74.1021596,58 75,58.8954305 75,60 C75,61.1122704 74.1083227,62 73.008383,62 L62,62 L62,73.008383 C62,74.1021596 61.1045695,75 60,75 C58.8877296,75 58,74.1083227 58,73.008383 L58,62 L46.991617,62 C45.8978404,62 45,61.1045695 45,60 C45,58.8877296 45.8916773,58 46.991617,58 L58,58 Z" id="Rectangle-8" fill="#FFFFFF"></path> 
         </g> 
        </g> 
       </g> 
      </svg> 
      <div class="iconLabelContainer">Добавить на 
       <br>основной экран</div> 
     </div> 
     <svg id="arrow" width="12px" height="20px" viewbox="0 0 24 40" version="1.1"> 
      <defs></defs> 
      <g id="Explorations" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 
       <g id="Add-Group-to-Home-Screen" transform="translate(-307.000000, -847.000000)" stroke-linecap="round" stroke="#FFFFFF" stroke-width="5"> 
        <g id="Group" sketch:type="MSLayerGroup" transform="translate(30.000000, 752.000000)"> 
         <path d="M297,132 L280,115 L297,98" id="Path-35" transform="translate(288.500000, 115.000000) rotate(-180.000000) translate(-288.500000, -115.000000) "></path> 
        </g> 
       </g> 
      </g> 
     </svg> 
    </div> 
    <div id="popoverNub"></div>'); 

Deshalb glaube ich, ihre Umsetzung ist wie folgt:

1) Es ist ein Webserver in der Anwendung eingebettet (so etwas wie RoutingHTTPServer). Es läuft auf einigen Port wie 5555 und konfiguriert, um eine Seite mit Inhalten wie zurückzukehren:

<HTML><script>window.location.href=[data:text/html;charset=UTF-8;base64, tens of thousands of characters in an alpha-numeric string]</script></HTML> 

Die Syntax ist falsch, aber die Idee ist, die aktuelle URL (http://localhost:5555) mit, dass Base64-codierte Daten zu ersetzen.

2) Wenn Sie add to home page in der App tippen, es den Link http://localhost:5555 in der Safari öffnet, antwortet der Web-Server in der App mit der Webseite, ein Skript enthält, das die URL mit Base64 codierten Daten (diese Daten ersetzt enthält die aktuelle Uhrzeit, wenn das Skript generiert wurde)

3) aus dem Inhalt der base64-codierten Daten können Sie sehen, dass es zwei Kontrollen:

a) wenn die App nicht in Safari läuft, aber Standalone

b) wenn etwas Zeit vergangen ist, seit das Skript generat wurde ed

Wenn eine dieser Aussagen zutrifft, werden Sie mit deep link in die App weitergeleitet. Wenn beide falsch sind, wird die Seite angezeigt, die den Benutzer auffordert, einen Link zum Startbildschirm hinzuzufügen (das habe ich durch #### ersetzt).

Wenn der Link zum Startbildschirm hinzugefügt wird, werden alle diese Skripts und Webseiten als base64-kodierte Daten in diesen Link eingebettet.

+1

Das scheint absolut richtig zu sein - vielen Dank, dass Sie hier reinschauen! – Luke

+0

Wie funktioniert das im Hintergrund?Wenn Sie zum Beispiel auf den Link tippen und die Webseite in Safari öffnen, führt die App nicht mehr den Vordergrund aus. Wie behandelt die App die HTTP-Anfrage im Hintergrund? – Crashalot

Verwandte Themen