การเพิ่มประสิทธิภาพ

การปรับปรุงหลายอย่างจะช่วยเพิ่ม Conversion และการใช้งาน PWA ได้

ทางลัดของแอปพลิเคชัน

ทางลัดของแอปคือรายการ Deep Link แบบคงที่ซึ่งไปยัง PWA ของคุณ โดยเขียนไว้ในไฟล์ Manifest ข้อกำหนดของไฟล์ Manifest ของเว็บแอป ซึ่งให้คุณกำหนดรายการทางลัดไปยังส่วนต่างๆ หรือฟีเจอร์ต่างๆ ใน PWA ซึ่งจะช่วยเร่งการนำทางไปยังส่วนที่มีการเข้าถึงบ่อย

ทางลัดของแอปพร้อมใช้งานในระบบปฏิบัติการเดสก์ท็อปส่วนใหญ่และ Android ที่มี WebAPK และจะปรากฏในเมนูตามบริบทบนไอคอนของแอปในหน้าจอหลัก แท่นชาร์จ หรือแถบงาน ดังที่แสดงในภาพต่อไปนี้

หากต้องการเข้าถึงเมนูนี้ ผู้ใช้ต้องคลิกขวาหรือกดไอคอน PWA ค้างไว้

หมายเหตุ: ทางลัดแอปจะใช้ได้ก็ต่อเมื่อผู้ใช้ติดตั้ง PWA ของคุณเท่านั้น

คำเตือน: เมื่อผู้ใช้ติดตั้ง PWA แล้ว คุณจะเพิ่มหรือนำทางลัดออกไม่ได้จนกว่าจะอัปเดตไฟล์ Manifest ในเซิร์ฟเวอร์และเรียกใช้อัลกอริทึมการอัปเดต

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

name

ข้อความที่จะแสดงต่อผู้ใช้ ซึ่งมักจะแสดงในเมนูบริบท

url

URL ที่ PWA ควรโหลดเมื่อผู้ใช้เปิดจากทางลัดนี้ โดย URL นี้ควรอยู่ภายในขอบเขต PWA ของคุณ และควรเป็น Deep Link ที่ไปยังฟีเจอร์ที่ name หรือ short_name อธิบาย

short_name

(ไม่บังคับ) ชื่อที่สั้นลงซึ่งจะใช้เมื่อมีพื้นที่ไม่เพียงพอที่จะแสดงค่าทั้งหมดของช่อง name

description

(ไม่บังคับ) คำอธิบายสิ่งที่ทางลัดนี้จะทํา

icons

(ไม่บังคับ) อาร์เรย์ของออบเจ็กต์ไอคอนที่มีช่อง src, type, sizes และ purpose (ไม่บังคับ) ซึ่งอธิบายว่ารูปภาพใดควรแสดงทางลัด

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

ข้อควรระวัง: Chrome และ Edge บนเดสก์ท็อปจะแสดงผลรายการแรก 10 รายการ ส่วน Chrome บน Android จะแสดงผลเฉพาะทางลัด 3 รายการแรกในรายการของไฟล์ Manifest คุณจึงควรจัดเรียงทางลัดตามลําดับความสําคัญ นอกจากนี้ Chrome ใน Android ยังเพิ่มสิทธิ์เข้าถึง "ข้อมูลแอป" และ "การตั้งค่าเว็บไซต์" จากเมนูหลังรายการที่กำหนดเอง

หมายเหตุ: หากเผยแพร่ PWA ไปยังแคตตาล็อกและ Store ของแอป คุณจะแปลงทางลัดในไฟล์ Manifest ไปใช้กับแพลตฟอร์มที่เฉพาะเจาะจงได้โดยใช้ API สำหรับระบบปฏิบัติการแต่ละระบบ เช่น การดำเนินการด่วนใน iOS และทางลัดใน Android BubbleWrap รองรับทางลัดของแอปสำหรับ Android และ ChromeOS รวมถึง PWA Builder สำหรับ Android, ChromeOS, iOS และ iPadOS

ตัวอย่างโค้ดต่อไปนี้จะกำหนดทางลัดของแอปต่างๆ ที่คุณลองใช้ได้หากติดตั้งแอปใน Android ด้วย Chrome หรือในเดสก์ท็อปด้วย Edge หรือ Chrome

iOS และ iPadOS

เมื่อเผยแพร่ PWA คุณจะทำการปรับปรุงบางอย่างที่จะช่วยปรับปรุงประสบการณ์ของผู้ใช้ Safari ใน iOS/iPadOS ได้

