my space

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

react-native

September 13, 2019

ต่อจากคราวก่อนที่ทำ Universal Link ให้กับ iOS ในบทความนี้จะพูดถึง Android ในชุดของบทความนี้จะมี 3 ตอนคือ

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

หลักการ

  1. สร้างไฟล์ assetlinks.json ขึ้นมาเพื่อยืนยันว่า web server นี้ link มาหา app ได้
  2. เพิ่ม scheme ใน app เพื่อให้ app รู้ว่ามันจะ link ได้จาก domain ไหน
  3. เมื่อ user เข้า url ที่ match กับสิ่งที่ระบุไว้ใน assetlinks.json ถ้า match ก็จะเปิด app ขึ้นมาให้เลย

Implementation

สร้าง assetlinks.json

โดยถ้าของ iOS มี Apple App Site Association ของ Android ก็จะมี assetlinks.json นี่แหละ

[
  {
    "relation": ["delegate_permission/common.handle_all_urls"],
    "target": {
      "namespace": "android_app",
      "package_name": "com.testapp.gie",
      "sha256_cert_fingerprints": ["xxxx"]
    }
  }
]

File นี้สามารถสร้างขึ้นมาได้โดยใช้ Android App Links Assistant นำมันไปวางไว่ที่ .well-known (ที่เดียวกับที่วาง iOS เมื่อตอนที่แล้วเลย) โดย url ที่ access ได้จะเป็น https://<domain>/.well-known/assetlinks.json

ต่อมาให้มาที่ AndroidManifest.xml เพื่อเพิ่ม scheme เพื่อให้ app รู้ว่ามันสามารถ link มาจาก domain ไหน

<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="https" android:host="gie.netlify.com" />
</intent-filter>

ก็เป็นอันว่าเรียบร้อย ทดลองเข้า https://gie.netlify.com บน Android ที่มีการติดตั้ง app นี้ไว้ควรจะมี option ขึ้นมาว่าให้เลือกเปิดจาก app หรือ chrome


gie

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