ทำสิ่งต่างๆ ให้เสร็จได้อย่างรวดเร็วด้วยทางลัดของแอป

ทางลัดของแอปช่วยให้เข้าถึงการดําเนินการทั่วไปบางส่วนที่ผู้ใช้ต้องการเป็นประจำได้อย่างรวดเร็ว

François Beaufort

เพลงจังคี

ตอนนี้แพลตฟอร์มเว็บรองรับทางลัดของแอปแล้ว เพื่อเพิ่มประสิทธิภาพการทำงานของผู้ใช้และอำนวยความสะดวกในการกลับมามีส่วนร่วมกับงานที่สำคัญ ช่วยให้นักพัฒนาเว็บเข้าถึงการดำเนินการทั่วไปต่างๆ ที่ผู้ใช้ต้องการเป็นประจำได้อย่างรวดเร็ว

บทความนี้จะสอนวิธีกำหนดทางลัดของแอป นอกจากนี้ คุณจะได้ ทราบแนวทางปฏิบัติแนะนำที่เกี่ยวข้อง

เกี่ยวกับทางลัดของแอป

ทางลัดของแอปช่วยให้ผู้ใช้เริ่มงานทั่วไปหรืองานที่แนะนำภายในเว็บแอปได้อย่างรวดเร็ว การเข้าถึงงานเหล่านั้นได้ง่ายๆ จากทุกที่ที่มีไอคอนแอปแสดงอยู่จะช่วยเพิ่มประสิทธิภาพการทำงานของผู้ใช้และเพิ่มการมีส่วนร่วมกับเว็บแอป

คุณจะเรียกใช้เมนูทางลัดของแอปได้ด้วยการคลิกขวาที่ไอคอนแอปในแถบงาน (Windows) หรือจัดวาง (macOS) บนเดสก์ท็อปของผู้ใช้ หรือแตะไอคอน Launcher ของแอปบน Android ค้างไว้

เมนูทางลัดของแอปจะแสดงเฉพาะสําหรับ Progressive Web App ที่ติดตั้งบนเดสก์ท็อปหรืออุปกรณ์เคลื่อนที่ของผู้ใช้เท่านั้น ไปที่การติดตั้งในโมดูล "เรียนรู้ PWA" เพื่อดูข้อมูลเกี่ยวกับข้อกำหนดด้านความสามารถในการติดตั้ง

ทางลัดของแอปแต่ละรายการแสดงความตั้งใจของผู้ใช้ โดยแต่ละทางลัดจะเชื่อมโยงกับ URL ภายในขอบเขตของเว็บแอป โดย URL ดังกล่าวจะเปิดขึ้นเมื่อผู้ใช้เปิดใช้งานทางลัดของแอป ตัวอย่างทางลัดของแอปมีดังต่อไปนี้

• รายการนำทางระดับบนสุด (เช่น หน้าแรก ไทม์ไลน์ คำสั่งซื้อล่าสุด)
• ค้นหา
• งานในการป้อนข้อมูล (เช่น เขียนอีเมลหรือทวีต เพิ่มใบเสร็จ)
• กิจกรรม (เช่น เริ่มแชทกับผู้ติดต่อที่ได้รับความนิยมสูงสุด)

กำหนดทางลัดของแอปในไฟล์ Manifest ของเว็บแอป

คุณเลือกที่จะกำหนดทางลัดของแอปไว้ในไฟล์ Manifest ของเว็บแอป ซึ่งเป็นไฟล์ JSON ที่บอกเบราว์เซอร์เกี่ยวกับเว็บแอปและลักษณะการทำงานเมื่อติดตั้งในเดสก์ท็อปหรืออุปกรณ์เคลื่อนที่ของผู้ใช้ กล่าวคือจะมีการประกาศในสมาชิกอาร์เรย์ shortcuts ด้านล่างนี้คือตัวอย่างของไฟล์ Manifest ของเว็บแอปที่เป็นไปได้

