Fullscreen Java API available in Flow Viritin 2.17.0

Flow
1

Built a Java API around the Fullscreen browser API. This is a fresh start without legacy browser hacks, but contains some workarounds for certain compatibility problems with Vaadin & full screen mode. Current features:

  • Allows requesting fullscreen mode for entire app
  • Allows requesting fullscreen mode for a specific Component
  • Allows exiting fullscreen mode (NOOP if not in fullscreen mode)
  • Allows checking if currently in fullscreen mode (async)
  • Allows listeting fullscreen mode changes

The first one is trivial also with executeJS method if your figure out it is best request fullscreen mode on window.document for Vaadin to work properly (theme and overlayes). Other methods try to workaround those issues. Released in Viritin 2.17.0, as allways feel free to copy helpers to your own project, but I’d appreciate if you can share possible improvements with the rest of Vaadin community :teddy_bear:

If you find bugs, please report them soon while I have all details of hacks in my mind! The only known issue I have currently is if you have some “custom stuff” in your index.html file or you are embedding your Flow app. With “pure Vaadin Flow apps” things ought to work fine.

Links:

2 Likes
2

Nice, it seems you can go from full screen app to full screen view, but not back by pressing the buttons.
I’m on an updated Firefox, Win 11

3

Thanks, Mac+Firefox combo works. Can you see some error in the browser console? I don’t have Windows machine (or VM) on my hands ATM so that I could test immediately.

4

Very nice. That is quite useful. Now if they could get PWA working again.

5

Only thing I have from error + warnings + info + logs + debug is this and it’s mostly from when loading the page, nothing happens when I push the button “Fullscreen the app”.

Browser Console Mode
Parent process only(Fast)
Multiprocess(Slower)
Wed Aug 06 2025 20:57:40 GMT+0200 (Central European Summer Time) Atmosphere: beforeunload event vaadinPush-min.js:1:42452
Wed Aug 06 2025 20:57:40 GMT+0200 (Central European Summer Time) Atmosphere: websocket.onclose vaadinPush-min.js:1:42452
Websocket closed, reason: The endpoint is going away, either because of a server failure or because the browser is navigating away from the page that opened the connection. - wasClean: true vaadinPush-min.js:1:42452
Wed Aug 06 2025 20:57:40 GMT+0200 (Central European Summer Time) Atmosphere: Firing onClose (closed case) vaadinPush-min.js:1:42452
Wed Aug 06 2025 20:57:40 GMT+0200 (Central European Summer Time) Atmosphere: Request already closed, not firing onClose (closed case) vaadinPush-min.js:1:42452
Wed Aug 06 2025 20:57:40 GMT+0200 (Central European Summer Time) Atmosphere: invoking .close() on WebSocket object vaadinPush-min.js:1:42452
Wed Aug 06 2025 20:57:40 GMT+0200 (Central European Summer Time) Atmosphere: Firing onReconnect 2 vaadinPush-min.js:1:42452
Wed Aug 06 2025 20:57:40 GMT+0200 (Central European Summer Time) Atmosphere: unload event vaadinPush-min.js:1:42452
Wed Aug 06 2025 20:57:40 GMT+0200 (Central European Summer Time) Atmosphere: Closing (AtmosphereRequest._close() called) vaadinPush-min.js:1:42452
Wed Aug 06 2025 20:57:40 GMT+0200 (Central European Summer Time) Atmosphere: Request already closed, not firing onClose (unsubscribe case) 2 vaadinPush-min.js:1:42452
Vaadin push loaded vaadinPush-min.js:1:45447
Invoking executeWebSocket, using URL: wss://addons.dokku1.parttio.org/VAADIN/push?v-r=push&v-uiId=12&v-pushId=ac921923-aa53-4d20-b225-609e28913db7&X-Atmosphere-tracking-id=0&X-Atmosphere-Framework=4.0.1&X-Atmosphere-Transport=websocket&X-Atmosphere-TrackMessageSize=true&Content-Type=application/json; charset=UTF-8&X-atmo-protocol=true&X-Vaadin-LastSeenServerSyncId=0 vaadinPush-min.js:1:42452
Wed Aug 06 2025 20:57:41 GMT+0200 (Central European Summer Time) Atmosphere: websocket.onopen vaadinPush-min.js:1:42452
Websocket successfully opened vaadinPush-min.js:1:42452
Wed Aug 06 2025 20:57:41 GMT+0200 (Central European Summer Time) Atmosphere: websocket.onmessage vaadinPush-min.js:1:42452
Wed Aug 06 2025 20:57:41 GMT+0200 (Central European Summer Time) Atmosphere: Firing onOpen 2 vaadinPush-min.js:1:42452
Unexpected value [[__computeViewBox(size, __viewBox)]] parsing viewBox attribute. chunk-5bd30f8b09a2281006e43d00b76c60d97c5f854c6e5117bd24ee69170924d579-CJRxEyU5.js:1387:702
Unexpected value [[__computePAR(__defaultPAR, __preserveAspectRatio)]] parsing preserveAspectRatio attribute. chunk-5bd30f8b09a2281006e43d00b76c60d97c5f854c6e5117bd24ee69170924d579-CJRxEyU5.js:1387:702
Unexpected value [[__computeViewBox(size, __viewBox)]] parsing viewBox attribute. chunk-5bd30f8b09a2281006e43d00b76c60d97c5f854c6e5117bd24ee69170924d579-CJRxEyU5.js:1379:2589
Unexpected value [[__computePAR(__defaultPAR, __preserveAspectRatio)]] parsing preserveAspectRatio attribute. chunk-5bd30f8b09a2281006e43d00b76c60d97c5f854c6e5117bd24ee69170924d579-CJRxEyU5.js:1379:2589
6

Thanks @mikael.fiil, nothing suspicios there, gotta debug somepoint with that browser/OS combo.

@ktaylor713 What is wrong with PWAs :thinking: I’m using those heavily on daily basis.

7

@mikael.fiil I was now able to reproduce the issue, it was actually present at least in certain situations with Safari. The workarounds for improved component-fullscreen-mode, where in certain cases not restored if moved directly to another kind of fullscreen mode. Not sure how common that would be (in other but this kind of lazy feature examples), but I think I managed to workaround it properly. A new version with the fix should be deployed about now :partying_face:

2 Likes
8

FIrefox + Win 11 works with the demo now

2 Likes