I am doing a small experiment to write a simple mobile game as a website. I don't want to overcomplicate the setup. In the end, it's online content, and it should provide a nice experience on smartphones.
I use a simple manifest to allow the application to run in fullscreen mode when added to the home screen and started there (currently, I only worry about Andorid).
manifest.json:
...
"display": "fullscreen",
"orientation": "portrait"
...
Works like a charm. It's a true fullscreen mode even hiding the lower bar with the "back", "home", "switch apps" buttons. Great immersive experience for a game!
Now, how can I support my user to exit the app? All the OS buttons are gone. I added an "exit" button the the games titles screen. But I fail to implement it.
exitFullscreen (and all the other vendor-specific versions) do basically nothing.
window.close() does nothing, most likely throws the typical warning that it cannot close windows which haved been opened by the javascript.
history.back() is sort of strange, and does not seem to work in the end either. I am doing a SPA with vue-router. So fiddling with the history is a bit difficult for me here. Maybe I am just doing it wrong atm.
Update on that: I confirmed by adding a simple button always calling history.back() to all pages of my SPA. When I am at the first page, this button does nothing any more.
Is there a way to implement such an "exit" button?
I have seen: How to close a progressive web app
The difference is, I have a fullscreen app, which makes it not really obvious how to close/exit the app.
