การปรับปรุงหลายอย่างจะช่วยเพิ่ม Conversion และการใช้งาน PWA ได้
ทางลัดของแอปพลิเคชัน
ทางลัดของแอปคือรายการ Deep Link แบบคงที่ซึ่งไปยัง PWA ของคุณ โดยเขียนไว้ในไฟล์ Manifest ข้อกำหนดของไฟล์ Manifest ของเว็บแอป ซึ่งให้คุณกำหนดรายการทางลัดไปยังส่วนต่างๆ หรือฟีเจอร์ต่างๆ ใน PWA ซึ่งจะช่วยเร่งการนำทางไปยังส่วนที่มีการเข้าถึงบ่อย
ทางลัดของแอปพร้อมใช้งานในระบบปฏิบัติการเดสก์ท็อปส่วนใหญ่และ Android ที่มี WebAPK และจะปรากฏในเมนูตามบริบทบนไอคอนของแอปในหน้าจอหลัก แท่นชาร์จ หรือแถบงาน ดังที่แสดงในภาพต่อไปนี้
หากต้องการเข้าถึงเมนูนี้ ผู้ใช้ต้องคลิกขวาหรือกดไอคอน PWA ค้างไว้
แป้นพิมพ์ลัดจะกำหนดไว้ในสมาชิก shortcuts ของไฟล์ Manifest โดยจะใช้อาร์เรย์ของสมาชิกที่มีพร็อพเพอร์ตี้ต่อไปนี้
name- ข้อความที่จะแสดงต่อผู้ใช้ ซึ่งมักจะแสดงในเมนูบริบท
url- URL ที่ PWA ควรโหลดเมื่อผู้ใช้เปิดจากทางลัดนี้ โดย URL นี้ควรอยู่ภายในขอบเขต PWA ของคุณ และควรเป็น Deep Link ที่ไปยังฟีเจอร์ที่
nameหรือshort_nameอธิบาย short_name- (ไม่บังคับ) ชื่อที่สั้นลงซึ่งจะใช้เมื่อมีพื้นที่ไม่เพียงพอที่จะแสดงค่าทั้งหมดของช่อง
name description- (ไม่บังคับ) คำอธิบายสิ่งที่ทางลัดนี้จะทํา
icons- (ไม่บังคับ) อาร์เรย์ของออบเจ็กต์ไอคอนที่มีช่อง
src,type,sizesและpurpose(ไม่บังคับ) ซึ่งอธิบายว่ารูปภาพใดควรแสดงทางลัด
คุณควรใช้ทางลัดของแอปอย่างเต็มความสามารถ ซึ่งหมายความว่าคุณไม่สามารถคาดหวังให้ทางลัดเหล่านี้ปรากฏอย่างสม่ำเสมอ และแม้ว่าจะปรากฏขึ้น คุณก็ไม่ทราบจำนวนทางลัดที่จะปรากฏหรือว่าแพลตฟอร์มจะละเว้นไอคอนหรือไม่ เนื่องจากขึ้นอยู่กับดุลยพินิจของเบราว์เซอร์ เราไม่ขอกล่าวถึงรายละเอียดทั้งหมดในแต่ละแพลตฟอร์ม แต่ด้านล่างนี้คุณจะเห็นภาพคร่าวๆ ว่าฟีเจอร์นี้ทำงานอย่างไรบน Android และเดสก์ท็อป วิธีที่ดีที่สุดในการจัดการกับความไม่แน่นอนนี้คือการจัดเรียงรายการตามลําดับความสําคัญ
ตัวอย่างโค้ดต่อไปนี้จะกำหนดทางลัดของแอปต่างๆ ที่คุณลองใช้ได้หากติดตั้งแอปใน 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">
รูปแบบการออกแบบสำหรับภาพเริ่มต้นของ 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">
ในโหมดนี้ แถบสถานะของอุปกรณ์ (ด้านบนที่คุณเห็นนาฬิกา ระดับแบตเตอรี่ และไอคอนการแจ้งเตือน) จะยังคงมองเห็นได้ แต่จะแสดงผลที่ด้านบนของเนื้อหาโดยมีพื้นหลังโปร่งใส
เมื่อใช้โหมดนี้ โปรดระมัดระวังในการออกแบบ เนื่องจากระบบปฏิบัติการจะแสดงผลไอคอนเป็นสีขาวเสมอ คุณจึงควรใช้พื้นหลังที่ตัดกับเนื้อหาสีขาวที่ด้านบนของหน้าจอ นอกจากนี้ คุณควรใช้ตัวแปรสภาพแวดล้อม CSS เพื่อแสดงผลเนื้อหาในพื้นที่ปลอดภัย ดังที่แสดงในบทการออกแบบแอป
ความน่าเชื่อถือในการติดตั้ง
ใน iOS และ iPadOS ก่อนเวอร์ชัน 15.4 ระบบจะโหลดไฟล์ Manifest จากเครือข่ายก็ต่อเมื่อผู้ใช้เปิดชีตที่แชร์โดยใช้ไอคอนแชร์ในเบราว์เซอร์เท่านั้น และจะไม่โหลดเมื่อหน้าเว็บโหลด ดังนั้นเบราว์เซอร์จะไม่ตรวจสอบว่าเว็บไซต์ของคุณเป็น PWA หรือไม่จนกว่าจะถึงเวลานั้น ซึ่งอาจทําให้เกิดสถานการณ์ที่โหลดไฟล์ Manifest ไม่ได้หรือใช้เวลานานเกินไป และเบราว์เซอร์จะไม่สนใจไฟล์ดังกล่าว
เมื่อเบราว์เซอร์โหลดไฟล์ Manifest ไม่ทันเวลา การกด "เพิ่มลงในหน้าจอหลัก" จะวางไอคอนไว้ในหน้าจอหลัก แต่จะไม่ได้มอบประสบการณ์การใช้งานแอป แต่จะเป็นเพียงทางลัดไปยังแท็บเบราว์เซอร์เท่านั้น