ทางลัดของแอปช่วยให้เข้าถึงการดำเนินการทั่วไปบางส่วนที่ผู้ใช้จำเป็นต้องใช้งานบ่อยๆ ได้อย่างรวดเร็ว
ตอนนี้แพลตฟอร์มเว็บรองรับทางลัดของแอปแล้ว เพื่อเพิ่มประสิทธิภาพการทํางานของผู้ใช้และอำนวยความสะดวกในการดึงดูดให้ผู้ใช้กลับมามีส่วนร่วมอีกครั้งด้วยงานหลัก ซึ่งช่วยให้นักพัฒนาเว็บเข้าถึงการดำเนินการทั่วไปที่ผู้ใช้ต้องการบ่อยๆ ได้อย่างรวดเร็ว
บทความนี้จะสอนวิธีกำหนดทางลัดของแอป นอกจากนี้คุณจะได้เรียนรู้ แนวทางปฏิบัติที่ดีที่สุดที่เกี่ยวข้องด้วย
เกี่ยวกับทางลัดของแอป
ทางลัดของแอปช่วยให้ผู้ใช้เริ่มงานทั่วไปหรืองานที่แนะนำภายในเว็บแอปได้อย่างรวดเร็ว การเข้าถึงงานเหล่านั้นอย่างง่ายดายจากทุกที่ที่ไอคอนแอปแสดงอยู่จะช่วยเพิ่มประสิทธิภาพการทำงานของผู้ใช้และเพิ่มการมีส่วนร่วมกับเว็บแอป
ระบบจะเรียกใช้เมนูทางลัดของแอปด้วยการคลิกขวาที่ไอคอนแอปในแถบงาน (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 เป็นอย่างน้อย ส่วนสมาชิกรายอื่นๆ จะใส่หรือไม่ก็ได้
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 ซึ่งก็คือ 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 เพิ่มทางลัดไปยังการตั้งค่าเว็บไซต์โดยนำช่องทางลัดหนึ่งช่องที่มีให้สำหรับแอป
ใช้ชื่อทางลัดของแอปที่ไม่ซ้ำกัน
คุณไม่ควรใช้ไอคอนในการแยกความแตกต่างของทางลัดของแอป เนื่องจากไอคอนอาจมองไม่เห็นในบางครั้ง เช่น macOS ไม่รองรับไอคอนในเมนูทางลัดของ Dock ใช้ชื่อที่ไม่ซ้ำกันสำหรับทางลัดของแอปแต่ละรายการ
วัดการใช้แป้นพิมพ์ลัดของแอป
คุณควรใส่คำอธิบายประกอบในรายการทางลัดของแอป 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