WRP - giao thức dịch vụ Protobuf cho giao tiếp giữa WebView và mobile native
(twitter.com/hrmm_flow)Tại Riiid, cũng giống như nhiều startup khác lấy ứng dụng di động làm sản phẩm chủ lực, chúng tôi sử dụng cách phát triển bằng web cho các màn hình được cung cấp chung trên từng nền tảng di động rồi nhúng chúng dưới dạng WebView.
Ngoài ra, để rút ngắn vòng lặp phát triển WebView, chúng tôi cũng tạo các trang web di động ảo dùng cho việc phát triển giao diện web bằng cách dùng iframe thay cho WebView để mô phỏng mobile native.
Các màn hình được tạo bằng trang web có vòng đời ngắn hơn native và chỉ có quyền API hạn chế, vì vậy tất yếu sẽ phát sinh nhu cầu viết mã để giao tiếp với lớp vỏ chứa WebView (native, parent window).
Tuy nhiên, phía từng lớp vỏ lại có các ràng buộc bất tiện trong giao diện giao tiếp với WebView (chẳng hạn không hỗ trợ giao tiếp hai chiều hoặc chỉ hỗ trợ thực thi các đoạn mã js tùy ý), hơn nữa giao diện của mỗi lớp vỏ lại khác nhau khá nhiều, nên việc viết mã giao tiếp trở nên mệt mỏi.
Ban đầu, khi web/mobile client giao tiếp với máy chủ API, chúng tôi đã sử dụng các công nghệ protobuf và grpc. Protobuf là ngôn ngữ schema dùng để mô tả giao diện dịch vụ, còn grpc là lớp giao thức biến các request trừu tượng được định nghĩa bằng protobuf thành các request HTTP thực tế.
Vì chúng tôi đã dùng protobuf cho giao tiếp với backend và các kỹ sư cũng đã quen thuộc với nó, nên từ lâu chúng tôi đã quyết định dùng protobuf để giải quyết vấn đề của phương thức giao tiếp WebView hiện có nhằm thống nhất workflow.
Sau đó, trong nhiều năm phát triển nhiều ứng dụng di động, chúng tôi đã sử dụng phương thức phát triển codegen protobuf cho giao tiếp giữa lớp vỏ <-> WebView, và gần đây khi tạo một ứng dụng mới, chúng tôi quyết định cải tiến công nghệ này và mã nguồn mở nó.
WRP ra đời trong bối cảnh đó, là một lớp giao thức dành riêng cho WebView, đảm nhiệm vai trò tương tự grpc.
WRP hỗ trợ typescript & react / kotlin & compose / swift & tca, stream, giao tiếp hai chiều, khôi phục ngữ cảnh giao tiếp khi trang web được tải lại, đồng thời cũng có mức độ đối phó nhất định với các tình huống lệch giao thức giữa WebView và ứng dụng do người dùng cập nhật phiên bản native chậm.
Vì các chức năng chính của WRP mới chỉ vừa được phát triển xong nên chưa thật sự ổn định, nhưng nếu bạn quan tâm đến công nghệ này, chúng tôi rất mong bạn tham gia máy chủ Discord của chúng tôi để cùng trao đổi.
Máy chủ Discord của Pbkit: https://discord.gg/PHmV3nhvQq
Web - TypeScript & React
- Thư viện: https://github.com/pbkit/wrp-ts
- Ví dụ: https://github.com/pbkit/pbkit.dev/blob/main/islands/WrpIframeHost.tsx
iOS - Swift & TCA
- Thư viện: https://github.com/pbkit/wrp-swift
- Ví dụ: https://github.com/pbkit/wrp-swift/blob/main/Example/Wrp/WrpExampleServiceProvider.swift
Android - Kotlin & Compose
- Thư viện: https://github.com/pbkit/wrp-kt
- Ví dụ: https://github.com/pbkit/wrp-kt/blob/main/example/src/main/kotlin/dev/pbkit/wrp/example/MainActivity.kt
(Nội dung được chỉnh sửa nhẹ từ bài viết trên Twitter rồi đăng lại)
https://twitter.com/disjukr/status/1537034296959315968
1 bình luận