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

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

François Beaufort

Jungkee Song

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

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

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

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

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

วันที่

เมนูทางลัดของแอปจะแสดงเฉพาะสําหรับ Progressive Web App ที่ ติดตั้งบนเดสก์ท็อปหรืออุปกรณ์เคลื่อนที่ของผู้ใช้ ดูการติดตั้ง ใน "Learn 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 ซึ่งต่างจากไอคอนไฟล์ Manifest ของเว็บแอปตรงที่ รูปภาพขนาด type ใส่หรือไม่ใส่ก็ได้ ระบบไม่รองรับไฟล์ SVG ในขณะที่เขียน โปรดใช้ PNG แทน

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

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

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

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

วันที่

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

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

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

เรียงลำดับทางลัดของแอปตามลำดับความสำคัญ

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

ใช้ชื่อทางลัดของแอปที่ไม่ซ้ำกัน

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

วัดการใช้แป้นพิมพ์ลัดของแอป

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

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

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

วันที่

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

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

PWABuilder เครื่องมืออันยอดเยี่ยมในการเปลี่ยน Progressive Web App ให้เป็น "Trust" กิจกรรมบนเว็บ รองรับทางลัดของแอปด้วยคำเตือนบางอย่าง

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

ตัวอย่าง

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

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

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