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

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