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