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

การปรับปรุงหลายอย่างจะช่วยเพิ่ม 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 ได้

หน้าจอเริ่มต้น (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 ทางด้านขวา ซึ่งช่วยให้คุณแสดงผลเนื้อหาที่อยู่หลังแถบสถานะได้

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

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

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

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

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

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

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

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

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

แหล่งข้อมูล