Tạo Manifest

Tạo Web App Manifest - Công Cụ Tạo Manifest.json Cho PWA

Công cụ toàn diện để tạo file Web App Manifest (manifest.json) cho Progressive Web Apps (PWA). Cấu hình metadata ứng dụng, icon, màu sắc, chế độ hiển thị và nhiều hơn nữa. Thiết yếu để làm cho ứng dụng web của bạn có thể cài đặt trên thiết bị di động và máy tính.

Web App Manifest là gì?

Web App Manifest là file JSON cho trình duyệt biết về Progressive Web App (PWA) của bạn và cách nó hoạt động khi được cài đặt trên thiết bị người dùng.

**Các Thành Phần Chính:**

**Thông Tin Cơ Bản:**
• name: Tên ứng dụng đầy đủ (vd: "Ứng Dụng Tuyệt Vời")
• short_name: Tên ngắn cho màn hình chính (tối đa 12 ký tự)
• description: Ứng dụng làm gì
• start_url: URL tải khi ứng dụng khởi chạy
• scope: Phạm vi điều hướng của ứng dụng

**Cài Đặt Hiển Thị:**
• display: Cách ứng dụng xuất hiện (standalone, fullscreen, v.v.)
• orientation: Ưu tiên hướng màn hình
• lang: Mã ngôn ngữ chính

**Bản Sắc Hình Ảnh:**
• theme_color: Màu giao diện trình duyệt
• background_color: Nền màn hình splash
• icons: Icon ứng dụng với nhiều kích thước
• screenshots: Ảnh xem trước ứng dụng

**Ví Dụ Manifest:**
```json
{
"name": "Ứng Dụng Tuyệt Vời",
"short_name": "UngDung",
"description": "Một ứng dụng tuyệt vời",
"start_url": "/",
"display": "standalone",
"theme_color": "#2196F3",
"background_color": "#ffffff",
"icons": [
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
```

**Tại Sao Sử Dụng:**
• Làm cho ứng dụng web có thể cài đặt
• Cung cấp trải nghiệm giống ứng dụng native
• Kiểm soát giao diện màn hình splash
• Định nghĩa bản sắc ứng dụng trong hệ điều hành
• Bắt buộc cho chức năng PWA
• Cải thiện sự tương tác của người dùng

**Hỗ Trợ Trình Duyệt:**
• Chrome/Edge: Hỗ trợ đầy đủ
• Safari: Hỗ trợ một phần (iOS 11.3+)
• Firefox: Hỗ trợ tốt
• Samsung Internet: Hỗ trợ đầy đủ

**Vị Trí:**
Đặt manifest.json trong thư mục gốc web và liên kết trong HTML:
```html
<link rel="manifest" href="/manifest.json">
```

Cách sử dụng Công cụ Tạo Manifest?

**Bước 1: Thông Tin Cơ Bản**

1. **Tên Ứng Dụng (Bắt Buộc):**
• Nhập tên ứng dụng đầy đủ
• Xuất hiện trong install prompt và danh sách ứng dụng
• Ví dụ: "Quản Lý Công Việc Pro"

2. **Tên Ngắn:**
• Tên viết tắt cho màn hình chính
• Tối đa 12 ký tự
• Ví dụ: "QLCongViec"
• Fallback về app name nếu không cung cấp

3. **Mô Tả:**
• Giải thích ngắn gọn về ứng dụng
• Xuất hiện trong app store và install prompt
• Ví dụ: "Quản lý công việc hiệu quả"

4. **URL Khởi Động:**
• URL tải khi ứng dụng khởi chạy
• Thường là "/" cho root
• Có thể là trang cụ thể: "/dashboard"

5. **Phạm Vi:**
• Định nghĩa ranh giới điều hướng
• URL trong phạm vi dùng chế độ app
• Ngoài phạm vi mở trong trình duyệt
• Thường là "/" để bao gồm toàn bộ site

**Bước 2: Cài Đặt Hiển Thị**

