@digiforce-nc/plugin-digiforce-mobile

Plugin hỗ trợ mobile — tối ưu giao diện và trải nghiệm Digiforce cho thiết bị di động, bao gồm mobile layout, PWA, push notification và native app support.

Plugin này làm gì?

Giao diện desktop không phù hợp trên màn hình nhỏ. Plugin cung cấp mobile-optimized experience: layout responsive, bottom navigation, touch-friendly controls, PWA support (offline, add to home), và tích hợp push notification — biến Digiforce thành ứng dụng mobile native-like.

Sáu tính năng chính

#	Tính năng	Chi tiết
1	Mobile layout	Layout tối ưu cho màn hình nhỏ, tự detect viewport
2	Bottom navigation	Thanh điều hướng dưới cùng (thay sidebar desktop)
3	Touch gestures	Swipe left/right, pull-to-refresh, long press menu
4	PWA	Progressive Web App: offline cache, add to home screen, app-like UX
5	Responsive forms	Form tự điều chỉnh layout: stacked fields, larger touch targets
6	Push notification	Thông báo đẩy qua browser notification API

---

Kiến trúc

Phát hiện và chuyển đổi layout

PWA Service Worker

Tính năng	Chi tiết
Cache strategy	Network-first cho API, cache-first cho static assets
Offline	Hiển thị cached data khi mất mạng, queue request để sync lại
Install prompt	Hiển thị "Add to Home Screen" khi user truy cập thường xuyên
Background sync	Sync queued data khi có mạng trở lại

Push notification flow

Thành phần client

Thành phần	Mô tả
MobileLayout	Layout wrapper cho mobile (thay thế desktop layout)
BottomNavBar	Thanh điều hướng dưới cùng với icon + label
MobileFormRenderer	Render form tối ưu cho mobile (stacked, larger inputs)
PullToRefresh	Component kéo xuống để refresh danh sách
SwipeNavigator	Điều hướng bằng swipe gesture
PWAInstallPrompt	Prompt cài đặt PWA lên home screen

Dependencies

Package	Vai trò
@digiforce-nc/client	Client UI framework
@digiforce-nc/server	Server framework (push notification API)

Mục lục chi tiết

(Xem trang tổng quan ở trên)