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

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

Thomas Steiner

ไฟล์ 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