1. **Chế Độ Hiển Thị:**
• **Standalone** (khuyến nghị): Trông như ứng dụng native, không có UI trình duyệt
• **Fullscreen**: Toàn màn hình, không có thanh trạng thái
• **Minimal UI**: Điều khiển trình duyệt tối thiểu
• **Browser**: Tab trình duyệt thông thường

2. **Hướng Màn Hình:**
• **Bất Kỳ**: Cho phép xoay (mặc định)
• **Dọc**: Khóa theo chiều dọc
• **Ngang**: Khóa theo chiều ngang
• **Dọc/Ngang Chính**: Hướng cụ thể

3. **Ngôn Ngữ:**
• Mã ISO 639-1 (vi, en, es, fr, v.v.)
• Mặc định: en

**Bước 3: Chủ Đề & Màu Sắc**

1. **Màu Chủ Đề:**
• Màu giao diện trình duyệt (thanh địa chỉ, task switcher)
• Dùng color picker hoặc nhập mã hex
• Ví dụ: #2196F3 (xanh)
• Hiển thị trong thanh trạng thái Android

2. **Màu Nền:**
• Nền màn hình splash
• Nên khớp với nền chính của ứng dụng
• Ví dụ: #ffffff (trắng)
• Hiển thị khi ứng dụng đang tải

**Bước 4: Icon**

1. Nhấp nút "Thêm Icon"
2. Cho mỗi icon:
• **Image URL**: Đường dẫn đến file icon
• **Sizes**: Kích thước (192x192, 512x512)
• **Type**: Định dạng ảnh (PNG, JPEG, SVG)
• **Purpose**: Any, Maskable, Monochrome

**Icon Khuyến Nghị:**
• 192x192: Tối thiểu cho install prompt
• 512x512: Độ phân giải cao cho màn hình splash
• Maskable: Icon thích ứng (thiết kế safe zone)

**Bước 5: Ảnh Chụp Màn Hình (Tùy Chọn)**

1. Nhấp "Thêm Ảnh"
2. Cho mỗi ảnh:
• **Image URL**: Đường dẫn đến ảnh
• **Sizes**: Độ phân giải (1280x720, 750x1334)
• **Platform**: Wide (desktop) hoặc Narrow (mobile)
• **Label**: Mô tả màn hình

**Dùng Cho:**
• Install prompt
• App store
• Share sheet

**Bước 6: Thông Tin Bổ Sung**

1. **Danh Mục:**
• Danh sách cách nhau bởi dấu phẩy
• Có sẵn: business, education, entertainment, finance, fitness, food, games, health, lifestyle, music, news, productivity, shopping, social, sports, travel, utilities, v.v.

2. **IARC Rating:**
• ID đánh giá nội dung
• Tùy chọn, cho app store

**Bước 7: Tạo**

1. Nhấp "Tạo Manifest"
2. Xem lại JSON được tạo
3. Sao chép hoặc tải xuống dưới dạng manifest.json
4. Upload lên thư mục gốc web server
5. Liên kết trong HTML: `<link rel="manifest" href="/manifest.json">`

**Mẹo:**
• Dùng định dạng PNG cho icon (tương thích tốt nhất)
• Cung cấp nhiều kích thước icon
• Chọn màu chủ đề khớp với thương hiệu
• Test manifest với Lighthouse audit
• Xác thực với PWA Manifest Validator

Giải thích các chế độ hiển thị

**Chế Độ Hiển Thị:**

Chế độ hiển thị kiểm soát cách PWA của bạn xuất hiện khi khởi chạy từ màn hình chính.

**1. Standalone (Khuyến Nghị)**

**Giao Diện:**
• Trông như ứng dụng native
• Không có thanh địa chỉ trình duyệt
• Không có nút điều hướng trình duyệt
• Có thanh trạng thái (thời gian, pin, v.v.)
• Cửa sổ riêng trong task switcher

**Tốt Nhất Cho:**
• Hầu hết PWA
• Ứng dụng không cần tính năng trình duyệt
• Trải nghiệm giống native

**Ví Dụ:**
Twitter, Instagram, Spotify web app

**2. Fullscreen**

**Giao Diện:**
• Chiếm toàn bộ màn hình
• Không có thanh trạng thái
• Không có UI trình duyệt
• Không gian màn hình tối đa

