แนะนำวิธีเช็คว่า LIFF App ของเรากำลังรันอยู่ใน LINE In-App Browser หรือไม่?

สวัสดีครับ บทความนี้สั้นๆ จะมาขอแนะนำวิธีการเช็คว่า LIFF (LINE Frontend Framework) ของเรากำลังรันอยู่ที่ LINE In-App Browser อยู่หรือไม่ ?

ผมเชื่อว่า หลายๆ LIFF App อาจมีการ Implement Features ที่แตกต่างกันเวลาที่แอพถูกรันอยู่ในแต่ละ Platform เช่น บน LINE App และ Mobile Browser อาจมีการ design UI แบบหนึ่ง ส่วนบน Desktop Browser ก็อาจจะ design UI ไปในอีกแบบหนึ่งตามความเหมาะสมของการใช้งาน

ซึ่งถ้าเราอยากจะเช็คว่า LIFF App เรากำลังรันอยู่ใน Platform ไหนก็คงเช็คได้ไม่ยากโดยใช้ LIFF SDK API ต่างๆ ได้ เช่น

• liff.isInClient() ใช้เช็คได้ว่า LIFF App ของเราถูกรันอยู่ใน LINE App หรือไม่ ? ซึ่งถ้า return true ก็แปลว่ากำลังรันอยู่ใน LINE App แบบ Auto-Login ให้ User แล้วด้วย
• liff.getOS() ใช้เช็คได้ว่า LIFF App ของเราถูกรันอยู่ใน OS ใด ? ถ้า return ios แปลว่ารันอยู่ใน iPhone ถ้า return android ก็คือรันอยู่ในมือถือที่เป็น android และถ้า return web ก็แปลว่ากำลังรันอยู่ใน Desktop Browser

แต่มันมีอีก 1 Platform ที่หลายคนอาจจะลืมไปว่ามันมีอยู่ นั่นก็คือ “LINE In-App Browser” ซึ่งปกติ ถ้า User มีการกดคลิกลิ้งค์จากใน LINE โดยที่เป็นลิ้งค์ที่ไม่ใช่ LIFF Permanent Link แล้ว มันก็จะเปิดลิ้งค์นั้นบน In-App Browser ของ ​LINE เป็นค่า default ครับ

ตัวอย่าง Link ที่เปิดใน LINE In-App Browser

คำถามก็คือ ถ้าเราอยากจะ detect ว่าตอนนี้ LIFF App ของเรากำลังรันอยู่ใน LINE In-App Browser หรือไม่ จะเช็คยังไงดี? เราสามารถเช็คได้ง่ายๆ แบบนี้ครับ

เนื่องจากว่า เวลาที่รัน LIFF App ใน LINE In-App Browser นั้น ค่าของ liff.isInClient() จะ return false กลับมา และค่าของ userAgent ใน LINE In-App Browser นั้นจะมีการใส่คำว่า Line เข้าไปอยู่ เราจึงสามารถใช้สองค่านี้ในการ detect ได้ว่า LIFF App ของเรากำลังรันอยู่ใน LINE In-App Browser หรือไม่? ได้เลยครับ

ซึ่งบางครั้งเราอาจจะไม่อยากให้ User ใช้งาน App เราบน LINE In-App Browser ด้วยเหตุผลบางอย่าง เช่นอาจมีบาง Web API ที่ไม่รองรับ ซึ่ง Use Case ที่ผมเคยเจอคือ liff.shareTargetPicker() ไม่สามารถใช้งานได้บน LINE In-App Browser เป็นต้น หรือจะเป็น UI Design ของแอพอาจไม่เหมาะกับ In-App Browser เราก็สามารถที่จะ Lead ให้ User กดเพื่อเปิดแอพของเราใน Platform อื่นที่ไม่ใช่ LINE In-App Browser ได้

เช่นในตัวอย่างโค้ดด้านล่างนี้ ผมจะเช็คว่า ถ้าเกิดว่ามีการเปิด LIFF App บน LIFF In-App Browser จะทำการ render ปุ่มให้ User สามารถเปิด LIFF App เราบน LINE Native App แทนได้ เป็นต้น

เปิด LIFF App จาก LINE In-App Browser -> LINE Webview

หวังว่าบทความนี้จะเป็นประโยชน์กับนักพัฒนา LIFF App ทุกท่านนะครับ สามารถดูตัวอย่าง Code ทั้งหมดได้จากลิ้งค์ด้านล่างนี้เลยครับ