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

Kayce Basques

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

วัดระยะทาง

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

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

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

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

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

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

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

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

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

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

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

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