Tệp kê khai không có biểu tượng che mờ được

Biểu tượng có thể che giấu là định dạng biểu tượng mới, đảm bảo biểu tượng PWA của bạn trông đẹp mắt trên tất cả các thiết bị Android. Trên các thiết bị Android mới hơn, biểu tượng PWA không tuân theo định dạng biểu tượng có thể che giấu sẽ có nền trắng. Khi bạn sử dụng một biểu tượng có thể che giấu, biểu tượng đó sẽ đảm bảo rằng biểu tượng đó sẽ chiếm toàn bộ không gian mà Android cung cấp.

Cách thức kiểm tra biểu tượng có thể che giấu bằng Lighthouse không thành công

Các trang gắn cờ Lighthouse không hỗ trợ biểu tượng có thể tạo mặt nạ:

Kiểm tra biểu tượng có thể che giấu trong giao diện người dùng của Báo cáo Lighthouse.

Để vượt qua quy trình kiểm tra, hãy làm như sau:

  • Tệp kê khai ứng dụng web phải tồn tại.
  • Tệp kê khai ứng dụng web phải có một mảng icons.
  • Mảng icons phải chứa một đối tượng có thuộc tính purpose và giá trị của thuộc tính purpose đó phải bao gồm maskable.

Cách thêm tính năng hỗ trợ biểu tượng có thể che giấu vào PWA

  1. Sử dụng Maskable.app Editor để chuyển đổi một biểu tượng hiện có thành biểu tượng có thể che.

  2. Thêm thuộc tính purpose vào một trong các đối tượng icons trong tệp kê khai ứng dụng web. Thiết lập giá trị của purpose thành maskable. Xem phần Giá trị.

    {
  …
  "icons": [
    …
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
  …
}

  3. Sử dụng Công cụ của Chrome cho nhà phát triển để xác minh rằng biểu tượng có thể che giấu đang hiển thị chính xác. Hãy xem phần Các biểu tượng hiện tại của tôi đã sẵn sàng chưa?

Tài nguyên