💬
Get Help
Georgi Marinov
Georgi Marinov

PWA viewport, status bar, safe area, fullscreen problems

Hello everyone 👋

I'm developing a Progressive Web App (PWA) with FlutterFlow and trying to get it as close as possible to the native mobile app look-and-feel.

The first problem is the status bar - if you create a simple page with FlutterFlow that does not use Safe Area and put a background image on it, it covers the whole screen on the device, and the status bar becomes transparent. This is how it looks in mobile app, and how I want it to look in the installed PWA on mobile phone too:


When deploying to web, the PWA looks like this by default:

When reading online all resources mention that you need to do a few things to achieve the desired effects (resources I've checked will be in the end of the post):

  1. Add the following tags in your HTML

<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

  1. Add the following CSS (this is so your UI elements do not overlap with the actual status bar):

    <style>
body {
  min-height: calc(100% + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
</style>

  2. MOST IMPORTANT! set your viewport-fit to "cover":

    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

I've created a glitch.me demo of a minimal PWA that has a background image and incorporates those aforementioned elements at https://wooded-fir-bush.glitch.me - you can open this and install the PWA when the popup opens to test for yourself, please!

It works on iPhones, but unfortunately, it does not work on Android! Here's the result I'm getting for android phones:


After some more research, I saw that you can actually get rid of the status bar by editing the manifest.json and making your PWA fullscreen, which should work on both iOS and Android:

"display": "fullscreen",

Updated glitch demo with fullscreen feature - https://solstice-cyber-gigantspinosaurus.glitch.me
Here's the result I'm getting now, finally! Both iOS and Android phones:

Now, as to implementing this in Flutterflow, you can use PWA custom headers, but there seem to be a couple of problems:

  1. Manifest.json file is not editable - apparently last week someone made a feature request for this, but I have no way of seeing if this is true?

  2. Viewport meta tag is not editable / gets overwritten. If I place the viewport snippet in PWA custom headers and deploy, when I open console I see this error:

    WARNING: found an existing <meta name="viewport"> tag. Flutter Web uses its own viewport configuration for better compatibility with Flutter. This tag will be replaced.

    On further investigation, it seems that flutter automatically adds a viewport tag in the code (after the headers), which overrides my viewport configuration.

Can we please get some more control over the Web deployment option?
We need to be able to edit manifest.json, and perhaps the full index.html, please!

Meanwhile, if someone knows how to help, please comment!

References:
1. https://blog.alexwendland.com/2020-09-25-translucent-status-bar-in-pwas-on-ios/
2. https://dev.to/akshaykumar6/progressive-web-apps-configure-status-bar-16fa
3. https://www.netguru.com/blog/pwa-ios
4. https://webkit.org/blog/7929/designing-websites-for-iphone-x/
5. https://forum.bubble.io/t/another-pwa-status-bar-question/275324
6. https://forum.bubble.io/t/anyone-else-have-to-do-this-ios-status-bar-hack/48017
7. https://github.com/anthonypena97/chromeios-viewportfitcover

6
3 replies