Safari สำหรับผู้ใช้ iOS จะเพิ่ม Progressive Web App (PWA) ลงในหน้าจอหลักด้วยตนเองได้ ไอคอนที่ปรากฏบนหน้าจอหลักของ iOS เมื่อเพิ่ม PWA เรียกว่าไอคอนสัมผัสของ Apple Codelab นี้จะแสดงวิธีเพิ่มไอคอน Apple Touch ลงใน PWA โดยจะถือว่าคุณมีสิทธิ์เข้าถึงอุปกรณ์ iOS
วัดระยะทาง
เปิดแอปตัวอย่างในแท็บใหม่
คลิกรีมิกซ์เพื่อแก้ไขเพื่อทำให้โปรเจ็กต์แก้ไขได้
หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ
จด URL ของแอปตัวอย่างไว้ โดย URL จะมีลักษณะดังนี้
https://example.glitch.me
เรียกใช้การตรวจสอบ PWA ของ Lighthouse ในแอปตัวอย่างในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome โดยทำดังนี้
- กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
- คลิกแท็บ Lighthouse
- ตรวจสอบว่าได้เลือกช่องทำเครื่องหมาย Progressive Web App ในรายการหมวดหมู่
- คลิกปุ่มสร้างรายงาน
ในส่วนเพิ่มประสิทธิภาพ PWA Lighthouse รายงานว่าแอปตัวอย่างไม่มีไอคอนสัมผัสของ Apple ที่ถูกต้อง
เพิ่มแอปตัวอย่างในหน้าจอหลักของ iOS
หากต้องการแสดงให้เห็นว่าไอคอนสัมผัสของ Apple มอบประสบการณ์การใช้งานที่ราบรื่นยิ่งขึ้นได้อย่างไร ก่อนอื่นให้ลองเพิ่มแอปตัวอย่างลงในหน้าจอหลักของอุปกรณ์ iOS เมื่อไม่ได้ระบุไอคอนสัมผัสของ Apple
- เปิด Safari สำหรับ iOS
- เปิด URL ของแอปตัวอย่าง นี่คือ URL อย่างเช่น
https://example.glitch.me
ที่คุณจดไว้ก่อนหน้านี้ - แตะแชร์ > เพิ่มลงในหน้าจอหลัก คุณอาจต้องปัดไปทางซ้ายจึงจะเห็นตัวเลือกนี้
- แตะเพิ่ม
เนื่องจากเว็บไซต์ไม่ได้ระบุไอคอนสัมผัสของ Apple ระบบ iOS จึงเพียงแค่สร้างไอคอนสำหรับเว็บไซต์จากเนื้อหาของหน้า
เพิ่มไอคอน Apple Touch ลงในแอปตัวอย่าง
- ยกเลิกการทำหมายเหตุที่แท็ก
<link rel="apple-touch-icon">
ที่ด้านล่างของ<head>
ของindex.html
…
<link rel="stylesheet" href="/index.css">
<link rel="shortcut icon" href="https://cdn.glitch.com/49d34dc6-8fbd-46bb-8221-b99ffd36f1af%2Ftouchicon-180.png?v=1566411949736">
<!-- <link rel="apple-touch-icon" href="https://cdn.glitch.com/49d34dc6-8fbd-46bb-8221-b99ffd36f1af%2Ftouchicon-180.png?v=1566411949736"> -->
<link rel="apple-touch-icon" href="https://cdn.glitch.com/49d34dc6-8fbd-46bb-8221-b99ffd36f1af%2Ftouchicon-180.png?v=1566411949736">
</head>
…
เพิ่มแอปตัวอย่างไปยังหน้าจอหลักของ iOS (อีกครั้ง)
- ลองเพิ่มแอปตัวอย่างในหน้าจอหลักของ iOS อีกครั้ง ครั้งนี้ ไอคอนที่เหมาะสม
จะสร้างขึ้นสำหรับเว็บไซต์นั้น หากตรวจสอบหน้านี้อีกครั้งด้วย Lighthouse คุณจะเห็นว่าขณะนี้การตรวจสอบไม่ได้ให้
apple-touch-icon
ที่ถูกต้องผ่านแล้ว