หน้าจอแนะนำ

ดังที่แสดงในบทที่เกี่ยวกับไฟล์ Manifest ของเว็บแอป Android จะสร้างหน้าจอแนะนำโดยอัตโนมัติตามค่าของไฟล์ Manifest แต่ iOS และ iPadOS จะไม่เป็นแบบนั้น ในอุปกรณ์เหล่านี้ คุณควรกำหนดหน้าจอแนะนำใน HTML เป็นภาพนิ่งโดยใช้องค์ประกอบ <link>

รูปภาพเหล่านี้เรียกว่ารูปภาพเริ่มต้นในอุปกรณ์ Apple และใช้พร็อพเพอร์ตี้ rel ที่มีค่า apple-touch-startup-image ดังตัวอย่างต่อไปนี้

<link rel="apple-touch-startup-image" href="ios-startup.png">

ปัญหาคือภาพเริ่มต้นต้องมีขนาดหน้าต่างเดียวกับที่ PWA ของคุณจะมีเมื่อเปิด ดังนั้นอุปกรณ์ iOS และ iPadOS แต่ละรุ่นจึงต้องใช้รูปภาพที่แตกต่างกัน คุณต้องครอบคลุมสถานการณ์เพิ่มเติมใน iPad เช่น การเปิดแนวนอน/แนวตั้ง และการแสดงผล PWA ในโหมดทำงานหลายอย่างพร้อมกัน (เช่น 1/3, 1/2 หรือ 2/3 ของหน้าจอ)

คุณดูรายการขนาดหน้าจอ iOS และ iPadOS ที่อัปเดตแล้วได้ที่หลักเกณฑ์อินเทอร์เฟซผู้ใช้ของ Apple

คุณตั้งค่ารูปภาพเวอร์ชันต่างๆ ของการเปิดตัวได้ด้วย Media Query ภายในแอตทริบิวต์ media ดังนี้

<link rel="apple-touch-startup-image" href="ios-startup.png"
      media="orientation: portrait">
<link rel="apple-touch-startup-image" href="ios-startup-landscape.png"
      media="orientation: landscape">

คำเตือน: หากต้องการระบุตัวเลือกที่เป็นไปได้ทั้งหมดซึ่งรวมการกำหนดหน้าจอ การวางแนว และโหมดการทำงานหลายอย่างเข้าด้วยกัน คุณจะต้องสร้างและลิงก์รูปภาพที่แตกต่างกันมากกว่า 25 รูปใน HTML หากคุณไม่ได้ระบุภาพเริ่มต้นสำหรับบริบท iOS หรือ iPadOS ของผู้ใช้ หน้าจอสีขาวจะปรากฏในภาพเคลื่อนไหวช่วงเปิดและขณะที่ PWA กำลังโหลดแทน

รูปแบบการออกแบบสำหรับภาพเริ่มต้นของ iOS

การกําหนดภาพเริ่มต้นเป็นงานที่ยาก เราจึงมีเครื่องมือ 2 อย่างสําหรับการสร้างและกําหนดค่าอัตโนมัติ ดังนี้

• การสร้างแบบคงที่ผสานรวมกับระบบบิลด์ สร้างรูปภาพ PNG แบบคงที่ทั้งหมด และแสดงโค้ด HTML ที่มีองค์ประกอบ <link> เพื่อแทรกลงในเอกสาร PWA Asset Generator เป็นตัวอย่างของเครื่องมือดังกล่าว
• เครื่องมือสร้างฝั่งไคลเอ็นต์ ซึ่งเป็นเครื่องมือ JavaScript ที่สามารถฝังรูปภาพเริ่มต้นเวอร์ชัน Base64 อย่างน้อย 1 เวอร์ชันลงในองค์ประกอบที่แทรก <link> โดยอิงตามประเภทและขนาดหน้าจอของอุปกรณ์ปัจจุบัน คุณสามารถใช้ Canvas ในหน่วยความจํา แสดงผลรูปภาพ และแปลงเป็น data: URI ด้วยไฟล์ PNG ไลบรารี PWA Compat เป็นไลบรารีฝั่งไคลเอ็นต์ที่ใช้งานง่ายซึ่งทํางานนี้โดยการโคลนหน้าจอเริ่มต้นทั่วไปของ Android

การตรวจหา PWA ในแพลตฟอร์มอุปกรณ์เคลื่อนที่ของ Apple

