WRP - โปรโตคอลบริการ Protobuf สำหรับการสื่อสารระหว่าง WebView กับ Mobile Native
(twitter.com/hrmm_flow)ที่ Riiid เช่นเดียวกับสตาร์ทอัปอีกหลายแห่งที่เน้นแอปมือถือเป็นหลัก เราใช้วิธีพัฒนาหน้าจอที่ต้องให้บริการร่วมกันในแต่ละแพลตฟอร์มมือถือด้วยเว็บ แล้วนำไปใส่ในรูปแบบ WebView
แยกอีกทางหนึ่ง เพื่อให้รอบการพัฒนา WebView ทำได้รวดเร็ว เราก็สร้างหน้าเว็บมือถือเสมือนที่เลียนแบบ mobile native โดยใช้ iframe แทน WebView และนำมาใช้พัฒนาหน้าจอเว็บด้วยเช่นกัน
หน้าจอที่สร้างเป็นเว็บเพจนั้นมีอายุการใช้งานสั้นกว่า native และมีสิทธิ์เข้าถึง API อย่างจำกัด จึงหลีกเลี่ยงไม่ได้ที่จะต้องเขียนโค้ดสื่อสารกับตัวเปลือกที่ฝัง WebView อยู่ (native, parent window)
แต่ละฝั่งของตัวเปลือกกลับมีข้อจำกัดที่ใช้งานไม่สะดวกในอินเทอร์เฟซสำหรับสื่อสารกับ WebView (เช่น สื่อสารสองทางไม่ได้ หรือรองรับแค่การรันโค้ด JS ตามอำเภอใจเป็นชิ้น ๆ) แถมอินเทอร์เฟซของแต่ละตัวเปลือกก็แตกต่างกันมาก จึงทำให้การเขียนโค้ดสื่อสารเป็นเรื่องน่าเหนื่อย
เดิมทีเวลาเว็บ/ไคลเอนต์มือถือของเราสื่อสารกับเซิร์ฟเวอร์ API เราใช้เทคโนโลยี protobuf และ gRPC อยู่แล้ว โดย protobuf เป็นภาษา schema ที่ใช้บรรยาย service interface ส่วน gRPC เป็น protocol layer ที่เปลี่ยนคำขอเชิงนามธรรมซึ่งนิยามด้วย protobuf ให้กลายเป็น HTTP request จริง
เพราะเราใช้ protobuf สำหรับการสื่อสารกับแบ็กเอนด์อยู่แล้ว และวิศวกรก็คุ้นเคยกับมันดี เราจึงตัดสินใจมานานแล้วว่าจะใช้ protobuf เพื่อแก้ปัญหาของวิธีสื่อสาร WebView แบบเดิมและทำให้ workflow เป็นหนึ่งเดียวกัน
หลังจากพัฒนาแอปมือถือหลายตัวตลอดหลายปีที่ผ่านมา เราใช้แนวทาง codegen ของ protobuf กับการสื่อสารระหว่างตัวเปลือก <-> WebView มาโดยตลอด และล่าสุดระหว่างทำแอปใหม่ เราก็ตัดสินใจปรับปรุงเทคโนโลยีนี้และทำเป็นโอเพนซอร์ส
wrp จึงถือกำเนิดขึ้นจากพื้นหลังนี้ โดยเป็น protocol layer สำหรับ WebView โดยเฉพาะที่มีบทบาทคล้าย gRPC
wrp รองรับ typescript & react / kotlin & compose / swift & tca, stream, การสื่อสารสองทาง, ความสามารถในการกู้คืนบริบทการสื่อสารเมื่อเว็บเพจถูกโหลดใหม่ รวมถึงพอมีแนวทางรับมือในระดับหนึ่งกับสถานการณ์ที่ผู้ใช้อัปเดตเวอร์ชันแอป native ช้า จนเกิด protocol ไม่ตรงกันระหว่าง WebView กับแอป
ตอนนี้ฟีเจอร์หลักของ wrp เพิ่งพัฒนาเสร็จได้ไม่นาน จึงยังไม่เสถียรนัก แต่ถ้าใครสนใจเทคโนโลยีนี้ ก็อยากชวนเข้ามาคุยกันในเซิร์ฟเวอร์ Discord ของเรา
เซิร์ฟเวอร์ Discord ของ Pbkit: https://discord.gg/PHmV3nhvQq
Web - TypeScript & React
- ไลบรารี: https://github.com/pbkit/wrp-ts
- ตัวอย่าง: https://github.com/pbkit/pbkit.dev/blob/main/islands/WrpIframeHost.tsx
iOS - Swift & TCA
- ไลบรารี: https://github.com/pbkit/wrp-swift
- ตัวอย่าง: https://github.com/pbkit/wrp-swift/blob/main/Example/Wrp/WrpExampleServiceProvider.swift
Android - Kotlin & Compose
- ไลบรารี: https://github.com/pbkit/wrp-kt
- ตัวอย่าง: https://github.com/pbkit/wrp-kt/blob/main/example/src/main/kotlin/dev/pbkit/wrp/example/MainActivity.kt
(คัดลอกจากสิ่งที่เคยเขียนไว้บน Twitter มาเรียบเรียงแก้ไขเล็กน้อย)
https://twitter.com/disjukr/status/1537034296959315968
1 ความคิดเห็น