Deep link

by Trina Lu

HTML

<table>
  <thead>
    <tr>
      <th></th>
      <th colspan="4">iOS</th>
    </tr>
    <tr>
      <th></th>
      <th colspan="2">has app</th>
      <th colspan="2">no app</th>

    </tr>
    <tr>
      <th></th>
      <th>deeplink(js)</th>
      <th>universal link</th>
      <th>deeplink(js)</th>
      <th>universal link</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Facebook</td>
      <td>
        會跳popup問你要不要離開facebook，選擇確定可以成功連進app
      </td>
      <td>
      </td>
      <td>
        會跳popup問你要不要離開facebook，但在popup還在的期間就會自動跳轉至商店頁面。注意如果是直接放app store網址（https://itunes.apple.com/tw/app/lit/id1339576055），則不會轉過去，可能是app store也會想要開app，所以會被擋住。
      </td>
      <td>
      </td>
    </tr>
    <tr>
      <td>Line</td>
      <td>
        可以進到app裡，但網頁也會隨之導去fallback的商店頁面
      </td>
      <td></td>
      <td>
       不會有任何popup，可以直接轉到商店 (直接放app store url or onelink皆OK)
      </td>
      <td></td>
    </tr>
    <tr>
      <td>Safari</td>
      <td>會先popup「要在lit中打開嗎？」選擇打開可以正確連進app，但回來safari會看到「要在App store中打開嗎？」的popup</td>
      <td></td>
      <td>會先噴錯，彈出視窗顯示「Safari無法打開網址，因為網址無效」，然後才會轉過去商店</td>
      <td></td>
    </tr>
    <tr>
      <td>Chrome</td>
      <td>
        可以順利進到app裡面，不過回來chrome會發現已經被導進商店頁面了
      </td>
      <td>
        
      </td>
      <td>
        不會有任何噴錯，可以順利進入商店
      </td>
      <td></td>
    </tr>
  </tbody>
</table>

<ul>
  <li>在有裝app的情況下，`setTimeout`進入商店這件事情，即使選擇開app也還是會被觸發，所以使用者一定會看到商店頁面...</li>
  <li>在有設定好universal link的情況下，Facebook的貼文連結點擊似乎沒有機會進入web，只有開app或者去商店的兩種情形</li>
</ul>

<br>

<table>
  <thead>
    <tr>
      <th></th>
      <th colspan="4">Android</th>
    </tr>
    <tr>
      <th></th>
      <th colspan="2">has app</th>
      <th colspan="2">no app</th>
    </tr>
    <tr>
      <th></th>
      <th>deeplink(js/intent)</th>
      <th>app link</th>
      <th>deeplink(js/intent)</th>
      <th>app link</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Facebook</td>
      <td>
        可以直接開App
      </td>
      <td>
      </td>
 ...

CSS

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}