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"
อยู่นอกขอบเขตของบทความนี้)
"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