{
  "name": "Player FM",
  "start_url": "https://player.fm?utm_source=homescreen",
  …
  "shortcuts": [
    {
      "name": "Open Play Later",
      "short_name": "Play Later",
      "description": "View the list of podcasts you saved for later",
      "url": "/play-later?utm_source=homescreen",
      "icons": [{ "src": "/icons/play-later.png", "sizes": "192x192" }]
    },
    {
      "name": "View Subscriptions",
      "short_name": "Subscriptions",
      "description": "View the list of podcasts you listen to",
      "url": "/subscriptions?utm_source=homescreen",
      "icons": [{ "src": "/icons/subscriptions.png", "sizes": "192x192" }]
    }
  ]
}

สมาชิกแต่ละรายการของอาร์เรย์ shortcuts คือพจนานุกรมที่มี name และ url เป็นอย่างน้อย สมาชิกคนอื่นๆ ไม่บังคับ

name

ป้ายกำกับที่มนุษย์อ่านได้สำหรับทางลัดของแอปเมื่อแสดงต่อผู้ใช้

short_name (ไม่บังคับ)

ป้ายกำกับที่มนุษย์อ่านได้ซึ่งใช้ในกรณีที่มีพื้นที่จำกัด เราขอแนะนําให้คุณระบุ แม้ว่าจะไม่บังคับก็ตาม

description (ไม่บังคับ)

วัตถุประสงค์ที่มนุษย์อ่านได้สำหรับทางลัดของแอป โดยจะไม่มีการใช้ในเวลาที่เขียน แต่อาจได้รับเทคโนโลยีความช่วยเหลือพิเศษในอนาคต

url

URL จะเปิดขึ้นเมื่อผู้ใช้เปิดใช้งานทางลัดของแอป URL นี้ต้องอยู่ภายในขอบเขตของไฟล์ Manifest ของเว็บแอป หากเป็น URL แบบสัมพัทธ์ URL ฐานจะเป็น URL ของไฟล์ Manifest ของเว็บแอป

icons (ไม่บังคับ)

อาร์เรย์ของออบเจ็กต์ทรัพยากรรูปภาพ ออบเจ็กต์แต่ละรายการต้องมี src และพร็อพเพอร์ตี้ sizes type ของรูปภาพเป็นตัวเลือกที่ไม่บังคับซึ่งต่างจากไอคอนไฟล์ Manifest ของเว็บแอป ระบบยังไม่รองรับไฟล์ SVG ในขณะที่เขียน โปรดใช้ PNG แทน

หากต้องการไอคอนที่สมบูรณ์แบบ ให้ใส่ไอคอนเพิ่มทีละ 48 dp (เช่น ไอคอน 36x36, 48x48, 72x72, 96x96, 144x144, 192x192 พิกเซล) มิฉะนั้น ขอแนะนำให้คุณใช้ไอคอนขนาด 192x192 พิกเซลเพียงไอคอนเดียว

ตามการวัดคุณภาพ ไอคอนต้องมีขนาดอย่างน้อยครึ่งหนึ่งของขนาดที่เหมาะสมของอุปกรณ์ใน Android ซึ่งก็คือ 48dp เช่น หากต้องการแสดงบนหน้าจอ xxhdpi ไอคอนต้องมีขนาดอย่างน้อย 72 x 72 พิกเซล (ข้อมูลนี้ได้มาจากสูตรสำหรับการแปลงหน่วย dp สำหรับหน่วยพิกเซล)

ทดสอบทางลัดของแอป

หากต้องการยืนยันว่าตั้งค่าทางลัดของแอปอย่างถูกต้อง ให้ใช้แผงไฟล์ Manifest ในแผงแอปพลิเคชันของเครื่องมือสำหรับนักพัฒนาเว็บ

