Hiding window controls elements and translucent option

[antonioberetini]

1. To further control the look of the app once installed, there should be an option to disable controls that we don't need, outline in red.

2. There should also be a way to set window control to transparent. At the moment, when controls are overlayed over the user interface, default fill brakes the look of the application. There should be an option available to set translucent background instead.

See attached

[amandabaker]

1. Currently, these buttons exist both as controls and as spoofing mitigations, so there is a very low chance of them being removed. Out of curiosity, are you intending to allow the user or the developer to disable them?
2. Transparency has two major risks: spoofing and accessibility. If the background is transparent, it gives the app more freedom to spoof UI to imitate the browser or other apps, and to do so very convincingly. Transparency also puts the controls within the overlay at risk of not having sufficient contrast for users to see the controls (e.g. white text on a white background). What scenario are you wanting to support that requires transparency?

[antonioberetini]

1. Yes programmatically. A user already showed intent by clicking to install an app from the browser. Same goes for downloading a PWA from Windows store. It just makes no sense to butcher an app with unnecessary elements if the goal is to make PWA behave like a native application.

2. By design, the header of this product is transparent, and it includes surface blur. Clearly, we don't want window controls section to stand out, it should match the design of the header. In terms of accessibility, this doesn't seem to be a problem for iOS and Android, both offer translucent option for their status and nav bars.

PWA is a great approach for developers that are looking to target Windows, Android and Chrome OS. These types of developers are usually building hybrid apps. All other hybrid app approaches are built to mimic native apps, and all give controls over window controls.

Above is the actual app that will be listed on Windows Store. We ended up opting in for the WebView 2 approach instead. I don't see how PWA is ever going to become a thing if it still behaves as a browser. In my opinion, the only way a PWA has a future on Windows, is if they look like any other native application. Windows 11 design approach with Mica Material uses transparency and blur and controls are transparent. It makes no sense that PWA on Windows 11 looks any different.

Its all about consistency

[antonioberetini]

Also, is there a way to make PWA with Windows Controls Overlay enabled automatically load in collapsed mode. By default, it opens expanded. Am I missing something here?

[anaestheticsapp]

Also, is there a way to make PWA with Windows Controls Overlay enabled automatically load in collapsed mode. By default, it opens expanded. Am I missing something here?

Had the same thought (https://github.com/WICG/window-controls-overlay/issues/27). When I implemented WCO, hardly anyone clicked on the chevron to active WCO (2 out of 97 users had it enabled). I can think of three ways to solve this:

• Adding it to a grouped permission prompt on install (https://twitter.com/AnaestheticsApp/status/1435675112985010178)
• Enabling this by default when the PWA is installed from an app store.
• Allowing devs to toggle WCO using JavaScript, which opens a permission prompt (ie like Push Notifications). That way, we can at least develop our own user interface to help users activate WCO).

[bastecklein]

I would settle for just allowing a PWA to use the new Mica color as it’s background. It’s not so transparent as to allow spoofing, and would be enough to make most PWA’s look mostly native on Win11.

[tomayac]

Mica color

Saving someone else a Web search: https://docs.microsoft.com/en-us/windows/apps/design/style/mica.

[bastecklein]

Just coming back here after a year to add a +1 for a transparent background option on window controls. The current implementation is just fine for apps with a solid color, but if you want to use any sort of transparency effects such as backdrop filter, it just falls way behind a native app.

[rohmishra]

2. By design, the header of this product is transparent, and it includes surface blur. Clearly, we don't want window controls section to stand out, it should match the design of the header. In terms of accessibility, this doesn't seem to be a problem for iOS and Android, both offer translucent option for their status and nav bars.

this doesn't seem to be a problem for iOS and Android Took me less than 5 mins to make it bug out. You can see the red line from battery saver showing in top bar.

And this is a problem on iOS and Android. mostly poorly designed apps but even popular apps like snapchat, instagram, and lots of other apps randomly just have the top bar completely unreadable.

This can be solved by limiting how much darkening is allowed and/or automatically switching between dark and bright content fill colors depending on if background content is dark or light. see - navbar pill on android and iOS.

[cohenerickson]

I think that both of these would be great additions to the API. One other thing that I think would also be quite useful is the ability to change the size of the control buttons. The ability to change the size would allow developers to work with these controls instead of around them. I have a project Velocity that would see a lot of benefits from these additions, for example when a user installs a custom theme, being able to make the background transparent and changing the button size to fit in with the app would really help with the immersion.

[heladeradr]

+1 for a transparent background option on window controls. Mica would also be a great addition, but it's not a replacement for transparent window controls

[monecchi]

Indeed that feature is most wanted! I've been playing around the Window Controls Overlay (WCO) but it is quite limited, specially when dealing with dark x light theme modes...

Have you guys heard about the Borderless Mode?

Explainer

https://github.com/WICG/manifest-incubations/blob/gh-pages/borderless-explainer.md

Demo

Here's a demo of an IWA (Isolated Web App), but PWAs might have to follow a similar concept. It seems to require window management permissions...

Also, you might need to enable the PWA Borderless feature under Chrome feature flags:

chrome://flags/#enable-desktop-pwas-borderless

[requestmethod]

Additional support in window-controls-overlay for hiding the control, enabling by default, controlling with JavaScript, and styling would go a long way. The current implementation is very easy to work with, but the few remaining gaps prevent us from delivering a beautiful UI/UX, which is key for presenting PWAs as a viable alternative to native apps. It's so close!

Borderless looks great, but a different use case imo

[UtterDonkey]

Accessibility shouldn't be too much of an issue as the colour of the window controls are based on the theme-color member in the web manifest, so the developer can set the theme-color to a colour similar to the background colour of the titlebar to ensure enough contrast. However, should the colour of the titlebar in the PWA change, the contrast between the titlebar and the window controls may not be sufficient. Would either some sort of CSS variable or JS function be viable to change the theme-color on the fly to adjust for changes in the titlebar background?

[UtterDonkey]

Actually it could be a pseudo element in CSS.

background - change the background colour of the window controls overlay color - change the colour of the controls (where applicable)

::window-controls-overlay {
   background: transparent;
   color: white;
}

The background property may not able able to work with semi-translucent colours.

If color is not specified, the user agent should choose a sufficiently contrasting colour to the background colour. If the background colour is set to transparent, the user agent should fallback to the theme_color member of the app manifest and choose a colour that contrasts with that. The user agent may also wish to display a pop-up to the user when they install the app informing them that the site is controlling the titlebar.

[UtterDonkey]

I've created a more fleshed-out proposal for this: #67.