PWA manifest causing poor experience on Android

Support Bug Reports
1

Problem description:
The current pwa manifest has minimal-ui mode, which is much bulkier than standalone mode on mobile. Causing phones and tablets using the PWA to lose a permanent 15% of screen.

https://replit.com/public/manifest.json

Impostor:
display_override": ["window-controls-overlay", "minimal-ui"],

Expected behavior:
a full screen pwa

Actual behavior:
85% screen pwa when working in replits.

1000000305
1000000305674Ă—527 41.3 KB

Steps to reproduce:
open a replit in a pwa.

Browser/OS/Device:
Android 13, Google Pixel, Chrome

additional notes:
The Java app does not and will never have feature parity with the PWA… currently only one shell can be opened, text from console cannot be selected precisely, templates can’t be updated, webview can’t be used simultaneously, extensions don’t work, it crashes on some popular phones… the list goes on and on… so please maintain the PWA, if for no other reason than to have a lifejacket for when the many times the java app doesn’t work.

1 Like
2

Try using the Replit Mobile App Instead of the PWA for an improved experience.

2 Likes
4

Replit doesn’t even handle window-controls-overlay correctly, so they shouldn’t even claim to support it IMHO.

1 Like
6

I’ve listed the reasons why I’m using the PWA at the bottom of the OP.

I did extensive testing and found that on android it’s falling back to minimal-ui, which is a lot chunkier than standalone as seen in the screenshots.

On the desktop, minimal-ui is never used AFAIK, so removing it should not pose any issues for anyone. Alternatively, using “fullscreen” before or instead minimal-ui would also fix the problem.

While you’re at it, the 192x192 icon is actually 196x196, which makes chrome throw a warning and may cause other problems.
https://replit.com/public/icons/icon-rounded-192x192.png

You can change the spec to 196x196 or use a 192x192 version like the one I’ve made below:
icon-rounded-192x192

Here’s how I figured this out:

  1. Start ADB debugging on an android tablet / foldable / phone and connect to an ADB host machine
  2. Open Chrome and navigate to replit
  3. Open the inspector and inspect replit on a host at chrome://inspect once connected
  4. reload and edit public/manifest.json, remove minimal-ui
  5. Reload the page on Android with DevTools still connected and reinstall replit PWA. My cache was disabled on the network tab of DevTools.

Manifest changes are very sticky, so it will survive after disconnecting and it will survive a reload. To go back to stock, reinstall the Replit PWA from a fresh chrome tab with devtools disconnected.

1 Like