FormularSumo / Galaxy-Collection-Web

Love.JS Web port of https://github.com/FormularSumo/Galaxy-Collection hosted on GitHub Pages
https://formularsumo.github.io/Galaxy-Collection-Web/
GNU Affero General Public License v3.0
2 stars 0 forks source link

Fullscreen issues/behavior, browser vs PWA #10

Open FormularSumo opened 2 months ago

FormularSumo commented 2 months ago

In theory I've set the game to always open/be in fullscreen in the manifest file, so a dedicated fullscreen button shouldn't be needed when installed as a PWA. In practice, not so much.

Chrome Android

This works reasonably well for Chrome Android as a PWA - Android UI is hidden most of the time, whether landscape or portrait. It's not perfect though as gesture navigation still works as if the game wasn't in fullscreen, so swiping up or from either side exits the app immediately. In native apps that are fullscreen, it requires two swipes to perform these actions to prevent the user accidentally performing them mid-game.

Weirdly if you do then press the fullscreen button, the back button takes two swipes to work, but the swipe up to leave still works first time. This seems like a bug? Also strange is that you get a notification each time you rotate the screen saying "swipe twice from the side or bottom of your screen to exit", which seems unnecessary given it doesn't happen when you're in fullscreen due to the manifest declaration. And as native apps don't get it I afaik. Another bug I guess.

In the Chrome browser, when you go into fullsceen behaviour is mostly as expected - it takes two swipes to exit both by going to the homescreen and going back. Unfortunately there is also the toast when you rotate telling you how to exit.

Firefox Android

When installed as a PWA, the Android system UI does not hide by default when cold launched which is not great, and like Chrome a swipe from bottom or sides will exit immediately. However, if you then leave the app or switch apps, it does correctly go into fullscreen, and takes two swipes to exit from either the bottom or side of the screen. It the same behaviour if you click the fullscreen button after a cold start, it does the same. Plus there's no toast telling you how to exit if you rotate. Less good is if you click the fullscreen button when you've switched back into the app - it doesn't do anything except when you then go back it then breaks the manifest fullscreen, reverting to showing the system UI. So this is actually perfect when it works - it just should work without having to relaunch the PWA. I've written my findings on the relevant bug here.

Running in browser Behaviour in fullscreen is same as in PWA - ideal.

Note: Both Chrome and Firefox on Android mostly do not go into fullscreen via first user interaction with the website like on desktop, require pressing button or installing as PWA in the case of Chrome. Firefox PWA does seem to occasionally but not very consistently. Another bug I guess?

iOS

iOS PWA shows the whole system UI when in portrait, but hides specifically the status bar when in landscape. Navigation bar is still shown - and takes just a single swipe to exit. Reported by me and Jesper. There's also a random blue line shown on the right edge of the screen who knows why. For iOS in browser see #8

Desktop

PWAs (Chromium or Webkit Linux, dunno about macOS) do not hide the status bar by default or go into fullscreen despite the manifest unfortunately. Another bug I guess (debatable)? The code to make first user interaction with the page to go into fullscreen does work well though, at least, including in PWAs.

When the game is actually in fullscreen, it functions as intended. All system/browser UI hidden and you can't leave via an accidental gesture. Mostly at least - Chrome (including in PWAs) displays an "X" to exit at the top if you move your mouse all the way up, but that's not a major issue. Firefox and Gnome Web do not do this. Safari hopefully doesn't..

Conclusion

Summary of all this is there isn't a single platform where fullscreen is working properly on web apps and therefore I'd want to remove the fullscreen button. Chrome Android is the closest, but the button does disable single swipe to exit from the side, while also adding a toast notification if you rotate... And the only platforms where being fullscreen actually works perfectly is Firefox desktop and Android, and Gnome web. Although the button is still needed as otherwise it's hard to get (back) into fullscreen on both (PWA on Gnome web or not).

I can almost see why people build electron/webview/PWAbuilder/other web-language-wrapped apps now :/