**Tốt Nhất Cho:**
• Game
• Trình phát media
• Trải nghiệm immersive
• Presentation

**Ví Dụ:**
Game mobile, video player

**3. Minimal UI**

**Giao Diện:**
• Điều khiển trình duyệt tối thiểu
• Nút back/forward/reload
• Không có thanh địa chỉ để chỉnh sửa
• Nút refresh hiển thị

**Tốt Nhất Cho:**
• Ứng dụng cần điều khiển điều hướng
• Ứng dụng nhiều nội dung
• Ứng dụng đọc

**4. Browser**

**Giao Diện:**
• Tab trình duyệt thông thường
• UI trình duyệt đầy đủ
• Thanh địa chỉ
• Tất cả tính năng trình duyệt

**Tốt Nhất Cho:**
• Website
• Ứng dụng yêu cầu URL hiển thị
• Site nội dung

**Chuỗi Fallback:**

Nếu trình duyệt không hỗ trợ chế độ đã chọn, nó fallback:

fullscreen → standalone → minimal-ui → browser

Yêu cầu icon và thực hành tốt nhất

**Yêu Cầu Icon:**

**Yêu Cầu Tối Thiểu:**

**Yêu Cầu Kích Thước:**
• **192x192px**: Tối thiểu cho install prompt
• **512x512px**: Khuyến nghị cho màn hình splash
• Định dạng PNG (tương thích tốt nhất)
• Tỷ lệ khung hình vuông (1:1)

**Entry Manifest Cơ Bản:**
```json
"icons": [
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
```

**Bộ Icon Toàn Diện:**

**Kích Thước Khuyến Nghị:**
• 72x72: iOS nhỏ
• 96x96: Android nhỏ
• 128x128: Chrome Web Store
• 144x144: Windows nhỏ
• 152x152: iOS lớn
• 192x192: Android tiêu chuẩn
• 384x384: Android độ phân giải cao
• 512x512: Màn hình splash

**Mục Đích Icon:**

**1. Any (mặc định)**
```json
{
"src": "/icons/icon.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
}
```
• Icon tiêu chuẩn
• Không có xử lý đặc biệt
• Dùng mọi nơi

**2. Maskable**
```json
{
"src": "/icons/icon-maskable.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
```
• Icon thích ứng cho Android
• Nội dung trong safe zone (80% ảnh)
• Cạnh có thể bị cắt thành nhiều hình dạng
• Thiết kế với trọng tâm ở giữa

**Hướng Dẫn Icon Maskable:**
```
┌─────────────────────┐
│ Padding (10%) │
│ ┌───────────────┐ │
│ │ │ │
│ │ Safe Zone │ │ ← 80% kích thước
│ │ (80%) │ │
│ │ │ │
│ └───────────────┘ │
│ Padding (10%) │
└─────────────────────┘
```

Công cụ: https://maskable.app/

**3. Monochrome**
```json
{
"src": "/icons/icon-mono.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "monochrome"
}
```
• Icon một màu
• Dùng trong menu shortcut
• Quick action
• Thường là trắng trên trong suốt

**Định Dạng File:**

**PNG (Khuyến Nghị)**
• Tương thích tốt nhất
• Hỗ trợ trong suốt
• Nén lossless
• Hoạt động trên mọi nền tảng

**SVG**
• Có thể co giãn
• Kích thước file nhỏ
• Hỗ trợ hạn chế
• Dùng PNG fallback

**WebP**
• Định dạng hiện đại
• Nén tốt hơn
• Không được hỗ trợ phổ biến
• Dùng PNG fallback

**Hướng Dẫn Thiết Kế:**

**Chung:**
• Thiết kế đơn giản, dễ nhận biết
• Độ tương phản cao
• Tránh văn bản (trông xấu ở kích thước nhỏ)
• Test ở kích thước nhỏ
• Vuông, không phải chữ nhật
• Nền trong suốt hoặc đặc

**Màu Sắc:**
• Dùng màu thương hiệu
• Đảm bảo độ tương phản
• Test trên nền sáng và tối
• Tránh gradient (có thể trông xấu khi scale)

