Thương Hiệu
Kiểm soát giao diện ứng dụng cộng đồng trên màn hình chính của thành viên — từ biểu tượng họ nhấn đến màn hình chào họ thấy khi khởi động.
Tất cả cài đặt thương hiệu nằm trong Cài đặt → Ứng Dụng Di Động → Settings (sheet/tab Settings).
Biểu Tượng Ứng Dụng
Biểu tượng ứng dụng xuất hiện trên màn hình chính của thành viên và trong lời nhắc cài đặt trên trình duyệt.
Tải Lên Biểu Tượng Tùy Chỉnh
- Vào Cài đặt → Ứng Dụng Di Động → Settings.
- Trong phần Custom Icon, nhấn Upload icon (hoặc Change nếu đã có biểu tượng).
- Chọn tệp PNG, JPG hoặc SVG. Hộp thoại cắt ảnh sẽ mở ra.
- Cắt ảnh thành hình vuông rồi xác nhận.
- Bản xem trước biểu tượng cập nhật ngay lập tức ở hai kích thước: 128 px (màn hình chính) và 48 px (xem trước nhãn, Home screen).
- Nhấn Try It hoặc Publish để lưu — biểu tượng được tải lên CDN tại thời điểm đó.
Để quay lại logo cộng đồng, nhấn Reset to logo.
Nền Biểu Tượng
Chọn nền xuất hiện phía sau hình ảnh biểu tượng của bạn.
| Mẫu sẵn có | Loại | Màu sắc |
|---|---|---|
| White | Đồng nhất | #ffffff |
| Black | Đồng nhất | #000000 |
| Gray | Đồng nhất | #1f2937 |
| Blue | Chuyển màu | #3b82f6 → #1d4ed8 (135°) |
| Purple | Chuyển màu | #8b5cf6 → #6d28d9 (135°) |
| Teal | Chuyển màu | #14b8a6 → #0d9488 (135°) |
| Orange | Chuyển màu | #f97316 → #ea580c (135°) |
| Rose | Chuyển màu | #f43f5e → #e11d48 (135°) |
Nhấn vào bất kỳ ô màu nào để áp dụng ngay. Bạn cũng có thể cấu hình loại nền tùy chỉnh:
| Loại Nền | Tùy chọn |
|---|---|
| Solid | Bộ chọn màu đơn |
| Gradient | Màu bắt đầu, màu kết thúc, góc (0–360°) |
| Transparent | Không có nền; biểu tượng hiển thị trên nền trắng |
Thứ Tự Ưu Tiên Biểu Tượng (Manifest)
Khi tạo PWA manifest, biểu tượng được xử lý theo thứ tự sau:
- Biểu tượng PWA tùy chỉnh được tải lên qua Upload icon
- Logo cộng đồng từ cài đặt cộng đồng
- Dự phòng hệ thống (
/android-icon-192x192.png)
Manifest bao gồm biểu tượng 192 px (tất cả trình duyệt) và biểu tượng maskable 512 px (thiết bị Samsung/Google).
Màn Hình Chào
Màn hình chào hiển thị ngắn gọn khi ứng dụng đã cài đặt khởi động.
Các Trường
| Trường | Loại | Mặc định | Ghi chú |
|---|---|---|---|
| Enabled | Bật/tắt | BẬT | Tắt để bỏ qua hoàn toàn màn hình chào |
| Background Color | Bộ chọn màu + hex | #ffffff | Đặt nền màn hình chào |
| Loading Indicator | Bật/tắt | BẬT | Hiển thị loader 3 chấm động bên dưới logo |
| Icon Animation | Chọn (5 tùy chọn) | Pulse | Kiểu hiệu ứng logo khi khởi động |
Kiểu Hiệu Ứng
| Giá trị | Mô tả |
|---|---|
| pulse | Hiệu ứng thở opacity tinh tế |
| bounce | Chuyển động lên-xuống theo chiều dọc |
| fade | Mờ dần opacity trong 1,5 giây |
| scale | Phóng to từ 70% lên 100% |
| none | Tĩnh; không có hiệu ứng |
Bản xem trước dọc trực tiếp (180×320 px) cập nhật theo thời gian thực khi bạn thay đổi cài đặt.
Banner Cài Đặt
Banner cài đặt là lời nhắc xuất hiện trên trang cộng đồng, khuyến khích thành viên thêm ứng dụng vào màn hình chính.
Các Trường
| Trường | Loại | Mặc định | Độ dài tối đa | Ghi chú |
|---|---|---|---|---|
| Title | Nhập văn bản | Install {Tên Cộng Đồng} | 50 ký tự | Tiêu đề hiển thị trong banner |
| Description | Nhập văn bản | "Add to your home screen for quick access" | 100 ký tự | Phụ đề hiển thị bên dưới tiêu đề |
| Show on Public Page | Bật/tắt | BẬT | — | Hiển thị banner với người không phải thành viên trên trang đích công khai |
Bản xem trước banner trực tiếp hiển thị bên dưới các trường, cho thấy tiêu đề, mô tả, nút đóng (X) và biểu tượng ứng dụng với nền hiện tại.
Nếu Show on Public Page được BẬT, banner cài đặt sẽ hiển thị với người truy cập chưa phải thành viên. Điều này hữu ích để phát triển cơ sở người dùng đã cài đặt của cộng đồng.
Bước Tiếp Theo
- Tab Điều Hướng — Cấu hình tab nào xuất hiện trong thanh điều hướng dưới
- Xem Trước và Xuất Bản — Kiểm tra thương hiệu trong PWA Simulator trước khi xuất bản