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

Kayce Basques

ผู้ใช้ Safari สำหรับ iOS สามารถเพิ่ม Progressive Web App (PWA) ลงในหน้าจอหลักด้วยตนเองได้ ไอคอนที่ปรากฏบนหน้าจอหลักของ iOS เมื่อเพิ่ม PWA เรียกว่าไอคอน Apple Touch โค้ดแล็บนี้แสดงวิธีเพิ่มไอคอนการแตะของ Apple ลงใน 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 Touch ที่ถูกต้อง

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

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

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

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

เนื่องจากเว็บไซต์ไม่ได้ระบุไอคอนการแตะของ Apple iOS จึงสร้างไอคอนสำหรับเว็บไซต์จากเนื้อหาของหน้าเว็บ

ไอคอนหน้าจอหลักที่สร้างขึ้นโดยอัตโนมัติ
ไอคอนหน้าจอหลักที่สร้างขึ้นโดยอัตโนมัติ

เพิ่มไอคอนสัมผัสของ Apple ลงในแอปตัวอย่าง

  • ยกเลิกการคอมเมนต์แท็ก <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
ไอคอน Apple Touch