[Solved] Is it possible to make a PWA that will start in fullscreen on Android?

Questions
1

I’ve written a lot of three.js code, but I’m completely new to adapting three.js to mobile, so before I spend considerable time reading books about how exactly to make a decent PWA, I’d like to know if this is possible at all.

I’m developing a pure 2.5D + 3D stereo + VR app, so for the last two, fullscreen is a must. I’ve already implemented fullscreen on/off on PC via a button, but ideally it should start fullscreen on mobile without user interaction. I have also created a manifest.json and some suggested meta settings.
I have read some articles but I’m still not sure about the requirements.

I prefer to develop the app offline, serving to mobile via WIFI, so:

  • is there an HTTPS serving local server (with a valid certificate) a must, or can this hassle be avoided via some workaround?
  • is user-interaction necessary to enter fullscreen on android?
  • if (user interaction) is necessary, then is an HTML element necessary to get a touch event in order to enter fullscreen mode, or can a touch event be captured somehow in a pure 3D three.js environment?
    (While I’m writing this, I figured that perhaps a transparent HTML element on top of the scene could be used to capture touch events…?)
  • do I need service workers? (that is also new to me).

So many questions …just for a single mode change :slight_smile:

2
  1. I don’t think so. In any case, Ionic / Capacitor can instantly trigger fullscreen you (they support PWA as well as native WebView apps.)
  1. If you are creating a client-side app, you shouldn’t really need to set up any kind of server on their device :thinking: (unless I misunderstand.)
  1. As in point 1 - I highly doubt it’s required. :sweat_smile: Requiring user-interaction is painful enough for audio contexts - requiring it just to toggle fullscreen would give a questionable user experience.
  1. Not unless you know you need them (they can be used to handle PWA in offline mode and do some fancy tricks - but you can do quite a lot of that also without diving into service workers.)
3

Thanks, I managed to make it load in fullscreen just by adjusting the manifest.json and the meta tags on the html correctly and setting on manifest:

“display”: “fullscreen”,
“start_url”: “/?fullscreen=true”,

(despite there are articles that say “fullscreen” doesn’t work).

It starts automatically in fullscreen ONLY after you have added the app in your homescreen and you start it by touching the icon. Before that step, it includes the top bar.

It didn’t require HTTPS or service workers, but I’ve read that when the app is offline the fetch event by the worker will be required by Chrome mid-2021.

Also according to Google HTTPS is required to get an install prompt, therefore it is good to have it during development too:

1 Like