Xin chào các bạn, lại là mình đây. Hôm nay mình sẽ viết về một chủ đề khá mới đó là MiniApp. Nhưng trong phạm vi bài viết mình chỉ đề cập đến ứng dụng của MiniApp trên Passio thôi nhé.
I. Trước khi bắt đầu, chúng ta cùng tìm hiểu xem MiniApp là gì?
Theo một định nghĩa từ một blog được chia sẻ từ W3C, MiniApp là một định dạng ứng dụng di động mới, một giải pháp kết hợp giữa công nghệ web và các công nghệ từ app native. (Link)
Đọc qua đến đây thì có bạn sẽ hỏi lại: Wait! vậy thì MiniApp khác gì với Progressive Web App (PWA) mà chúng ta đang làm nhỉ? 🤔
Nó có khác nhé bạn tôi, và đây là những điểm làm cho nó khác biệt:
| Feature | Progressive Web App | MiniApp |
| Source code | Standard markup languages (HTML), stylesheets (CSS), and scripts (JavaScript). | Non-standard dialects of HTML, CSS and JavaScript |
| Deployed Format | Web resources (mainly: HTML, CSS, JavaScript code, and WebAssembly modules) | HTML, CSS, JavaScript, and other resources packed in a ZIP container. |
| Packaging | No. Resources linked on the Web. | Yes. Different package formats per vendor. |
| Needs to host files on Web server | Yes | No |
| Installation-free usage | Yes, running in the browser. | Running in a super app or on the OS. |
| Installation with standalone icon | From the browser or app marketplace (optional) | No |
| Services | Access to Web APIs | Access to non-standard Web APIs, including some system native APIs |
Điểm khác biệt lớn nhất đó chính là source code khi triển khai sẽ được đóng gói lại và lưu ở một store do chính mình tạo ra. Khi khởi chạy sẽ được Super App tải về để chạy. Hiểu một cách đơn giản hơn thì cách thức triển khai của MiniApp gần giống với Super App. Source code sẽ nằm offline ở thiết bị người dùng cuối, nghĩa là mini app hoàn toàn có thể chạy offline, nhận noti, mở native page, v.v… không khác gì 1 native page cả.
Okie, vậy thì MiniApp có đặc điểm gì nổi bật và nó khác gì với các công nghệ hiện tại chúng ta đang có?
- MiniApp thường có kích thước được tinh gọn và rất nhỏ (kích thước sau khi đóng gói khoảng 2~4 Mb)
- Được chạy trên 1 ứng dụng native hay còn gọi là Super App
- Được cung cấp một số tính năng từ Super App giúp 2 môi trường giao tiếp qua lại với nhau.
- Được cài đặt và triển khai tức thì, không phụ thuộc vào các Store của Super App.
- Mang lại trải nghiệm gần nhất với app native (mặc dù được coding bằng js và css)
- Hoạt động được trên nhiều nền tảng, v.v…
Anh em không kịp tham gia buổi sharing của mình hôm 29/05/2024 có thể xem lại nội dung ở file slide này, cũng như tham khảo source code demo mà mình gắn đây nhé:
Slide: https://docs.google.com/presentation/d/1DUyEp5OQISZcWbIl1ls2esbI28FwNYHvlEsZ5jBJwJM/view
Source code demo: https://bitbucket.org/hokoteam/miniapp/src/main/
Sau đây là những chia sẻ cụ thể hơn của mình nếu sử dụng công nghệ này cho Passio App nói riêng và sản phẩm Passio nói chung.
II. Ứng dụng MiniApp vào Passio
Mình sẽ điểm qua các mặt thuật lợi và sau đó là các khó khăn sẽ gặp phải khi triển khai.
Thuận lợi thì dễ rồi…
- Các công nghệ chính team mình gần như là đã handle được: Flutter (native app), ReactJS (frontend), backend, cached, …
- MiniApp sẽ được phân phối tức thì mà không cần phải thông qua cơ chế xét duyệt app của các Stores nữa.
- Sử dụng web nhưng vẫn truy cập được gần như toàn bộ các api từ Super App.
- Sử dụng kết hợp được các cơ chế sẵn có từ Super App như xác thực, cache, local storage, …
- Thời gian phát triển có thể ngắn hơn và việc tái sử dụng source code cũng cao hơn.
- Vân vân và vân vân….
Vậy thì khó khăn là gì?
Khó khăn nhất chính là phải xây dựng được môi trường phát triển các MiniApp. Chúng ta sẽ phải có IDE, giả lập app, SDK để mini app có thể giao tiếp được với Super App. Ý tưởng của mình cho các thành phần đó như sau:
- IDE: mình sẽ chọn open source là VS Code để dựng lên được 1 cái IDE có tích hợp giả lập app và debug. Source này chủ yếu là javascript nên cũng dễ để triển khai. Các điểm mạnh của IDE này thì anh em cũng đã trải nghiệm rồi đúng không?
- Giả lập app thì mình sẽ dùng luôn tính năng build app cho web. Giới hạn của giả lập này đó là sẽ không thể dùng được các api bắt buộc phải chạy bằng thiết bị thật.
- Đòi hỏi sự phối hợp giữa các team chặt chẽ hơn và (maybe) team app sẽ đóng vai trò là platform còn các team sẽ phụ trách phát triển MiniApp 😱
Hiện tại có thể triển khai ở các module tính năng nào?
Ở thời điểm hiện tại (giai đoạn cuối H1 và đầu H2) dễ thấy nhất có thể là các tính năng phần TikTok Affiliate Partner (TAP). Chúng ta có thể dựng các màn hình như listing sản phẩm TAP, chi tiết sản phẩm, chi tiết shop, tìm kiếm, report … bằng MiniApp.
Việc điều hướng sẽ được Super app căn cứ vào id scheme của chính MiniApp đó để truy cập.
passio://miniapp.dgd9kjl43judndnas8923321/pages/tap-detail?id=3812973Ae quan tâm có thể checkout các tài liệu tham khảo dưới đây để biết thêm thông tin nhé:
https://w3c.github.io/miniapp-white-paper/#what-is-miniapp
https://www.w3.org/2021/03/miniapp-cjk/slides/tengyuan.pdf
https://w3c.github.io/miniapp-white-paper/components-comparison.html
https://web.dev/articles/mini-apps/mini-app-about
Hy vọng các POs sẽ quan tâm đến phần này và lựa chọn làm một phần công nghệ để triển khai vào các tính năng phù hợp. Cảm ơn ae đã dành thời gian theo dõi, bye bye và hẹn gặp lại ở các chủ đề sau.
