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

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

François Beaufort

Jungkee Song

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

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

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

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

ระบบจะเรียกใช้เมนูทางลัดของแอปด้วยการคลิกขวาที่ไอคอนแอปในแถบงาน (Windows) หรือ Dock (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 อย่างน้อย 1 รายการ ส่วนสมาชิกรายอื่นๆ จะใส่หรือไม่ก็ได้

name

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

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

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

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

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

url

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

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

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

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

ไอคอนต้องมีขนาดอย่างน้อยครึ่งหนึ่งของขนาดที่เหมาะสมของอุปกรณ์ใน Android ซึ่งคือ 48 dp เพื่อใช้เป็นมาตรการด้านคุณภาพ เช่น หากต้องการแสดงบนหน้าจอ 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 เพิ่มทางลัดไปยังการตั้งค่าเว็บไซต์ โดยจะใช้ช่องทางลัดที่มีอยู่ช่องใดช่องหนึ่งสำหรับแอป

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

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

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

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

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

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

การรองรับกิจกรรมในเว็บซึ่งเชื่อถือได้

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

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

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

ตัวอย่าง

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

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

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