เตรียมพร้อมสำหรับโหมดการแสดงผลของวันพรุ่งนี้

PWA สามารถใช้คุณสมบัติ "display_override" เพื่อจัดการโหมดการแสดงผลพิเศษ

โธมัส ชไตเนอร์

ไฟล์ Manifest ของเว็บแอปเป็นไฟล์ JSON ที่บอกเบราว์เซอร์เกี่ยวกับ Progressive Web App และลักษณะการทำงานของไฟล์ดังกล่าวเมื่อติดตั้งในเดสก์ท็อปหรืออุปกรณ์เคลื่อนที่ของผู้ใช้ คุณปรับแต่ง UI ของเบราว์เซอร์ที่จะแสดงเมื่อเปิดแอปได้ผ่านทางพร็อพเพอร์ตี้ display เช่น คุณอาจซ่อนแถบที่อยู่ และเบราว์เซอร์ Chrome และยังสร้างเกมเพื่อเปิดโหมดเต็มหน้าจอได้อีกด้วย เพื่อเป็นการทบทวนแบบคร่าวๆ ด้านล่างคือโหมดการแสดงผลที่ระบุในเวลาที่บทความนี้เขียน

พร็อพเพอร์ตี้ การใช้งาน
fullscreen เปิดเว็บแอปพลิเคชันโดยไม่มี UI ของเบราว์เซอร์และกินพื้นที่แสดงผลที่มีอยู่ทั้งหมด
standalone เปิดเว็บแอปให้มีรูปลักษณ์เหมือนแอปแบบสแตนด์อโลน แอปจะทำงานในหน้าต่างของตัวเองแยกจากเบราว์เซอร์ และซ่อนองค์ประกอบ UI มาตรฐานของเบราว์เซอร์ เช่น แถบ URL
minimal-ui โหมดนี้คล้ายกับ standalone แต่จะมอบชุดองค์ประกอบ UI ขั้นต่ำแก่ผู้ใช้สำหรับควบคุมการนำทาง (เช่น การย้อนกลับและโหลดซ้ำ)
browser ประสบการณ์การใช้งานเบราว์เซอร์มาตรฐาน

โหมดการแสดงผลเหล่านี้เป็นไปตามเชนโฆษณาสำรองที่กำหนดไว้เป็นอย่างดี ("fullscreen" → "standalone" → "minimal-ui" → "browser") หากเบราว์เซอร์ไม่รองรับโหมดใดโหมดหนึ่ง เบราว์เซอร์จะกลับไปใช้โหมดการแสดงผลถัดไปในเชน

ข้อบกพร่องของพร็อพเพอร์ตี้ display

ปัญหาของห่วงโซ่โฆษณาสำรองแบบมีสายแบบใช้สายนี้มีอยู่ 3 ประการ ดังนี้

  • นักพัฒนาซอฟต์แวร์จะขอ "minimal-ui" โดยไม่ถูกบังคับให้กลับสู่โหมดการแสดงผลของ "browser" ไม่ได้หากเบราว์เซอร์ที่ระบุไม่รองรับ "minimal-ui"
  • นักพัฒนาซอฟต์แวร์จะไม่มีวิธีจัดการกับความแตกต่างข้ามเบราว์เซอร์ เช่น เบราว์เซอร์มีหรือยกเว้นปุ่มย้อนกลับในหน้าต่างสำหรับโหมด "standalone" หรือไม่
  • ลักษณะการทำงานในปัจจุบันทำให้ไม่สามารถเริ่มใช้โหมดการแสดงผลใหม่ด้วยรูปแบบที่เข้ากันได้แบบย้อนหลัง เนื่องจากการสำรวจอย่างโหมดแอปพลิเคชันแบบแท็บไม่มีตำแหน่งตามธรรมชาติในเชนโฆษณาสำรอง

พร็อพเพอร์ตี้ display_override

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

ในตัวอย่างด้านล่าง เชนโฆษณาสำรองสำหรับโหมดการแสดงผลจะเป็นดังนี้ (รายละเอียดของ "window-controls-overlay" อยู่นอกขอบเขตบทความนี้)

  1. "window-controls-overlay" (ก่อนอื่นให้ดูที่ display_override)
  2. "minimal-ui"
  3. "standalone" (เมื่อ display_override หมดแล้ว ให้ประเมิน display)
  4. "minimal-ui" (สุดท้าย ให้ใช้เชนโฆษณาสำรอง display)
  5. "browser"
{
  "display_override": ["window-controls-overlay", "minimal-ui"],
  "display": "standalone",
}

ระบบจะยอมรับโหมดการแสดงผลในอนาคตเฉพาะสำหรับค่า display_override เท่านั้น แต่จะยอมรับ display ไม่ได้ เพื่อให้ยังคงเข้ากันได้แบบย้อนหลัง เบราว์เซอร์ที่ไม่รองรับ display_override จะกลับไปที่พร็อพเพอร์ตี้ display และละเว้น display_override ในฐานะที่เป็นพร็อพเพอร์ตี้ไฟล์ Manifest ของเว็บแอปที่ไม่รู้จัก

บริการรับรองคำให้การ

พร็อพเพอร์ตี้ display_override ได้รับการดัดแปลงโดย Daniel Murphy