**Test:**
• Test trên thiết bị thật
• Xem trong app drawer
• Kiểm tra trên nhiều hình dạng Android
• Xác minh giao diện màn hình splash

**Lỗi Thường Gặp:**

❌ Quá nhiều chi tiết (không đọc được ở kích thước nhỏ)
❌ Văn bản trong icon (không rõ)
❌ Không test maskable safe zone
❌ Tỷ lệ khung hình sai
❌ Nguồn độ phân giải thấp
❌ Chỉ một kích thước icon
❌ Quên trong suốt
❌ Dùng JPEG (không trong suốt)

✓ Thiết kế đơn giản, đậm
✓ Độ tương phản cao
✓ Test ở nhiều kích thước
✓ Cung cấp nhiều độ phân giải
✓ Dùng PNG với trong suốt
✓ Test maskable safe zone
✓ Tối ưu kích thước file

Tùy chọn danh mục và metadata

**Danh Mục:**

Danh mục giúp người dùng khám phá PWA của bạn trong app store và tìm kiếm.

**Danh Mục Có Sẵn:**

**Kinh Doanh & Năng Suất:**
• business (kinh doanh)
• productivity (năng suất)
• finance (tài chính)
• education (giáo dục)
• utilities (tiện ích)

**Giải Trí & Media:**
• entertainment (giải trí)
• games (trò chơi)
• music (âm nhạc)
• photo (ảnh)
• video (video)

**Phong Cách Sống:**
• food (ẩm thực)
• health (sức khỏe)
• fitness (thể dục)
• lifestyle (phong cách sống)
• sports (thể thao)
• travel (du lịch)

**Thông Tin:**
• books (sách)
• magazines (tạp chí)
• news (tin tức)
• weather (thời tiết)

**Xã Hội & Giao Tiếp:**
• social (xã hội)
• personalization (cá nhân hóa)

**Chuyên Biệt:**
• government (chính phủ)
• kids (trẻ em)
• medical (y tế)
• navigation (điều hướng)
• politics (chính trị)
• security (bảo mật)
• shopping (mua sắm)

**Cách Dùng:**
```json
"categories": ["business", "productivity", "finance"]
```

**Hướng Dẫn:**
• Tối đa 3-5 danh mục
• Chọn liên quan nhất
• Sắp xếp theo tầm quan trọng
• Đừng spam danh mục
• Chính xác

**Danh Mục Theo Loại Ứng Dụng:**

**Thương Mại Điện Tử:**
["shopping", "lifestyle"]

**Quản Lý Công Việc:**
["productivity", "business"]

**Chỉnh Sửa Ảnh:**
["photo", "utilities"]

**Site Tin Tức:**
["news", "magazines"]

**Ứng Dụng Thể Dục:**
["health", "fitness", "lifestyle"]

**Trình Phát Nhạc:**
["music", "entertainment"]

**Ứng Dụng Công Thức:**
["food", "lifestyle"]

**Ứng Dụng Ngân Hàng:**
["finance", "business"]

**Thực Hành Tốt Nhất:**

✓ Chọn danh mục chính xác
✓ Đừng phân loại quá mức
✓ Nhận đánh giá IARC nếu hướng đến trẻ em
✓ Dùng shortcut cho hành động phổ biến
✓ Test share target kỹ lưỡng
✓ Validate cú pháp manifest

Tính Năng Chính

• Tạo Web App Manifest đầy đủ
• Hỗ trợ tất cả thuộc tính manifest
• Color picker trực quan
• Nhiều entry icon
• Cấu hình screenshot
• Chọn chế độ hiển thị
• Ưu tiên hướng màn hình
• Chọn danh mục
• Hỗ trợ IARC rating
• Hỗ trợ maskable icon
• Xác thực cú pháp JSON
• Output được format đẹp
• Sao chép manifest vào clipboard
• Tải xuống dưới dạng manifest.json
• Best practice PWA
• Xử lý 100% phía client
• Không gửi dữ liệu đến server
• Giao diện thân thiện mobile
• Hỗ trợ dark mode
• Miễn phí và không giới hạn