Iframe กับ การสร้าง Mini App architecture

ตอนนี้หันไปทางไหนเราก็จะเห็นสิ่งที่เรียกว่า Super App หรือ App ที่เป็น Platform เต็มไปหมด ปัจจัยนึงที่ทำให้ Application เหล่านี้เติบโตก็คือ Ecosystem ที่สามารถทำให้ Partner หรือ Developer สามารถพัฒนา Application ของตัวเองขึ้นม่าเชื่อต่อกับตัว App หลักได้ง่ายๆ หลายๆ Applicaiton ก็เลยเลือกที่จะสร้าง Feature ที่เรียกว่า Mini App ขึ้นมาเพื่อช่วยทำให้สะดวกมากขึ้น ถ้าใครนึกภาพไม่ออกให้ลองนึกถึง LIFF ของ LINE, Google Docs Add On, Facebook Game, Zoom App อย่างแรกขอให้เข้าใจกันก่อนว่าวันนี้เราจะไม่ได้มาเล่าว่าจะสร้าง Mini App ของแต่ละเจ้าทำยังไงแต่กลับกัน ผมจะมาเล่าว่า

ถ้า Application ของคุณอยากทำ Mini App เองหละจะต้องทำยังไง

โครงสร้างของ Mini App

โดยปกติแล้วเนี่ย Mini App ก็จะแสดงผลอยู่ใน Main Application อาจจะเป็นหน้าๆนึงหรือเป็น section นึงลอยในหน้าจอ

คราวนี้ตัว Mini App เองเนี่ย ถ้าลอยเฉยๆแต่ไม่สามารถ Communicate กับตัว Main Application ได้ ก็ไม่มีความจำเป็นอะไรที่จะต้องเป็น Mini App เพราะฉะนั้นแล้วตัว Mini App เองก็ต้องสามารถเข้าถึงข้อมูลบางอย่าง ของ Main Application ได้ หรือตัว Main Application เองต้องเข้าถึงข้อมูลของ Mini App ได้ด้วย นั้นการ Design เรื่อง Communication ระหว่าง Mini App กับ Main Application จึงเป็นเรื่องสำคัญมากๆ

ส่วนเรื่อง Interface เนี่ยต้องบอกว่า แต่ละเจ้าที่อยู่ในตลาดตอนนี้ก็มีแนวคิดต่างกันออกไปเยอะมากๆ เช่นส่วนใหญ่จะกำหนดขนาดชัดเจนเลยว่า Mini App จะกว้างเท่าไหร่ หรือสูงเท่าไหร่ หรือบางเจ้าก็กำหนดเลยว่าต้องใช้ UI แบบเดียวกับ ตัว Main Application นะ ซึ่งก็จะมี SDK มาให้เราใช้อีกทีแต่สำหรับเรื่อง UI เนี่ย ส่วนตัวผมแล้วคิดว่า ปล่อยอิสระง่ายที่สุด

ทำไมถึงเลือก Iframe และ Web?

ถ้าย้อนกลับไปที่โครงสร้างและแนวคิดแล้ว ก็คงไม่มีวิธีไหนที่จะดีไปกว่าการที่ให้ Mini App ถูกพัฒนาด้วย Web Technologies เพราะหลักๆคุณสมบัติที่เว็บมีเลยคือ เป็นสิ่งที่พัฒนาง่าย มีฐานนักพัฒนาเยอะ เข้ากันได้กับทุก Platform คราวนี้พอเป็นเว็บเนี่ย จะเอาเว็บไปรันบนอีกเว็บนึงได้เนี่ย ก็ไม่มีทางไหนวุ่นวายน้อยไปกว่าการใช้ iframe อีกแล้ว เพราะ Iframe และ Web เนี่ยมีคุณสมบัติตามที่เราต้องการพร้อมเลย

1. สามารถแสดงเว็บที่อยู่ คนละ origin ได้ (แต่ ปลายทางต้องไม่บล็อก)
2. Developer มีอิสระที่จะทำอะไรได้ง่ายมากๆ ใช้ภาษาอะไรก็ได้ UI อะไรก็ได้
3. สามารถเปิดช่องทาง Comunication ระหว่าง Parent page กับ Child page ได้เป็นแบบ Native
4. สามารถสร้าง Dev tools ได้ง่ายไม่ต้องพึ่งภา Environment อื่นๆ
5. สามารถทำ SDK เดียวกัน แต่ใช้ได้กับทุก Platform (Web, iOS, Android)

