my space

Web Server | เปิด App หรือ Store ด้วย Universal App Link

react-native

September 14, 2019

ต่อจากคราวก่อนที่ทำ Universal App Link ให้กับ iOS และ Android ในบทความนี้จะพูดถึงการ implement ในการเลือกเปิดจากฝั่ง Server กันบ้าง

  1. ทำให้กับ iOS
  2. ทำให้กับ Android
  3. ในกรณีที่ไม่ได้ลง App และมีการเปิด Web นั้นเราจะมีการตรวจสอบและ redirect ไปที่ store ที่เหมาะสม (ตอนนี้)

หลักการ

  1. หลังจากที่ Implement app link ไปแล้ว หาก user ไม่ได้ install app ไว้ในเครื่องเมื่อกด link ก็จะเปิด browser ขึ้นมา
  2. ตรวจสอบ Platform ของ user ที่เข้ามา แล้ว redirect ไปที่ store ที่เหมาะสม

Implementation

Code ในตัวอย่างนี้จะใช้ HTML และ JavaScript เป็นหลัก การตรวจสอบ Platform ของ user นั้นสามารถทำได้จาก window.navigator.userAgent และหากจะให้ง่ายก็ใช้ mobile-detect.js`

const appStoreUrl = "url ของ app store"
const playStoreUrl = "url ของ play store"
const md = new MobileDetect(window.navigator.userAgent)
const os = md.os()
if (os === "iOS") {
  window.location.href = appStoreUrl
} else if (os === "AndroidOS") {
  window.location.href = playStoreUrl
}

เพิ่มเติม

หากต้องการกำหนดให้ link ของเรานั้นมีรูปภาพและ title เวลาแสดงบน Social media อย่าง facebook หรือ line เราต้องทำการกำหนด meta tag property “og:” ภายใต้ ขึ้นมาด้วย

<head>
  <meta charset="utf-8" />
  <meta
    name="viewport"
    content="width=device-width,minimum-scale=1,initial-scale=1"
  />
  <meta charset="utf-8" />
  <meta name="robots" content="index,follow" />
  <meta name="googlebot" content="index,follow" />
  <meta name="description" content="" />
  <meta property="og:type" content="website" />
  <meta
    property="og:title"
    content="||Title ที่ต้องการให้แสดงบน Social Media||"
  />
  <meta property="og:description" content="" />
  <meta property="og:image" content="||Url ของรูปภาพ||" />
  <meta property="og:image:width" content="||width ของรูปภาพ||" />
  <meta property="og:image:height" content="||height ของรูปภาพ||" />
  <meta property="og:locale" content="en_US" />
</head>

หาก App ต้นทางใช้ In-App Browser แล้ว App Link ไม่ทำงานละ?

ในระยะหลัง App Social Media หลายๆที่เลือกที่จะใช้ in-app browser และทำให้ App link ใช้งานไม่ได้ในบางครั้ง ทางแก้ที่เป็นไปได้ทางหนึ่งคือการ implement deep link และเมื่อเปิดมาที่ url แล้วก็ให้ redirect ต่อไปที่ deep link ที่กำหนด โดยในตัวอย่างข้างล่างนี้เราจะกำหนด deep link scheme ของ app เราว่าชื่อ myapp:// และเมื่อเปิดเข้ามาจะให้ลองเปิดด้วยการ redirect ไปเลย ถ้า redirect ไม่ได้ค่อยมา detect ดูว่าเป็น OS อะไรและให้ redirect ไปยัง store นั้น

การที่เรา addEventListender pagehide นั้นก็เพื่อจะแก้ปัญหาเมื่อ redirect ไปที่ app ของเราแล้ว user กด back กลับมาที่ app ต้นทางซึ่งจะเปิด browser ข้างอยู่และอาจจะไป trigger ให้เปิดไปยังหน้า store

let appurl = "myapp://test"
const appStoreUrl = "app store url"
const playStoreUrl = "play store url"

var timeout
function preventPopup() {
  clearTimeout(timeout)
  timeout = null
  window.removeEventListener("pagehide", preventPopup)
}

function startApp() {
  window.location.href = appurl
  const md = new MobileDetect(window.navigator.userAgent)
  const os = md.os()
  timeout = setTimeout(function() {
    if (os === "iOS") {
      window.location.href = appStoreUrl
    } else if (os === "AndroidOS") {
      window.location.href = playStoreUrl
    }
  }, 1000)
  window.addEventListener("pagehide", preventPopup)
}

startApp()

gie

Written by gie who lives and works in Bangkok. Build things by code.
my twitter | github