ไอคอนที่มาสก์ได้คือไอคอนรูปแบบใหม่เพื่อให้ไอคอน PWA ของคุณมีลักษณะ เหมาะกับอุปกรณ์ Android ทุกชนิด ในอุปกรณ์ Android รุ่นใหม่ๆ ไอคอน PWA ไม่เป็นไปตาม รูปแบบไอคอนที่มาสก์ได้จะมีพื้นหลังสีขาว เมื่อใช้มาสก์ได้ ไอคอนนี้ทำให้มั่นใจได้ว่าไอคอนจะใช้พื้นที่ทั้งหมดที่ Android มีให้
วิธีที่การตรวจสอบไอคอนที่มาสก์ได้ของ Lighthouse ล้มเหลว
Lighthouse ทำเครื่องหมายหน้าที่ไม่รองรับไอคอนที่มาสก์ได้
หากต้องการผ่านการตรวจสอบ ให้ทำดังนี้
- ต้องมีไฟล์ Manifest ของเว็บแอป
- ไฟล์ Manifest ของเว็บแอปต้องมีอาร์เรย์
icons - อาร์เรย์
iconsต้องมีออบเจ็กต์ 1 รายการที่มีพร็อพเพอร์ตี้purposeและค่าของพร็อพเพอร์ตี้purposeนั้นต้องมีmaskable
วิธีเพิ่มการรองรับไอคอนที่มาสก์ได้ลงใน PWA
- ใช้ตัวแก้ไข Maskable.app เพื่อแปลงไอคอนที่มีอยู่เป็นไอคอนที่มาสก์ได้
เพิ่มพร็อพเพอร์ตี้
purposeลงในออบเจ็กต์iconsรายการใดรายการหนึ่งในไฟล์ Manifest ของเว็บแอป ตั้งค่าpurposeเป็นmaskableโปรดดูค่า{ … "icons": [ … { "src": "path/to/maskable_icon.png", "sizes": "196x196", "type": "image/png", "purpose": "maskable" } ] … }ใช้ Chrome DevTools เพื่อยืนยันว่าไอคอนที่มาสก์ได้แสดงอย่างถูกต้อง โปรดดูที่ไอคอนปัจจุบันของฉันพร้อมใช้งานไหม