Nếu đã cài đặt mộ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 các biểu tượng thích ứng, hiển thị biểu tượng ứng dụng ở nhiều hình dạng khác nhau trên các mẫu thiết bị. 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 giấu là định dạng biểu tượng mới dành cho Chrome và Firefox, cho phép Ứng dụng web tiến bộ của bạn dùng biểu tượng thích ứng và giúp bạn có nhiều quyền kiểm soát hơn đối với giao diện của 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 một hình ảnh mờ có một số khoảng đệm mà trình duyệt có thể cắt theo hình dạng và kích thước bắt buộc cho mọi trình duyệt hoặc nền tảng.
Thông số kỹ thuật về biểu tượng có thể che giấu bao gồm một tiêu chuẩn "vùng an toàn tối thiểu" mà tất cả các nền tảng đều tuân thủ. 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 với bán kính bằng 40% chiều rộng của biểu tượng. Cạnh 10% bên ngoài có thể bị cắt trên một số nền tảng.
Bạn có thể kiểm tra xem phần biểu tượng nào nằm trong vùng an toàn bằng cách sử dụng Công cụ cho nhà phát triển của Chrome. Khi Ứng dụng web tiến bộ của bạn mở, hãy chạy Công cụ cho nhà phát triển và chuyển đến bảng điều khiển Ứng dụng. Trong phần Biểu tượng, bạn có thể chọn Chỉ hiển thị vùng an toàn tối thiểu cho các biểu tượng có thể che giấu. Thao tác này sẽ cắt bỏ các biểu tượng để chỉ hiển thị vùng an toàn. Nếu biểu trưng của bạn xuất hiện trong vùng an toàn này, thì biểu tượng đã sẵn sàng.
Để kiểm thử biểu tượng có thể che khuất của bạn với nhiều hình dạng Android, hãy sử dụng Maskable.app của hổ. Mở một biểu tượng và Maskable.app cho phép bạn dùng thử nhiều hình dạng và kích thước khác nhau cũng như 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 dựa trên biểu tượng hiện có, bạn có thể sử dụng Maskable.app Editor (Trình chỉnh sửa mặt nạ). Tải biểu tượng lên, điều chỉnh màu sắc 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 thành phần mới. Tệp kê khai ứng dụng web cung cấp thông tin về ứng dụng web của bạn trong tệp JSON và bao gồm một mảng icons.
Trường purpose sẽ cho trình duyệt biết cách sử dụng biểu tượng của bạn. Theo mặc định, các 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 nền trắng.
{
…
"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"`
},
…
],
…
}
Để một biểu tượng có thể che giấu, hãy đặt giá trị purpose thành "maskable" để cho biết rằng nên sử dụng biểu tượng này 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 có nhiều quyền kiểm soát hơn đối với giao diện của biểu tượng. Bạn cũng có thể chỉ định nhiều mục đích được phân tách bằng dấu cách (ví dụ: "any maskable") nếu muốn sử dụng biểu tượng có thể che phủ trên các thiết bị khác.
Xác nhận
Trang này do Joe Medley đánh giá.