UTILS.
100% trong trình duyệt
📱

Trình tạo Web App Manifest (PWA)

Tạo web app manifest PWA hợp lệ (manifest.json) với icon, màu chủ đề và chế độ hiển thị, cùng thẻ link rel=manifest sẵn để dán.

— kết quả hiển thị ở đây —
— kết quả hiển thị ở đây —

Về công cụ này

Trình tạo Web App Manifest dựng một manifest.json hợp lệ cho một Progressive Web App từ một biểu mẫu đơn giản, rồi trao cho bạn các thẻ HTML đi kèm để thả vào <head> trang của bạn. Mọi thứ được lắp ráp trong trình duyệt và không có gì được tải lên — bạn có thể sao chép JSON, tải nó về dưới dạng manifest.json, hoặc sao chép các thẻ link và meta.

Web app manifest là tệp JSON cho phép một trang được cài đặt lên màn hình chính và khởi chạy như một ứng dụng gốc. Công cụ này lắp ráp các khóa chuẩn — name, short_name, description, start_url, scope, display (standalone, fullscreen, minimal-ui hoặc browser), orientation, theme_color, background_color và một mảng icons — bỏ bất kỳ trường nào bạn để trống để đầu ra gọn gàng. Mỗi cỡ icon bạn tích trở thành một mục với src, sizes và type (suy ra từ phần mở rộng tệp), và purpose tùy chọn cho phép bạn đánh dấu icon là maskable. Kết quả được tuần tự hóa bằng JSON.stringify với thụt lề hai dấu cách, nên nó dễ đọc với người và tuân thủ tiêu chuẩn.

Dùng placeholder {size} trong đường dẫn icon (ví dụ /icons/icon-{size}.png) và nó được thay bằng mỗi kích thước như 192x192 và 512x512. Tối thiểu một manifest nên gồm một name, một start_url, một chế độ display và ít nhất một icon 192px và 512px, đó là các giá trị mặc định ở đây. Tham chiếu nó từ trang của bạn bằng thẻ <link rel="manifest"> đã tạo và thêm meta theme-color cho giao diện trình duyệt.

Câu hỏi thường gặp

Web app manifest là gì?
Đó là một tệp JSON mô tả Progressive Web App của bạn — tên, icon, màu sắc và cách nó nên khởi chạy — để trình duyệt có thể đề nghị cài đặt nó lên màn hình chính và mở nó trong một cửa sổ giống ứng dụng.
Những trường nào là bắt buộc?
Một manifest hữu ích cần ít nhất name (hoặc short_name), một start_url, một chế độ display và các icon 192x192 và 512x512. Trình tạo này điền các trường đó theo mặc định; các trường khác là tùy chọn và được bỏ khi để trống.
'maskable' nghĩa là gì đối với icon?
Icon maskable có phần đệm an toàn để các nền tảng có thể cắt chúng thành hình tròn, squircle hoặc hình vuông bo góc mà không cắt mất logo của bạn. Đặt purpose thành 'maskable' hoặc 'any maskable' cho các icon được thiết kế với vùng an toàn đó.
Làm sao để cài manifest trên trang của tôi?
Lưu JSON dưới dạng manifest.json, tải nó lên trang của bạn, rồi thêm thẻ <link rel="manifest" href="/manifest.json"> đã tạo và các thẻ meta theme-color vào <head> của mọi trang.

Công cụ khác