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

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

Trường hợp kiểm tra biểu tượng có thể che của Lighthouse không thành công

Lighthouse sẽ gắn cờ các trang không hỗ trợ biểu tượng có thể che mờ:

Quy trình kiểm tra biểu tượng có thể che trong giao diện người dùng Báo cáo Lighthouse.

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

  • Phải có tệp kê khai ứng dụng web.
  • 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 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. Đặt 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 đang hiển thị chính xác. Xem bài viết Biểu tượng hiện tại của tôi đã sẵn sàng chưa?

Tài nguyên