2015-01-20 5 views
6

La mia app ha uno schema URL personalizzato e può utilizzare il deep linking per passare direttamente da un URL ad alcuni contenuti. Mi piacerebbe replicare il comportamento nella recente app Facebook Groups, che consente all'utente di premere il pulsante "Aggiungi alla schermata Home" nell'app, che li porta a una pagina localhost personalizzata in Safari, consentendo loro di tocca i pulsanti Condividi e Aggiungi alla schermata Home di Safari, che aggiungono un'icona alla loro schermata iniziale che, quando viene toccata, li porta nell'app Gruppi e al gruppo specifico in questione.Link a Safari "Aggiungi alla schermata principale" dall'app interna?

Il mio problema è che se invio il mio deep link schema URL personalizzato a Safari, prima che l'utente possa toccare Aggiungi a schermata iniziale, seguirà quel collegamento e finirà subito nella mia app. Ho bisogno di inviare qualcosa a Safari che in realtà non seguirà il link diretto, ma ci collegherà comunque ad esso se l'utente lo aggiunge alla schermata principale e non ho idea di come farlo. link generati

Facebook Gruppi nella barra degli indirizzi di Safari aspetto qualcosa di simile, sono essi forse incorporato JavaScript direttamente nell'URL ?:

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

Qualsiasi idea di cosa si tratta, e come avrei potuto fare qualcosa di simile ?

risposta

8

Se si incolla questi personaggi in qualsiasi decoder Base64 on-line, si otterrà il seguente:

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

Invece di #### c'è il seguente:

<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>'); 

quindi credo che la loro attuazione è come segue:

1) Nell'applicazione è presente un server Web (ad esempio RoutingHTTPServer). E 'in esecuzione su qualche porto come 5555 e configurato per restituire una pagina con contenuti come:

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

La sintassi è sbagliata, ma l'idea è quella di sostituire l'URL corrente (http://localhost:5555) con quella dei dati base64 codificato.

2) Quando si tocca add to home page in app, si apre il link http://localhost:5555 in Safari, il web server all'interno della app risponde con la pagina web, contenente uno script che sostituisce l'URL con codifica Base64 dati (questo dato contiene l'ora corrente, quando lo script è stato generato)

3) Dal contenuto dei Base64 codificati i dati si può vedere che ci sono due controlli:

a) se l'applicazione non è in esecuzione in Safari, ma standalone

b) se è trascorso un po 'di tempo da quando è stato generato lo script ed

Se una di queste affermazioni è vera, si viene reindirizzati nell'app utilizzando il collegamento diretto. Se entrambi sono falsi, viene visualizzata la pagina che richiede all'utente di aggiungere il link alla schermata iniziale (questo è quello che ho sostituito con ####).

Quando il collegamento viene aggiunto alla schermata iniziale, tutti questi script e pagine Web sono incorporati nel collegamento come dati codificati in base 64.

+1

Questo sembra essere assolutamente giusto - grazie mille per aver scavato in questo! – Luke

+0

Come funziona in background?Ad esempio, quando tocchi il link e apri la pagina Web in Safari, l'app non esegue più il foreground, quindi come fa l'app a gestire la richiesta HTTP in background? – Crashalot