ช่องนี้มีพร็อพเพอร์ตี้หลายรายการของไฟล์ Manifest ในเวอร์ชันที่มนุษย์อ่านได้ รวมถึงทางลัดของแอป คุณสามารถตรวจสอบได้ง่ายๆ ว่าไอคอนทางลัดทั้งหมด (ถ้ามี) โหลดอย่างถูกต้อง

ทางลัดของแอปอาจไม่พร้อมใช้งานทันทีสำหรับผู้ใช้บางรายเนื่องจากการอัปเดต Progressive Web App จำกัดไว้ที่วันละครั้ง ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีที่ Chrome จัดการการอัปเดตไฟล์ Manifest ของเว็บแอป

แนวทางปฏิบัติแนะนำ

จัดลำดับทางลัดของแอปตามลำดับความสำคัญ

ทางลัดจะแสดงตามลำดับที่คุณกำหนดในไฟล์ Manifest เราขอแนะนำให้คุณเรียงลำดับทางลัดของแอปตามลำดับความสำคัญ เนื่องจากขีดจำกัดของจำนวนทางลัดของแอปที่แสดงจะแตกต่างกันไปในแต่ละแพลตฟอร์ม ตัวอย่างเช่น Chrome และ Edge ใน Windows จะจำกัดจำนวนทางลัดของแอปไว้ที่ 10 รายการ ขณะที่ Chrome สำหรับ Android จะแสดง 3 รายการเท่านั้น ก่อนใช้ Chrome 92 สำหรับ Android 7, 4 ได้รับอนุญาต Chrome 92 เพิ่มทางลัดไปยังการตั้งค่าเว็บไซต์ โดยนำช่องทางลัด 1 ช่องที่พร้อมใช้งานสำหรับแอป

ใช้ชื่อทางลัดของแอปที่ต่างกัน

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

วัดการใช้งานทางลัดของแอป

คุณควรใส่คำอธิบายประกอบในทางลัดของแอป url รายการในลักษณะเดียวกับที่ทำกับ start_url เพื่อวัตถุประสงค์ในการวิเคราะห์ (เช่น url: "/my-shortcut?utm_source=homescreen")

การสนับสนุนเบราว์เซอร์

ทางลัดของแอปมีให้ใช้งานในแพลตฟอร์มและเวอร์ชันที่ระบุไว้ด้านล่าง

การสนับสนุนกิจกรรมบนเว็บที่เชื่อถือได้

Bubblewrap เป็นเครื่องมือที่แนะนำสำหรับสร้างแอป Android ที่ใช้กิจกรรมบนเว็บที่เชื่อถือได้ จะอ่านทางลัดของแอปจากไฟล์ Manifest ของเว็บแอป และสร้างการกำหนดค่าที่สอดคล้องกันสำหรับแอป Android โดยอัตโนมัติ โปรดทราบว่าไอคอนสำหรับทางลัดของแอปเป็นสิ่งที่จำเป็นและต้องมีขนาดอย่างน้อย 96 x 96 พิกเซลใน Bubblewrap

PWABuilder เป็นเครื่องมือที่ยอดเยี่ยมในการเปลี่ยน Progressive Web App ให้เป็นกิจกรรมบนเว็บและเว็บที่เชื่อถือได้ ซึ่งรองรับทางลัดของแอปโดยมีข้อควรระวังบางประการ

สำหรับนักพัฒนาซอฟต์แวร์ที่ผสานรวมกิจกรรมบนเว็บที่เชื่อถือได้ไว้ในแอปพลิเคชัน Android ด้วยตนเอง คุณสามารถใช้ทางลัดของแอป Android เพื่อนำลักษณะการทำงานเดียวกันนี้ไปใช้ได้

ตัวอย่าง

ลองดูตัวอย่างทางลัดของแอปและแหล่งที่มา

ลิงก์ที่มีประโยชน์

• MDN
• ข้อกำหนด
• ตัวอย่างทางลัดของแอป | แหล่งที่มาตัวอย่างทางลัดของแอป
• คอมโพเนนต์การกะพริบ: UI>Browser>WebAppInstalls