Nếu đã cài đặt Ứng dụng web tiến bộ (PWA) trên điện thoại Android gần đây, bạn có thể thấy biểu tượng của ứng dụng có nền trắng. Android 8.0 ra mắt biểu tượng thích ứng hiển thị các biểu tượng ứng dụng dưới nhiều hình dạng khác nhau trên thiết bị người mẫu. Các biểu tượng không sử dụng định dạng này có nền trắng.
Biểu tượng có thể che là một định dạng biểu tượng mới cho Chrome và Firefox giúp bạn Ứng dụng web tiến bộ sử dụng các biểu tượng thích ứng và mang lại cho bạn nhiều quyền kiểm soát hơn đối với biểu tượng.
Các biểu tượng hiện tại của tôi đã sẵn sàng chưa?
Vì các biểu tượng có thể che giấu cần hỗ trợ nhiều hình dạng, nên bạn cần cung cấp hình ảnh mờ có một số khoảng đệm mà trình duyệt có thể cắt theo yêu cầu hình dạng và kích thước cho mọi trình duyệt hoặc nền tảng.
Thông số kỹ thuật của biểu tượng che giấu bao gồm cả thông số chuẩn hoá "vùng an toàn tối thiểu" mà mọi nền tảng đều tôn trọng. Các phần quan trọng của biểu tượng, chẳng hạn như biểu trưng, phải nằm trong một vùng hình tròn ở giữa biểu tượng có bán kính bằng 40% chiều rộng biểu tượng. Cạnh 10% bên ngoài có thể là bị cắt bớt trên một số nền tảng.
Bạn có thể dùng Chrome để kiểm tra xem phần nào của biểu tượng nằm trong vùng an toàn Công cụ cho nhà phát triển. Khi Ứng dụng web tiến bộ đang mở, hãy chạy Công cụ cho nhà phát triển và điều hướng đến bảng điều khiển Application (Ứng dụng). Trong phần Biểu tượng, bạn có thể chọn Chỉ hiện khu vực an toàn tối thiểu cho các biểu tượng có thể che lấp. Thao tác này sẽ cắt các biểu tượng sao cho chỉ có thể nhìn thấy khu vực an toàn. Nếu biểu trưng của bạn hiển thị trong vùng an toàn này, biểu tượng đã sẵn sàng.
Để kiểm tra biểu tượng có thể che mờ của bạn với nhiều hình dạng Android khác nhau, hãy sử dụng Maskable.app. Mở một biểu tượng và Maskable.app sẽ giúp bạn thử nhiều hình dạng và kích thước, rồi chia sẻ bản xem trước với nhóm của bạn.
Làm cách nào để sử dụng biểu tượng có thể che khuất?
Để tạo biểu tượng có thể che mờ được dựa trên biểu tượng hiện có, bạn có thể sử dụng Trình chỉnh sửa Maskable.app. Tải biểu tượng của bạn lên, điều chỉnh màu và kích thước, sau đó xuất hình ảnh.
Sau khi tạo một biểu tượng có thể che giấu và kiểm thử biểu tượng đó trong Công cụ cho nhà phát triển, bạn cần cập nhật
tệp kê khai ứng dụng web để trỏ đến nội dung mới. Chiến lược phát hành đĩa đơn
tệp kê khai ứng dụng web cung cấp thông tin về ứng dụng web của bạn dưới dạng tệp JSON và
bao gồm một mảng icons.
Trường purpose cho trình duyệt biết biểu tượng của bạn sẽ được sử dụng như thế nào. Theo mặc định,
biểu tượng có mục đích là "any". Trong Android, các biểu tượng này được đổi kích thước trên màn hình
nền.
{
…
"icons": [
…
{
"src": "path/to/regular_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "any"
},
{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "maskable" // <-- New property value `"maskable"`
},
…
],
…
}
Để làm cho một biểu tượng có thể che mờ được, hãy đặt giá trị purpose của biểu tượng đó thành "maskable" để cho biết
nên sử dụng cùng với mặt nạ biểu tượng. Thao tác này sẽ xoá nền trắng và
giúp bạn kiểm soát tốt hơn giao diện của biểu tượng. Bạn cũng có thể chỉ định nhiều
các mục đích được phân tách bằng dấu cách (ví dụ: "any maskable") nếu bạn muốn
biểu tượng có thể chỉnh sửa để sử dụng mà không cần mặt nạ trên các thiết bị khác.
Xác nhận
Trang này do Joe Medley đánh giá.