ทางลัดของแอปช่วยให้เข้าถึงการดำเนินการทั่วไปบางอย่างที่ผู้ใช้ต้องการได้อย่างรวดเร็ว
ตอนนี้แพลตฟอร์มเว็บรองรับทางลัดของแอปแล้ว เพื่อเพิ่มประสิทธิภาพการทํางานของผู้ใช้และอำนวยความสะดวกในการดึงดูดให้ผู้ใช้กลับมามีส่วนร่วมอีกครั้งด้วยงานหลัก ซึ่งช่วยให้นักพัฒนาเว็บสามารถมอบการเข้าถึงอย่างรวดเร็วสําหรับการดําเนินการทั่วไปบางอย่างที่ผู้ใช้จําเป็นต้องใช้บ่อย
บทความนี้จะอธิบายวิธีกำหนดทางลัดของแอป นอกจากนี้ คุณจะได้เรียนรู้แนวทางปฏิบัติแนะนำที่เกี่ยวข้องด้วย
เกี่ยวกับทางลัดของแอป
ทางลัดของแอปช่วยให้ผู้ใช้เริ่มงานทั่วไปหรืองานที่แนะนำภายในเว็บแอปได้อย่างรวดเร็ว การเข้าถึงงานเหล่านั้นอย่างง่ายดายจากทุกที่ที่ไอคอนแอปแสดงอยู่จะช่วยเพิ่มประสิทธิภาพการทำงานของผู้ใช้และเพิ่มการมีส่วนร่วมกับเว็บแอป
ระบบจะเรียกใช้เมนูทางลัดของแอปด้วยการคลิกขวาที่ไอคอนแอปในแถบงาน (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 ที่ใช้กิจกรรมเว็บที่เชื่อถือได้ จะอ่านทางลัดของแอปจากไฟล์ Manifest ของเว็บแอปและสร้างการกำหนดค่าที่เกี่ยวข้องสำหรับแอป Android โดยอัตโนมัติ โปรดทราบว่าต้องระบุไอคอนสำหรับทางลัดของแอปและต้องมีขนาดอย่างน้อย 96 x 96 พิกเซลใน Bubblewrap
PWABuilder เป็นเครื่องมือที่ยอดเยี่ยมในการเปลี่ยน Progressive Web App ให้เป็นกิจกรรมบนเว็บที่เชื่อถือได้อย่างง่ายดาย โดยรองรับทางลัดของแอปโดยมี��้อ����ร��ะ����งบางอย่าง
สําหรับนักพัฒนาแอปที่ผสานรวมกิจกรรมบนเว็บที่เชื่อถือได้ลงในแอปพลิเคชัน Android ด้วยตนเอง คุณสามารถใช้ทางลัดแอป Android เพื่อใช้ลักษณะการทำงานเดียวกันได้
ตัวอย่าง
ดูตัวอย่างทางลัดของแอปและแหล่งที่มา
ลิงก์ที่มีประโยชน์
- MDN
- Spec
- ตัวอย่างทางลัดของแอป | แหล่งที่มาของตัวอย่างทางลัดของแอป
- คอมโพเนนต์ Blink:
UI>Browser>WebAppInstalls