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

PWA จะใช้ "display_override" ได้ จัดการรูปแบบการแสดงผลแบบพิเศษได้

ไฟล์ Manifest ของเว็บแอปคือไฟล์ JSON ที่บอกเบราว์เซอร์เกี่ยวกับโพรเกรสซีฟ เว็บแอปและลักษณะการทำงานเมื่อติดตั้งบนเดสก์ท็อปหรืออุปกรณ์เคลื่อนที่ของผู้ใช้ คุณสามารถใช้พร็อพเพอร์ตี้ display เพื่อปรับแต่ง UI ของเบราว์เซอร์ที่จะแสดงเมื่อเปิดแอปของคุณได้ ตัวอย่างเช่น คุณสามารถซ่อน แถบที่อยู่และเบราว์เซอร์ 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