เพิ่มไอคอน Apple Touch ลงใน Progressive Web App

Kayce Basques

Safari สำหรับผู้ใช้ iOS จะเพิ่ม Progressive Web App (PWA) ลงในหน้าจอหลักด้วยตนเองได้ ไอคอนที่ปรากฏบนหน้าจอหลักของ iOS เมื่อเพิ่ม PWA เรียกว่าไอคอนสัมผัสของ Apple Codelab นี้จะแสดงวิธีเพิ่มไอคอน Apple Touch ลงใน PWA โดยจะถือว่าคุณมีสิทธิ์เข้าถึงอุปกรณ์ iOS

วัดระยะทาง

เปิดแอปตัวอย่างในแท็บใหม่

  1. คลิกรีมิกซ์เพื่อแก้ไขเพื่อทำให้โปรเจ็กต์แก้ไขได้

  2. หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ เต็มหน้าจอ

  3. จด URL ของแอปตัวอย่างไว้ โดย URL จะมีลักษณะดังนี้ https://example.glitch.me

เรียกใช้การตรวจสอบ PWA ของ Lighthouse ในแอปตัวอย่างในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome โดยทำดังนี้

  1. กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
  2. คลิกแท็บ Lighthouse
  3. ตรวจสอบว่าได้เลือกช่องทำเครื่องหมาย Progressive Web App ในรายการหมวดหมู่
  4. คลิกปุ่มสร้างรายงาน

ในส่วนเพิ่มประสิทธิภาพ PWA Lighthouse รายงานว่าแอปตัวอย่างไม่มีไอคอนสัมผัสของ Apple ที่ถูกต้อง

ไม่ได้ให้ apple-touch-icon ที่ถูกต้อง
ตัวเลือกไม่ได้ให้การตรวจสอบ apple-touch-icon ที่ถูกต้อง

เพิ่มแอปตัวอย่างในหน้าจอหลักของ iOS

หากต้องการแสดงให้เห็นว่าไอคอนสัมผัสของ Apple มอบประสบการณ์การใช้งานที่ราบรื่นยิ่งขึ้นได้อย่างไร ก่อนอื่นให้ลองเพิ่มแอปตัวอย่างลงในหน้าจอหลักของอุปกรณ์ iOS เมื่อไม่ได้ระบุไอคอนสัมผัสของ Apple

  1. เปิด Safari สำหรับ iOS
  2. เปิด URL ของแอปตัวอย่าง นี่คือ URL อย่างเช่น https://example.glitch.me ที่คุณจดไว้ก่อนหน้านี้
  3. แตะแชร์ ปุ่มแชร์ของ Apple > เพิ่มลงในหน้าจอหลัก คุณอาจต้องปัดไปทางซ้ายจึงจะเห็นตัวเลือกนี้
  4. แตะเพิ่ม

เนื่องจากเว็บไซต์ไม่ได้ระบุไอคอนสัมผัสของ 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 ที่ถูกต้องผ่านแล้ว
ไอคอน Apple Touch
ไอคอน Apple Touch