1

It seems I followed all rules for an installable PWA (including setting display: standalone), but even so, Android 9 still shows a top bar in my PWA that allows the user to close it or, through the three dots, refresh / open in Chrome / etc.

I guessed it could be related to the manifest's scope, but even that didn't work. Everything else works fine: the service worker, icons, splash screen... but this. Any hints?

The manifest is served from website.com/static/blabla/manifest.json, while the actual app is served from website.com/orders. I tried setting the scope and/or start_url to https://website.com or https://website.com/orders, to no avail.

I'm referring to this section I marked in red (there's no real application yet, so that's part of Chrome's UI, not my application):

Chrome UI in installed PWA

Sorry if this is a dup, this is quite a hard topic to search - tons of actual Android development questions

igorsantos07
  • 4,456
  • 5
  • 43
  • 62
  • You can convert your PWA to TWA to achieve this. – NIKHIL AGGARWAL Feb 26 '20 at 03:31
  • wait, you're suggesting to go from web development into creating a webview app using Android Studio? Or did I skim read [the article](https://developers.google.com/web/updates/2019/02/using-twa) too fast? This doesn't make sense at all (besides breaking the main idea of installable PWAs), it seems to work fine with the [MDN sample PWA](https://mdn.github.io/pwa-examples/js13kpwa/). – igorsantos07 Feb 26 '20 at 03:35
  • Did you ever find a solution to this? – Douglas Gaskell Feb 01 '21 at 01:44
  • @DouglasGaskell not yet. PWA became a low priority for us, so it got pushed down the task list :( – igorsantos07 Feb 14 '21 at 16:45

3 Answers3

0

first, I would serve the manifest from the root of the PWA's origin, just a best practice.

Anyway, you need to set the display mode to standalone.

"display": "standalone",
Chris Love
  • 3,740
  • 1
  • 19
  • 16
  • sorry for not mentioning it in the question, but I've done it (will edit to make it clear). I'll try to change the manifest's path, but it doesn't seem related to the issue, does it? – igorsantos07 Mar 03 '20 at 01:30
0

This is how I eventually removed that bar for an Angular PWA.

"display": "standalone",
"scope": "/myScope/",
"start_url": "/app/welcome"

The trick (for me) was to use a sub-folder for the angular app, not put it into the scope folder.

https://www.sample.com/myScope/app/welcome

The issue seems to be that scope only includes sub-folders. Any files in the scope folder are not counted as being in-scope. I never found out if that was by design, a bug or just a misconfiguration. Just having that extra folder level, cured my scope problems.

I also had it working at a root level, but again the URL needed that extra level.

"display": "standalone",
"scope": "/",
"start_url": "/welcome"

https://www.sample.com/app/welcome
MortimerCat
  • 829
  • 9
  • 26
-1

According to ChatGPT the UI will always be visible on PWA:

Starting from Chrome 76 and later versions, the browser UI elements, including the top bar with the title, URL, and menu, are always displayed when launching a PWA from the home screen, regardless of the display mode specified in the manifest.json file.

This change was implemented to ensure transparency and provide users with a consistent browsing experience. As a result, it is not currently possible to hide the browser UI elements when launching a PWA from the home screen on Android Chrome.

Personally, I find it ridiculous - that's what the display argument was designed for, not to be ignored. If they decided to "provide consistent browsing experience" then they should have added an alternate way to override that rather than completely ignore it. Then again - it was used exactly for the purpose of overriding the default behavior so I don't get that decision at all - make the default (when display is not present) whatever you want, but respect it when it's actually set.

I've asked ChatGPT for the rationale behind this silly change in Chrome on Android and here's what it produced (if anyone's interested):

While I don't have access to the specific decision-making process of the Chrome development team, I can provide some insights into the rationale behind this change.

The display parameter in the manifest.json file was originally introduced to allow developers to influence how their web application is presented to users when installed as a PWA. The options provided, such as "standalone," "fullscreen," and "minimal-ui," were intended to give developers some control over the user experience.

However, the decision to always display the browser UI elements when launching a PWA from the home screen in Chrome was made to ensure transparency and consistency for users. By displaying the browser UI elements, users have clear visibility into the URL they are browsing and can access browser-specific functionalities, such as sharing or opening in a new tab. This change was intended to align PWAs more closely with the behavior of regular websites.

While this decision may limit the customization options for PWAs launched from the home screen, it aims to prioritize user trust and familiarity with the browsing experience. It's worth noting that the display parameter may still have an impact when launching a PWA in different contexts, such as when launched from within a browser or as a standalone window.

Pete
  • 67
  • 5
  • so it's not OK to use ChatGPT to write answers, but it's ok to use it to google stuff for you, and then you quote it? ChatGPT is now a reliable source, from 2021? – igorsantos07 Jun 09 '23 at 22:54
  • Ack! In case you weren't aware, [posting AI-generated content is not allowed here](//meta.stackoverflow.com/q/421831). I'm assuming that's why you have downvotes. If you used an AI tool to assist with any answer, I would encourage you to delete it. – NotTheDr01ds Jul 07 '23 at 10:37