แม้ว่าคุณควรใช้การเพิ่มประสิทธิภาพแบบเป็นขั้นๆ ไปและการระบุฟีเจอร์ใน PWA แต่อาจมีบางกรณีที่เราต้องทราบว่าผู้ใช้อยู่ใน PWA บนแพลตฟอร์มอุปกรณ์เคลื่อนที่ของ Apple หรือไม่ เช่น เมื่อคุณต้องการแสดงวิธีการติดตั้งหรือเพิ่มลิงก์ไปยังแอปเฉพาะแพลตฟอร์มที่ใช้ได้เฉพาะใน iOS

หากต้องการหลีกเลี่ยงการอ่านสตริง User Agent ให้ตรวจสอบพร็อพเพอร์ตี้ standalone ของออบเจ็กต์ navigator นี่เป็นพร็อพเพอร์ตี้ที่ไม่ใช่มาตรฐานและใช้ได้ในเครื่องมือ WebKit บน iOS และ iPadOS เท่านั้น

• หาก navigator.standalone เป็น undefined หมายความว่าผู้ใช้ไม่ได้ใช้อุปกรณ์ iPadOS หรือ iOS
• หาก navigator.standalone เป็น false หมายความว่าผู้ใช้เปิด PWA ในเบราว์เซอร์และกำลังใช้งานอยู่
• หาก navigator.standalone เป็น true หมายความว่าผู้ใช้เปิด PWA จากหน้าจอหลักและกำลังใช้งาน PWA แบบสแตนด์อโลน

การรองรับโหมดเต็มหน้าจอ

ใน Safari บน iOS และ iPad ระบบจะรองรับเฉพาะ display: standalone เป็นโหมดการแสดงผลสำหรับ PWA

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

หากคุณเพิ่มแท็กต่อไปนี้ใน HTML ของคุณ PWA ใน iOS และ iPadOS จะเข้าสู่โหมดเต็มหน้าจอ แต่การดำเนินการนี้จะแตกต่างจากใน Android

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

ในโหมดนี้ แถบสถานะของอุปกรณ์ (ด้านบนที่คุณเห็นนาฬิกา ระดับแบตเตอรี่ และไอคอนการแจ้งเตือน) จะยังคงมองเห็นได้ แต่จะแสดงผลที่ด้านบนของเนื้อหาโดยมีพื้นหลังโปร่งใส

คำเตือน: ระบบจะไม่สนใจสีธีมในโหมดนี้ และแถบการแจ้งเตือนจะแสดงผลบนพื้นหลังโปร่งใส นอกจากนี้ พิกเซล [0, 0] ของแอปจะกลายเป็นพิกเซล [0, 0] ของหน้าจอจริง ไม่ใช่หลังพื้นที่ปลอดภัย

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

ความน่าเชื่อถือในการติดตั้ง

ใน iOS และ iPadOS ก่อนเวอร์ชัน 15.4 ระบบจะโหลดไฟล์ Manifest จากเครือข่ายก็ต่อเมื่อผู้ใช้เปิดชีตที่แชร์โดยใช้ไอคอนแชร์ในเบราว์เซอร์เท่านั้น และจะไม่โหลดเมื่อหน้าเว็บโหลด ดังนั้นเบราว์เซอร์จะไม่ตรวจสอบว่าเว็บไซต์ของคุณเป็น PWA หรือไม่จนกว่าจะถึงเวลานั้น ซึ่งอาจทําให้เกิดสถานการณ์ที่โหลดไฟล์ Manifest ไม่ได้หรือใช้เวลานานเกินไป และเบราว์เซอร์จะไม่สนใจไฟล์ดังกล่าว

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

คำเตือน: หากเบราว์เซอร์โหลดไฟล์ Manifest ไม่ได้ ระบบจะเปลี่ยนไปตรวจสอบว่า PWA ของคุณมีเมตาแท็กที่เลิกใช้งานแล้ว เช่น apple-mobile-web-app-capable หรือไม่ คุณไม่ควรใช้เมตาแท็กเหล่านี้ หน้าดังกล่าวมอบประสบการณ์การใช้งานแอปบนหน้าจอหลักโดยไม่มีแอตทริบิวต์ที่จำเป็นสำหรับ PWA เช่น การปฏิบัติตามแอตทริบิวต์ start_url หรือ scope ซึ่งทำให้แอปใช้งานไม่ได้

แหล่งข้อมูล

• เครื่องมือสร้างชิ้นงาน PWA
• ทําสิ่งต่างๆ ให้เสร็จได้อย่างรวดเร็วด้วยทางลัดของแอป
• PWA Compat Library
• กำหนดทางลัดของแอป