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 hiển thị tuyệt vời 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 sẽ không tuân theo định dạng biểu tượng che mờ được được cung cấp nền trắng. Khi bạn sử dụng một thành phần che giấu biểu tượng, đảm bảo biểu tượng chiếm mọi không gian mà Android cung cấp.

Lý do không kiểm tra được biểu tượng có thể che giấu bằng Lighthouse

Lighthouse gắn cờ những trang không hỗ trợ biểu tượng có thể che giấu:

Kiểm tra biểu tượng có thể chỉnh sửa trong giao diện người dùng của Báo cáo Lighthouse.

Để vượt qua quy trình kiểm tra:

  • 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 khuất vào PWA của bạn

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

  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 bài viết 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