Nếu đã cài đặt một Ứng dụng web tiến bộ (PWA) trên điện thoại Android đời mới, bạn có thể nhận 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ị biểu tượng ứng dụng ở nhiều hình dạng trên các mẫu thiết bị. Những 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, cho phép Ứng dụng web tiến bộ sử dụng biểu tượng thích ứng và giúp bạn kiểm soát nhiều hơn giao diện của biểu tượng.
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 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 của biểu tượng có thể che mờ bao gồm "vùng an toàn tối thiểu" được chuẩn hoá 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 biểu tượng. Cạnh ngoài 10% có thể bị cắt trên một số nền tảng.
Bạn có thể kiểm tra xem phần nào của biểu tượng nằm trong vùng an toàn bằng Chrome DevTools. Khi Ứng dụng web tiến bộ đang mở, hãy chạy DevTools và chuyển đến bảng điều khiển Application (Ứng dụng). Trong mục Biểu tượng, bạn có thể chọn Chỉ hiển thị khu vực an toàn tối thiểu cho các biểu tượng che mờ được. Thao tác này sẽ cắt bớt các biểu tượng của bạn để chỉ hiển thị 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, thì biểu tượng của bạn đã sẵn sàng.
Để kiểm thử biểu tượng có thể che bằng nhiều hình dạng Android, hãy sử dụng Maskable.app của Tiger Oakes. Mở một biểu tượng và Maskable.app sẽ cho phép bạn thử nhiều hình dạng và kích thước cũng như chia sẻ bản xem trước với nhóm của mình.
Làm cách nào để sử dụng biểu tượng có thể che?
Để tạo một biểu tượng có thể che dựa trên một biểu tượng hiện có, bạn có thể sử dụng Maskable.app Editor (Trình chỉnh sửa Maskable.app). Tải biểu tượng 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 và kiểm thử biểu tượng đó trong DevTools, 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 một 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 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"`
},
…
],
…
}
Để tạo một biểu tượng có thể che, hãy đặt giá trị purpose thành "maskable" để cho biết rằng biểu tượng đó sẽ được sử dụ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 giao diện của biểu tượng tốt hơn. 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 mặt nạ 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 xem xét.