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

การเพิ่มประสิทธิภาพมากมายที่ช่วยปรับปรุง Conversion และการใช้งาน PWA ได้มีดังนี้

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

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

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

ทางลัดของแอปใน Android และ macOS

ผู้ใช้ต้องคลิกขวาหรือกดค้างที่ไอคอนของ 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 ดังนี้

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

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

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

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

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

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

ใน Safari ใน iOS และ iPad ระบบจะรองรับเฉพาะ display: standalone เป็นโหมดการแสดงผลของไอคอน PWA แม้ว่าระบบจะไม่รองรับ display: fullscreen แต่ในอุปกรณ์ Android คุณก็ใช้เมตาแท็กที่ไม่เป็นมาตรฐานเพื่อทำให้ PWA เข้าสู่โหมดเต็มหน้าจอได้

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

ลักษณะการทำงานเริ่มต้นแบบสแตนด์อโลน (ซ้าย) และหน้าจอ iOS แบบเต็มหน้าจอ (ขวา)

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

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

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

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

0px ด้านบนของวิวพอร์ตจะอยู่ใต้แถบสถานะโดยค่าเริ่มต้น หากคุณเพิ่มเมตาแท็กสีดำโปร่งแสง พื้นที่ 0px ด้านบนของวิวพอร์ตจะตรงกับส่วนบนของหน้าจอ

ความเสถียรในการติดตั้ง

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

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

แหล่งข้อมูล