Window Controls Overlay hjälper webbappar att kännas mer som inbyggda appar på skrivbordet

click fraud protection

Microsoft förbättrar hur webbappar i Edge-webbläsaren visas på stationära enheter. Företaget har meddelat tillgängligheten av funktionen Window Controls Overlay, som gör det möjligt för webbutvecklare använda ytterligare utrymme i namnlisten för en webbapp, liknande vad inbyggda appar gör på de flesta operativsystem system.

Det sätt som webbappar för närvarande fungerar på stationära enheter är att de bara kan rita innehåll specifikt i appfönstret. Titelraden, som visas högst upp, är reserverad för att visa sidans titel, webbläsarkontroller och allmänna fönsterkontroller för operativsystemet. Om du inte bygger en anpassad webbapp som inte är beroende av en webbläsare, begränsar det området där utvecklare kan visa användbart innehåll för sina appar.

Med överlägget för fönsterkontroller frigör Microsoft Edge utrymme i namnlisten för appar att visa vilket innehåll de vill ha, vilket kan vara användbart för menyer på toppnivå, sökfält och andra funktioner. Istället för att ha 30 rader med pixlar som tas upp av titelraden, visas nu fönsterkontrollerna - som knappar för att minimera och stänga - som en överlagring ovanpå webbappens innehåll.

Som utvecklare kan du dra nytta av detta genom att lägga till en visningsöverstyrningsmanifestmedlem till ditt webbappmanifest, och använd sedan CSS-variabler för att förhindra att din webbapp ritar element under fönsterkontrollerna i hörnet av appen. Eftersom fönsterkontroller är olika på Windows, Linux eller macOS, måste du använda olika breddvariabler beroende på plattformen där appen körs. Du kan hitta mer information om denna funktion på Mozillas utvecklarnätverk.

Microsoft pratade först om Window Controls Overlay för över två år sedan, och det började implementera det i Chromium-motorn en tid senare. Funktionen är nu tillgänglig i Edge och Chrome från och med version 105, samt Opera version 91. Andra Chromium-baserade webbläsare bör också stödja det om de kör den senaste Chromium-versionen. Det finns också en formell specifikation publicerad som bör uppmuntra andra webbläsare, som Firefox, att också implementera funktionen.


Källa:Microsoft