การปรับปรุงหลายอย่างจะช่วยเพิ่ม 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 ได้
หน้าจอเริ่มต้น (Splash Screen)
ดังที่แสดงในบทที่เกี่ยวกับไฟล์ 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 ไม่ทันเวลา การกด "เพิ่มลงในหน้าจอหลัก" จะวางไอคอนไว้ในหน้าจอหลัก แต่จะไม่ได้มอบประสบการณ์การใช้งานแอป แต่จะเป็นเพียงทางลัดไปยังแท็บเบราว์เซอร์เท่านั้น