Hướng dẫn Flutter Web
Dùng Reso trên trình duyệt web tại app.resolive.com — tính năng Flutter Web, bố cục responsive, sidebar desktop, giới hạn so với ứng dụng di động và hỗ trợ trình duyệt.
Hướng Dẫn Flutter Web
Reso không chỉ có trên mobile — bạn còn có thể dùng trên web browser mà không cần cài app. Nhờ Flutter Web, cùng một codebase chạy trên cả điện thoại và trình duyệt, mang trải nghiệm Reso đến máy tính và tablet.
Truy cập Reso Web tại app.resolive.com.
Reso Web chạy Flutter Web — không phải web app riêng. Nghĩa là giao diện y hệt mobile app, nhưng adapt cho màn hình lớn. Cùng codebase, cùng feature, cùng tài khoản.
Tại sao dùng Reso Web?
| Lý do | Chi tiết |
|---|---|
| Không cần cài app | Mở trình duyệt, vào app.resolive.com, đăng nhập — xong. Phù hợp khi dùng máy công ty hoặc máy mượn. |
| Màn hình lớn | Desktop/tablet có không gian rộng hơn — chat, stream, dashboard hiển thị thoải mái hơn. |
| Đa nhiệm | Mở nhiều tab, vừa stream vừa làm việc khác. Mobile app chỉ full-screen một việc. |
| Keyboard/mouse | Dùng keyboard shortcut, click chính xác — nhanh hơn tap trên mobile cho một số thao tác. |
| Cross-platform | Chạy trên bất kỳ OS có browser — Windows, macOS, Linux, ChromeOS. Không cần build riêng. |
Cách truy cập
Mở trình duyệt
Mở browser hiện đại — Chrome, Safari, Firefox, Edge (bản mới nhất). Trên desktop hoặc tablet.
Vào app.resolive.com
Gõ app.resolive.com vào address bar. App Reso Web load.
Đăng nhập
Đăng nhập bằng phone OTP hoặc email/password — cùng tài khoản với mobile app. Dữ liệu sync giữa web và mobile.
Khám phá
App tự detect screen size và render layout phù hợp — desktop sidebar, tablet adaptive, mobile-like trên màn nhỏ.
Reso Web và mobile app cùng tài khoản — đăng nhập web không đăng xuất mobile, và ngược lại. Bạn có thể dùng cả hai cùng lúc (nhưng không recommend stream trên 2 thiết bị cùng lúc).
Bố Cục Responsive
Reso Web tự adapt layout theo screen width, với 3 breakpoint:
Layout y hệt mobile app — bottom navigation, full-screen stream, chat overlay. Phù hợp khi mở web trên điện thoại hoặc cửa sổ browser rất hẹp.
Layout adaptive — có thể hiển thị 2 cột (stream + chat side by side), navigation dạng compact. Tận dụng không gian tablet nhưng không quá rộng.
Layout full desktop — sidebar bên trái thay vì bottom navigation, stream + chat + info panel 3 cột, dashboard rộng rãi. Đây là layout tối ưu nhất cho Reso Web.
Desktop sidebar
Trên desktop (≥1024px), Reso Web hiển thị sidebar bên trái thay vì bottom navigation:
| Icon | Tab | Chức năng |
|---|---|---|
| 🏠 | Home | Live feed, stream đang phát |
| 🎧 | DJ Feed | Khám phá DJ, filter theo genre |
| 💬 | Chat | DM với DJ/follower |
| 🔔 | Notifications | Notification inbox |
| 👤 | Tôi | Profile, cài đặt, switch mode |
Sidebar luôn hiển thị (không ẩn), giúp chuyển tab nhanh mà không cần menu. Trên tablet, sidebar có thể collapse thành icon-only.
Breakpoint logic: Reso detect window.innerWidth lúc load và khi resize. Nếu bạn resize cửa sổ từ lớn sang nhỏ, layout tự switch từ desktop → tablet → mobile. Không cần refresh.
Tính Năng Flutter Web
Vì Reso Web là Flutter Web, nó kế thừa toàn bộ feature của mobile app:
| Feature | Web support | Ghi chú |
|---|---|---|
| Xem stream | ✅ Full | Agora RTC chạy trên web, độ trễ tương tự mobile |
| Chat realtime | ✅ Full | Chat hiển thị side panel trên desktop |
| Tip/gift | ✅ Full | Cùng ví, cùng giao dịch |
| Follow DJ | ✅ Full | Sync với mobile |
| Booking | ✅ Full | Đặt booking DJ trên web |
| DJ lên sóng | ⚠️ Hạn chế | Xem phần Limitations |
| Song requests | ✅ Full | Nhận và quản lý requests |
| Analytics | ✅ Full | Dashboard hiển thị tốt trên desktop |
| Profile/cài đặt | ✅ Full | Tất cả cài đặt tài khoản |
| eKYC | ✅ Full | Submit giấy tờ qua web |
Limitations so với mobile app
Mặc dù Flutter Web cover hầu hết feature, có một số giới hạn do bản chất web platform:
DJ lên sóng hạn chế
Phát sóng (broadcast) từ web không được khuyến nghị. Lý do: web browser hạn chế truy cập camera/mic, chất lượng stream thấp hơn mobile, và Agora RTC web SDK có độ trễ cao hơn. DJ nên lên sóng từ mobile app.
Push notification
Web có web push notification nhưng hạn chế hơn mobile — cần browser support, cần permission, và không reliable bằng mobile push (đặc biệt khi browser đóng). Khuyến nghị dùng mobile app nếu cần push ổn định.
Camera/mic permission
Trình duyệt hỏi permission camera/mic mỗi lần (hoặc mỗi session) — phiền hơn mobile (chỉ hỏi 1 lần). Một số browser chặn camera/mic trên insecure context (http) — Reso Web dùng https nên OK.
Hiệu Năng
Flutter Web render qua canvas/WebGL — nặng hơn native mobile. Trên máy yếu hoặc browser cũ, có thể lag. Desktop mạnh thì OK, nhưng tablet yếu có thể chậm.
Offline mode
Web không có offline mode — cần internet liên tục. Mobile app có cache một số dữ liệu, dùng được一段 thời offline.
File upload
Upload avatar, eKYC documents qua web hoạt động nhưng một số browser hạn chế file picker. Mobile app trải nghiệm mượt hơn.
Background audio
Khi tab browser ở background, audio stream có thể bị browser tắt (tab inactive). Mobile app phát audio nền ổn định hơn.
Tóm lại: Reso Web tuyệt vời cho xem stream, chat, tip, quản lý tài khoản, analytics. Nhưng nếu bạn là DJ muốn lên sóng, dùng mobile app — chất lượng stream tốt hơn đáng kể.
Hỗ Trợ Trình Duyệt
Reso Web hỗ trợ các browser sau:
| Browser | Version tối thiểu | Khuyến nghị |
|---|---|---|
| Chrome | 90+ | ✅ Tốt nhất — Flutter Web optimize cho Chromium |
| Edge | 90+ | ✅ Tốt (Chromium-based) |
| Safari | 14+ | ✅ Tốt trên macOS |
| Firefox | 88+ | ⚠️ OK, có thể chậm hơn Chromium |
| Samsung Internet | 14+ | ⚠️ Trên Android tablet |
| IE 11 / cũ | — | ❌ Không hỗ trợ |
Khuyến nghị: Dùng Chrome hoặc Edge mới nhất cho trải nghiệm tốt nhất. Safari OK trên Mac. Firefox hoạt động nhưng Flutter Web trên Firefox có thể chậm hơn với UI phức tạp.
Yêu cầu hệ thống
- RAM: Tối thiểu 4GB (khuyến nghị 8GB+)
- CPU: Bất kỳ CPU hiện đại (5 năm gần đây)
- Internet: Tối thiểu 5 Mbps (cho xem stream), 10+ Mbps khuyến nghị
- Screen: Bất kỳ, nhưng ≥1024px cho layout desktop tối ưu
Câu Hỏi Thường Gặp
Reso Web có phải PWA không? Reso Web có thể install như PWA (Add to Home Screen / Install App) trên Chrome/Edge — chạy fullscreen như app native. Nhưng vẫn là web, không thay thế mobile app hoàn toàn.
Tôi có thể stream (lên sóng) từ web không? Kỹ thuật thì có, nhưng không khuyến nghị. Web browser hạn chế camera/mic, chất lượng thấp, độ trễ cao. DJ nên dùng mobile app để lên sóng.
Web có tốn data nhiều không? Xem stream tốn data tương tự mobile — phụ thuộc chất lượng stream. Trên mobile data, cẩn thận. Trên Wi-Fi thì OK.
Tôi đăng nhập web rồi, mobile có bị đăng xuất không? Không. Web và mobile là session riêng — đăng nhập web không ảnh hưởng mobile. Bạn có thể dùng cả hai cùng lúc.
Web có hỗ trợ dark mode không? Reso Web kế thừa theme của mobile app — nếu app có dark mode, web cũng có. Toggle trong cài đặt (tab Tôi).
Tôi gặp lỗi trắng trang trên web, làm sao? Thử: (1) refresh (Ctrl+R / Cmd+R), (2) clear cache browser, (3) thử tab ẩn danh, (4) đổi browser. Nếu vẫn lỗi, liên hệ support@resolive.com kèm screenshot + browser version.
Quay lại tổng quan tài liệu hoặc xem Listener Guide / DJ Guide.