Window Controls Overlay ช่วยให้เว็บแอปรู้สึกเหมือนเป็นแอปเนทีฟบนเดสก์ท็อป

Microsoft กำลังปรับปรุงวิธีการแสดงเว็บแอปในเบราว์เซอร์ Edge บนอุปกรณ์เดสก์ท็อป บริษัทได้ประกาศความพร้อมใช้งานของฟีเจอร์ Window Controls Overlay ซึ่งช่วยให้นักพัฒนาเว็บสามารถทำได้ ใช้พื้นที่เพิ่มเติมในแถบชื่อเรื่องของเว็บแอป คล้ายกับที่แอปเนทีฟทำกับการทำงานส่วนใหญ่ ระบบ

วิธีที่เว็บแอปทำงานบนอุปกรณ์เดสก์ท็อปในปัจจุบันคือสามารถวาดเนื้อหาได้เฉพาะภายในหน้าต่างแอปเท่านั้น แถบหัวเรื่องซึ่งแสดงที่ด้านบนสงวนไว้เพื่อแสดงชื่อของเพจ การควบคุมเบราว์เซอร์ และการควบคุมหน้าต่างทั่วไปสำหรับระบบปฏิบัติการ เว้นแต่ว่าคุณกำลังสร้างแอปพลิเคชันเว็บแบบกำหนดเองที่ไม่ต้องอาศัยเบราว์เซอร์ ซึ่งจะจำกัดพื้นที่ที่นักพัฒนาซอฟต์แวร์สามารถแสดงเนื้อหาที่เป็นประโยชน์สำหรับแอปของตนได้

ด้วยการซ้อนทับการควบคุมหน้าต่าง Microsoft Edge จะเพิ่มพื้นที่ว่างบนแถบชื่อเรื่องสำหรับแอปที่จะแสดง เนื้อหาใดก็ตามที่พวกเขาต้องการ ซึ่งจะมีประโยชน์สำหรับเมนูระดับบนสุด แถบค้นหา และคุณสมบัติอื่นๆ แทนที่จะให้แถบชื่อเรื่องแสดงพิกเซล 30 แถว ตัวควบคุมหน้าต่าง เช่น ปุ่มย่อและปิด จะแสดงเป็นภาพซ้อนทับที่ด้านบนของเนื้อหาแอปพลิเคชันเว็บ

ในฐานะนักพัฒนา คุณสามารถใช้ประโยชน์จากสิ่งนี้ได้โดยการเพิ่มสมาชิกรายการแทนที่การแสดงผลลงใน Web App Manifest ของคุณ และ จากนั้นใช้ตัวแปร CSS เพื่อป้องกันไม่ให้เว็บแอปของคุณวาดองค์ประกอบใต้ส่วนควบคุมหน้าต่างตรงมุมของแอป เนื่องจากการควบคุมหน้าต่างบน Windows, Linux หรือ macOS แตกต่างกัน คุณจึงจำเป็นต้องใช้ตัวแปรความกว้างที่แตกต่างกันขึ้นอยู่กับแพลตฟอร์มที่แอปทำงานอยู่ คุณสามารถค้นหาข้อมูลเพิ่มเติมเกี่ยวกับความสามารถนี้ได้ที่

เครือข่ายนักพัฒนา Mozilla.

Microsoft พูดถึง Window Controls Overlay เป็นครั้งแรกเมื่อสองปีที่แล้ว และเริ่มนำไปใช้กับ Chromium engine ในเวลาต่อมา ขณะนี้ฟีเจอร์นี้พร้อมใช้งานแล้วใน Edge และ Chrome โดยเริ่มตั้งแต่เวอร์ชัน 105 รวมถึง Opera เวอร์ชัน 91 เบราว์เซอร์ที่ใช้ Chromium อื่นๆ ควรรองรับเช่นกัน หากใช้ Chromium เวอร์ชันล่าสุด นอกจากนี้ยังมีการเผยแพร่ข้อกำหนดอย่างเป็นทางการที่ควรจูงใจเบราว์เซอร์อื่นๆ เช่น Firefox ให้นำคุณลักษณะนี้ไปใช้ด้วย


แหล่งที่มา:ไมโครซอฟต์