คุณสามารถเพิ่มประสิทธิภาพหลายอย่างที่ช่วยปรับปรุง Conversion และการใช้งาน PWA ได้
ทางลัดของแอปพลิเคชัน
ทางลัดของแอปคือรายการแบบคงที่ของ Deep Link ไปยัง PWA โดยเขียนไว้ในไฟล์ Manifest ข้อกำหนดไฟล์ Manifest ของเว็บแอป ซึ่งจะช่วยให้คุณกำหนดรายการแป้นพิมพ์ลัดไปยังส่วนหรือฟีเจอร์ต่างๆ ใน PWA เพื่อเร่งการไปยังส่วนต่างๆ ของส่วนที่เข้าถึงบ่อย
ทางลัดของแอปมีให้ใช้งานในระบบปฏิบัติการบนเดสก์ท็อปส่วนใหญ่และ Android ที่มี WebAPK และจะปรากฏในเมนูตามบริบทบนไอคอนของแอปในหน้าจอหลัก แถบแอป หรือแถบงาน ดังในรูปภาพต่อไปนี้
หากต้องการเข้าถึงเมนูนี้ ผู้ใช้ต้องคลิกขวาหรือกดไอคอนของ PWA ค้างไว้
ทางลัดจะกำหนดไว้ในสมาชิก shortcuts ของไฟล์ Manifest ซึ่งจะใช้อาร์เรย์สมาชิกที่มีพร็อพเพอร์ตี้ต่อไปนี้
name- ข้อความที่จะแสดงต่อผู้ใช้ ซึ่งมักจะอยู่ในเมนูตามบริบท
url- URL ที่ PWA ควรโหลดเมื่อผู้ใช้เริ่มใช้งานจากทางลัดนี้ ซึ่งควรเป็น URL ภายในขอบเขต PWA และควรมีการลิงก์ในรายละเอียดไปยังฟีเจอร์ที่
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 ดังนี้
<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-3 อย่างสำหรับการสร้างและกำหนดค่าอัตโนมัติ ดังนี้
- การสร้างแบบคงที่จะผสานรวมกับระบบบิลด์ของคุณ สร้างภาพนิ่งประเภท PNG ทั้งหมด และให้โค้ด HTML ที่มีองค์ประกอบ
<link>เพื่อแทรกลงในเอกสาร เครื่องมือสร้างชิ้นงาน PWA เป็นตัวอย่างของเครื่องมือดังกล่าว - เครื่องมือสร้างฝั่งไคลเอ็นต์ซึ่งเป็นเครื่องมือ JavaScript ที่สามารถฝังอิมเมจเริ่มต้นแบบ Base64 อย่างน้อย 1 เวอร์ชันลงในองค์ประกอบ
<link>ที่แทรกไว้ตามประเภทและขนาดหน้าจอของอุปกรณ์ปัจจุบัน คุณใช้ Canvas ในหน่วยความจำ แสดงภาพ และแปลงเป็น URI ของdata:ด้วยไฟล์ PNG ได้ ไลบรารี Compat ของ PWA เป็นไลบรารีฝั่งไคลเอ็นต์ที่ใช้งานง่าย โดยโคลนหน้าจอเปิดใช้งานทั่วไปของ 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 แม้ว่าอุปกรณ์ Android จะไม่รองรับ display: fullscreen แต่คุณอาจใช้เมตาแท็กที่ไม่เป็นไปตามมาตรฐานเพื่อทำให้ PWA เข้าสู่โหมดเต็มหน้าจอได้
ในรูปภาพถัดไป คุณจะเห็นการออกแบบแบบสแตนด์อโลนที่เป็นค่าเริ่มต้นทางด้านซ้ายพร้อมด้วยสีของธีม และที่ด้านขวาจะมี PWA พร้อมโหมด iOS แบบเต็มหน้าจอที่ให้คุณแสดงเนื้อหาด้านหลังแถบสถานะได้
หากเพิ่มแท็กต่อไปนี้ใน HTML PWA ใน iOS และ iPadOS จะเข้าสู่โหมดเต็มหน้าจอ แต่แท็กดังกล่าวจะแตกต่างจาก Android
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
ในโหมดนี้ แถบสถานะของอุปกรณ์ (ด้านบนที่มีนาฬิกา ระดับแบตเตอรี่ และไอคอนการแจ้งเตือน) จะยังคงมองเห็นได้แต่จะแสดงผลที่ด้านบนของเนื้อหาโดยมีพื้นหลังโปร่งใส
เมื่อใช้โหมดนี้ โปรดระมัดระวังในการออกแบบเนื่องจากระบบปฏิบัติการจะแสดงไอคอนเป็นสีขาวเสมอ คุณจึงควรตัดพื้นหลังของพื้นหลังส่วนที่เป็นสีอ่อนของหน้าจอ นอกจากนี้ สิ่งสำคัญคือการใช้ตัวแปรสภาพแวดล้อม CSS เพื่อแสดงเนื้อหาในพื้นที่ที่ปลอดภัย ดังที่แสดงในบทการออกแบบแอป
ความเสถียรในการติดตั้ง
Safari ใน iOS และ iPadOS ก่อนเวอร์ชัน 15.4 จะโหลดไฟล์ Manifest จากเครือข่ายเมื่อผู้ใช้เปิดชีตที่แชร์เท่านั้น โดยใช้ไอคอนแชร์ภายในเบราว์เซอร์ ไม่ใช่เมื่อโหลดหน้าเว็บ ดังนั้น Safari จะไม่ตรวจสอบว่าเว็บไซต์ของคุณเป็น PWA หรือไม่จนกว่าจะถึงเวลาดังกล่าว ซึ่งอาจทำให้เกิดกรณีที่ไม่สามารถโหลดไฟล์ Manifest ได้หรือใช้เวลามากเกินไปและ Safari จะละเว้นไฟล์ดังกล่าว
เมื่อ Safari ไม่สามารถโหลดไฟล์ Manifest ได้ทันเวลา ให้กด "Add to Home Screen" วางไอคอนบนหน้าจอหลัก แต่ไม่ได้นำเสนอประสบการณ์การใช้งานแอป ก็เป็นเพียงทางลัดไปยังแท็บ Safari