*เนื่องจากเขียน Android ไม่เป็นเอาว่ารอใครมาเขียนต่อและกันนะ..

การเชื่อมต่อระหว่าง Main App กับ Mini App ที่เป็น Iframe

พอเราพูดถึง Iframe จริงๆหลายๆคนอาจจะไม่รู้แต่เราสามารถทำให้ Iframe กับตัว Parent สามารถส่งข้อมูลหากันได้และเป็นช่องทาง ที่เป็นมาตรฐานด้วย นั่นคือ การใช้ function post message และ event message listener ซึ่งช่องทางนี้ก็ช่วยให้เราไม่ต้อง handle เรื่อง cross origin ด้วย โดยทั้งสอง ฝั่งทั้งตัว Main Application และตัว Mini App จะใช้ function เดียวกันคือ postMessage สำหรับ ส่งข้อความ และ addEventListener(‘message’) ในการรับข้อความ ตัวอย่าง code ก็ตามข้างล่างแบบนี้เลย

https://gist.github.com/thangman22/838e10405116fe4c50066df2e0f60213

เพียงแค่นี้เราก็สามารถส่งข้อมูลข้ามไปมาระหว่างตัว Mini App กับ ตัว Parent ได้แล้ว ส่วนถ้าจะทำเป็น การ เรียก Function บนตัว Parent App จาก Mini App ก็จะวุ่นวายหน่อย เราก็ต้อง Post Message ไปที่ตัว Parent เพื่อ Trigger function ก่อนส่ง Data กลับมา Implementation ก็จะประมาณนี้

https://gist.github.com/thangman22/9c0e48a13459a208e72d081db19b1f96

ความปลอดภัย

เวลาทำ MIni App เนี่ย สิ่งที่เราต้อง Concern น่าจะมีสอง Topic หลักๆ

Function ที่ถูกเรียก เรียกมาจาก Parent Application ตัวจริงใช่มั้ย?

วิธีที่ง่ายที่สุดคือ ทุกครั้งที่มี Function ถูกเรียก ก็ให้ Parent Application ส่ง Key แนบมาด้วยแล้วให้ฝั่ง Mini app มีหน้าที่ตรวจสอง Key ว่าถูกต้องหรือไม่ซึ่งอาจจะใช้วิธีเอา Key ส่งไป Verify กับ Server ก็ได้

เป็น Mini App ตัวจริง หรือเปล่า?

การปลอม Domain เพื่อมาสวม Mini App ก็เป็นสิ่งที่เกิดขึ้นได้ ซึ่ง เราสามารถทำได้หลายแบบพอสมควรเช่น ทำ Reverse Proxy ให้กับ Mini App หรือ ทำคล้ายๆกับ ข้างบนคือการส่ง Key กลับไปที่ Parent App ในการเรียกทุกครั้งเพื่อการ Verify request

ข้อมูลที่ส่งไป จะถูกดักได้หรือเปล่า?

จริงๆวิธีนี้เราสามารถให้ ตัว Parent App เข้ารหัสสิ่งที่เราจะส่งแล้วให้ตัว Mini App ค่อยส่งไปหา API เพื่อถอดรหัสออกมาได้ แต่เอาเข้าจริงแล้วด้วยความที่ ตัว ข้อมูลส่วนใหญ่อยู่บน Frontend อยู่แล้ว เราอาจจะไม่จำเป็นต้องทำก็ได้

SDK Only

จะเห็นว่าเวลาที่เราทำเนี่ยมันจะมี code ที่วุ่นวายพอสมควร ทั้งเรื่องการจัดการ postmesasge หรือ ตัวโครงสร้าง data ที่ส่งไปมาระหว่าง mini app และตัว parent app เพราะฉะนั้นแล้วหากต้องการ implement architecture นี้ “อย่าลืมทำ SDK” ส่วนตัวเคยเห็น Application นึงที่ให้เรา inplement postmessage กับ eventlistener เอง แบบนั้นวุ่นวายมากๆ