เมื่อผู้ใช้ iOS Safari เพิ่ม Progressive Web App (PWA) ลงในหน้าจอหลัก ไอคอนที่ปรากฏจะเรียกว่า Apple Touch Icon
คุณสามารถระบุไอคอนที่แอปควรใช้ได้โดยใส่แท็ก <link rel="apple-touch-icon" href="/example.png">
ใน <head>
ของหน้าเว็บ หากหน้าเว็บไม่มีแท็กลิงก์นี้ iOS จะสร้างไอคอนโดยการจับภาพหน้าจอของเนื้อหาหน้าเว็บ กล่าวคือ การให้ iOS ดาวน์โหลดไอคอนจะส่งผลให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดีขึ้น
สาเหตุที่การตรวจสอบไอคอนสัมผัสของ Apple ของ Lighthouse ล้มเหลว
Lighthouse จะแจ้งว่าหน้าเว็บไม่มีแท็ก <link rel="apple-touch-icon" href="/example.png">
ใน<head>
ดังนี้
Lighthouse จะไม่ตรวจสอบว่าไอคอนมีอยู่จริงหรือไม่ หรือไอคอนมีขนาดถูกต้องหรือไม่
วิธีเพิ่มไอคอนการแตะของ Apple
เพิ่ม
<link rel="apple-touch-icon" href="/example.png">
ลงใน<head>
ของหน้าเว็บ<!DOCTYPE html> <html lang="en"> <head> … <link rel="apple-touch-icon" href="/example.png"> … </head> …
แทนที่
/example.png
ด้วยเส้นทางจริงไปยังไอคอน
โปรดตรวจสอบสิ่งต่อไปนี้เพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดี
- ไอคอนมีขนาด 180x180 พิกเซลหรือ 192x192 พิกเซล
- เส้นทางที่ระบุไปยังไอคอนถูกต้อง
- พื้นหลังของไอคอนไม่โปร่งใส