ทำ PWA ให้กลายเป็นแอปแอนดรอยด์แบบง่าย ๆ ด้วย TWA — ตอนที่ 2 Digital Asset Links
จากบทความก่อนหน้านี้ที่เล่าถึงความสามารถของ TWA ที่จะมาช่วยทำให้ PWA ของเราให้สามารถทำงานอยู่บนแอปแอนดรอยด์ได้ง่ายขึ้น แต่ก่อนที่จะเริ่มสร้างแอปแอนดรอยด์สำหรับเว็ปของเรา ขอเล่าวิธีการทำ Digital Asset Links เพื่อทำให้เว็ปของเรากลายเป็น Trusted Web สำหรับแอปแอนดรอยด์ที่เราจะสร้างกันก่อน
บทความในชุดเดียวกัน
บทความนี้เหมาะกับ
นักพัฒนาที่มีเว็ปที่รองรับ PWA อยู่แล้ว และต้องการทำแอปแอนดรอยด์ด้วยการเปิดเว็ปโดยใช้ TWA แทนการใช้ WebView
Digital Asset Links คือ?
Digital Asset Links หรืออีกชื่อหนึ่งก็คือ App Linking ซึ่งเป็นการ Verify ระหว่างเว็ปกับแอปแอนดรอยด์เพื่อยืนยันว่าทั้งเว็ปและแอปมีเจ้าของเป็นคนเดียวกัน ทั้งนี้ก็เพื่อป้องกันการแอบอ้างหรือปลอมแปลงจากผู้พัฒนาอื่น ๆ ที่ไม่ประสงค์ดีนั่นเอง
การแอบอ้างหรือปลอมแปลงจากผู้พัฒนาอื่น ๆ — เช่น คุณมีเว็ปของตัวเองอยู่แล้ว แต่อยู่มาวันหนึ่งกลับมีนักพัฒนาที่ไหนไม่รู้สร้างแอปแอนดรอยด์ขึ้นมาเพื่อเปิดเว็ปคุณ แล้วแอบอ้างว่าเป้นแอปจากเว็ปของคุณเพื่อหาผลประโยชน์
ซึ่งการทำ Digital Asset Links จะมีผลต่อ Google Search บนแอนดรอยด์, การเปิด Deep Links บนแอนดรอยด์ รวมไปถึงการแชร์ Credential ระหว่างเว็ปและแอปด้วย
และแน่นอนว่าการจะทำเว็ปที่เป็น PWA ของเราให้กลายเป็น Trusted Web จะต้องทำ Digital Asset Links ด้วยนั่นเอง เพื่อให้เว็ปของเรารองรับการใช้ TWA บนแอปแอนดรอยด์ได้อย่างสมบูรณ์แบบ
วิธีการทำ Digital Asset Links
การทำ Digital Asset Links จะมีหลักการง่าย ๆ คือจะมีข้อมูลเพื่อใช้ในการ Verify ที่เรียกว่า Asset Statement โดยที่แต่ละฝั่งจะเก็บ Asset Statement ของอีกฝั่งไว้นั่นเอง
โดยที่ Asset Statement สามารถเก็บข้อมูลของอีกฝั่งได้มากกว่า 1 ชุด ดังนั้นการทำ Digital Asset Links จึงสามารถทำแบบ Many-to-many ได้ ไม่จำเป็นต้องทำแบบ One-to-one เสมอไป (ถ้าเป็นทีมพัฒนาขนาดใหญ่ที่มีเว็ปและแอปแอนดรอยด์หลายตัว)
ตัวอย่างข้อมูลใน Asset Statement
โดย Asset Statement ของฝั่งเว็ปที่เก็บข้อมูลของแอปแอนดรอยด์ไว้ จะอยู่ในรูปของ JSON ที่มีหน้าตาประมาณนี้
จะเห็นว่า Root ของ JSON เป็น Array จึงสามารถกำหนด Asset Statement สำหรับแอปแอนดรอยด์หลาย ๆ ตัวได้ตามใจชอบ
สิ่งที่นักพัฒนาจะต้องเป็นคนกำหนดเองก็คือ package_name (ของแอปแอนดรอยด์) และ sha256_cert_fingerprints (ของ Keystore ที่ใช้ตอน App Signing) ส่วนข้อมูลอื่นๆนอกเหนือจากนั้นจะเป็นรูปแบบที่ทาง Google กำหนดไว้
ส่วน Asset Statement ของฝั่งแอปแอนดรอยด์ที่จะเก็บข้อมูลของเว็ปจะอยู่ในรูปของ JSON เช่นกัน โดยจะมีข้อมูลแบบนี้
จะเห็นว่าข้อมูลค่อนข้างคล้ายกับฝั่งเว็ป แตกต่างกันที่ข้อมูลของเว็ปจะมีแค่ site เท่านั้น
และแน่นอนว่าถ้ามีหลายเว็ปก็เพิ่มข้อมูลเข้าไปแบบนี้ได้เลย
แต่ของแอปแอนดรอยด์จะไม่ได้เก็บเป็นไฟล์ JSON โดยตรง จะใช้วิธีเก็บข้อมูล JSON ไว้ใน String Resource อีกทีหนึ่ง ซึ่งเดี๋ยวจะอธิบายให้ทีหลัง
ต้องเก็บข้อมูล Asset Statement ไว้ที่ไหน?
สำหรับฝั่งเว็ป
จะต้องเก็บ JSON ของ Asset Statement ไว้ที่ https://<domain_name>/.well-known/assetlinks.json เท่านั้น (ไม่สามารถเปลี่ยนเป็น Path อื่น ๆ ได้) เพื่อให้ Google ทำการ Verified คู่กับแอปแอนดรอยด์
สำหรับฝั่งแอนดรอยด์
จะต้องเก็บ JSON ของ Asset Statement ไว้ใน String Resource (XML)
เพื่อใช้กำหนดค่าลงใน Metadata ของ Android Manifest ในภายหลัง
SHA256 Fingerprint ของแอปแอนดรอยด์ จะหาได้จากที่ไหน?
ในการ Build โปรเจคแอนดรอยด์ให้กลายเป็นไฟล์ APK จะต้องผ่านขั้นตอนที่เรียกว่า App Signing ด้วยเสมอ ซึ่งในขั้นตอนนี้จะต้องใช้ Keystore ด้วย โดย Keystore จะมีข้อมูลของ SHA256 Fingerprint เก็บไว้ และเราต้องอ่านค่าดังกล่าวออกมาจาก Keystore เพื่อใส่ไว้ใน Asset Statement ด้วย
ซึ่งวิธีการอ่านค่า SHA256 Fingerprint จาก Keystore ของแอนดรอยด์ จะต้องใช้สิ่งที่เรียกว่า Keytool ซึ่งเป็น Command Line Tools ของ JRE หรือ JDK ที่ติดตั้งไว้ในเครื่อง โดยแต่ละเครื่องอาจจะติดตั้งไว้คนละที่ ดังนั้นให้ตรวจสอบด้วยตัวเองว่าคอมพิวเตอร์ของคุณได้ติดตั้ง JRE หรือ JDK ไว้ที่ไหน
สำหรับ Keystore จะขอแบ่งออกเป็น 2 กรณีด้วยกัน
Debug Keystore สำหรับ Debug Build — APK ที่สร้างขึ้นมาเพื่อใช้ทดสอบระหว่างพัฒนา
บนโปรแกรมที่ให้พัฒนาแอปแอนดรอยด์อย่าง Android Studio จะสามารถสร้าง APK เพื่อใช้ในการทดสอบได้ ซึ่งจะเรียกว่า Debug APK ซึ่งนำไปอัปโหลดขึ้น Google Play ไม่ได้ โดย Android Studio จะใช้ Keystore ที่เรียกว่า Debug Keystore ซึ่งโปรแกรมจะทำการสร้างขึ้นมาให้โดยอัตโนมัติ และใช้ตอนสร้าง Debug APK เท่านั้น
ดังนั้นสำหรับแอปแอนดรอยด์ที่อยู่ในระหว่างการพัฒนาและทดสอบ จะต้องใช้ SHA256 Fingerprint จาก Debug Keystore โดยจะอยู่ที่
สำหรับ Linux/Mac OS : ~/.android/debug.keystoreสำหรับ Windows : C:\Users\<USERNAME>\.android\debug.keystore
โดย Debug Keystore จะมี Keystore Password, Key Alias และ Key Password กำหนดไว้ตายตัวเสมอ ดังนี้
Keystore Password : android
Key Alias : androiddebugkey
Key Password : androidดังนั้นคำสั่งสำหรับอ่านค่า SHA256 Fingerprint ของ Debug Keystore จะอยู่ในรูปแบบดังนี้
keytool -list -v -keystore <DEBUG_KEYSTORE_PATH> -storepass android -alias androiddebugkey -keypass androidยกตัวอย่างเช่น ผู้เขียนใช้ Mac OS จึงทำให้ Debug Keystore ถูกเก็บไว้ที่ ~/.android/debug.keystore จึงต้องใช้คำสั่ง
keytool -list -v -keystore ~/.android/debug.keystore -storepass android -alias androiddebugkey -keypass androidแล้วก็จะได้ข้อมูลจาก Keystore ออกมาทั้งหมดแบบนี้
จากตัวอย่างจะเห็นว่า SHA256 Fingerprint ใน Debug Keystore บนเครื่องคอมพิวเตอร์ของผมคือ
3E:FF:FF:FF:FF:FF:FF:A8:E7:FA:9E:79:3A:FF:71:BF:4E:CE:CA:5B:CB:02:0F:B5:07:9F:36:FF:FF:FF:FF:FFเพียงเท่านี้ก็จะได้ SHA256 Fingerprint เพื่อนำไปใส่ใน Asset Statement แล้ว
Signed Keystore สำหรับ Release Build — APK ที่สร้างขึ้นมาด้วย Keystore ของนักพัฒนาเพื่ออัปโหลด APK ขึ้น Google Play
จะแตกต่างจาก Debug Keystore ตรงที่นักพัฒนาจะเป็นคนสร้าง Signed Keystore ขึ้นมาเอง และตอนที่สร้างจะเป็นคนกำหนด Keystore Password, Key Alias และ Key Password เอง
ดังนั้นคำสั่งในการอ่านค่า SHA256 Fingerprint จาก Signed Keystore จะต้องกำหนดข้อมูลต่าง ๆ ด้วยตัวเองทั้งหมด
keytool -list -v -keystore <KEYSTORE_PATH> -storepass <KEYSTORE_PASSWORD> -alias <KEY_ALIAS> -keypass <KEY_PASSWORD>Statement List Generator and Tester — เครื่องมือช่วยสร้างและทดสอบ Asset Statements สำหรับฝั่งเว็ป
สำหรับฝั่งเว็ป ทาง Google ก็ได้เตรียมเครื่องที่เพื่อใช้ในการสร้าง Asset Statements ของแอปแอนดรอยด์ และสามารถใช้เครื่องมือดังกล่าวเพื่อทดสอบได้ด้วยว่า Google สามารถเข้าไปอ่านไฟล์ที่เก็บไว้บนเว็ปได้หรือไม่
เพียงเท่านี้ก็พร้อมสำหรับการสร้างแอปแอนดรอยด์แล้ว
เมื่อทำตามขั้นตอนทั้งหมดในบทความนี้ ตอนนี้ฝั่งเว็ปของเราก็ได้ทำ Digital Asset Links หรือ App Links เตรียมไว้เรียบร้อยแล้ว ส่วนฝั่งแอนดรอยด์จะเป็นการเตรียม Asset Statement ของเว็ปไว้เท่านั้น
เตรียมเว็ปของคุณไว้ให้พร้อม เพราะในบทความหน้าเราจะมาสร้างแอปแอนดรอยด์เพื่อเปิด PWA ของคุณด้วย TWA กันครับ
ถ้าชอบบทความแบบนี้ก็อย่าลืมกดติดตาม GDG Thailand ได้ทั้งใน Medium และ Facebook Page นะครับ 😉
