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"
อยู่นอกขอบเขตบทความนี้)
"window-controls-overlay"
(ก่อนอื่นให้ดูที่display_override
)"minimal-ui"
"standalone"
(เมื่อdisplay_override
หมดแล้ว ให้ประเมินdisplay
)"minimal-ui"
(สุดท้าย ให้ใช้เชนโฆษณาสำรองdisplay
)"browser"
{
"display_override": ["window-controls-overlay", "minimal-ui"],
"display": "standalone",
}
ระบบจะยอมรับโหมดการแสดงผลในอนาคตเฉพาะสำหรับค่า display_override
เท่านั้น แต่จะยอมรับ display
ไม่ได้ เพื่อให้ยังคงเข้ากันได้แบบย้อนหลัง
เบราว์เซอร์ที่ไม่รองรับ display_override
จะกลับไปที่พร็อพเพอร์ตี้ display
และละเว้น display_override
ในฐานะที่เป็นพร็อพเพอร์ตี้ไฟล์ Manifest ของเว็บแอปที่ไม่รู้จัก
ลิงก์ที่มีประโยชน์
- การอธิบาย
- ตั้งใจจะส่งชุดข้อความ
- ข้อบกพร่องของ Chromium
- รายการสถานะของ Chrome
- ที่เก็บไฟล์ Manifest Incubations
บริการรับรองคำให้การ
พร็อพเพอร์ตี้ display_override
ได้รับการดัดแปลงโดย Daniel Murphy