24

I'm developing a PWA with VueJS. I started testing my application in real devices (Add to home screen). My application is intended to be 100% height, as it displays a map as you can see:

enter image description here

It seems that sometimes, transitions that appear from outside the viewport height, makes the address bar appear at the top of the page. For a PWA, I think this behaviour makes the app feel less native, and also, breaks my design (The button at bottom center and the whole map container are not visible unless the user close manually the address bar).

enter image description here

I tried some things I've seen in other questions:

  • window.scrollTo(0, 1);
  • <meta name="mobile-web-app-capable" content="yes">
  • from here.

I don't care if the app does not hide the address bar when visited in a web browser. But at least I want the address bar hidden when the app is launched as a "native" app (added to home screen).

I also tried changing display property in the manifest.json from standalone to fullscreen with no luck.

I know I could change the css for my button and map in order to make them "visible" when the address bar is visible, but as I said, this makes feel the app less native IMO.

Is there a solution for hidding permanently the address bar? Is it possible or it is something I have to consider in my design?

Jose Hermosilla Rodrigo
  • 3,513
  • 6
  • 22
  • 38
  • I've never seen that kind of address bar from a PWA added to Home screen from browser. It looks like Customs tabs. Are you by chance embedding your PWA in a Android native app or is it a simple PWA added using Chrome? https://developers.google.com/web/updates/2017/10/using-twa – Anand Aug 10 '18 at 14:56
  • It's a PWA added to the home screen using Chrome. I've used Vuejs PWA template to build muy app. https://github.com/vuejs-templates/pwa and the app is served over HTTPS. – Jose Hermosilla Rodrigo Aug 10 '18 at 15:11
  • Are you using a custom port on your URL? – Mathias Aug 10 '18 at 15:59
  • Hi! I'm not using a custom port yo serve my app. But if it has something to do, i'm using a custom `start_url` in my manifest.json other than `index.html` – Jose Hermosilla Rodrigo Aug 10 '18 at 16:16
  • It does make a difference for the Standalone window & Chrome. There is a known issue with ports on URLs. Once people switch to the standard, The standalone window opens without the address bar. – Mathias Aug 10 '18 at 16:19
  • But my URL looks like `https://example.com/appName`. There is not custom port. Just, the start_url in manifest looks like `/appName/index.html`. It seems that is something else. – Jose Hermosilla Rodrigo Aug 10 '18 at 17:35
  • Yes, probably not the same as the issue with the custom port if you are not using them anywhere in your app. – Mathias Aug 10 '18 at 17:47

4 Answers4

13

PWA app shows the address bar when you try to navigate the pages outside of scope. For example if you have set your scope in manifest.json file as scope: "/my-pwa/" then all the page url should have prefix like this: /my-pwa/page.html.

aareeph
  • 875
  • 1
  • 12
  • 20
  • Have you tested It? It makes sense. I'll try to test your solution and come back here to accept your answer. – Jose Hermosilla Rodrigo Jul 29 '19 at 14:02
  • Yes, these days I am working on PWA and experienced the same behavior. – aareeph Jul 31 '19 at 10:29
  • @aareeph : I have set "start_url": "/mobile_app/index.html", "scope" : "besproveninfo.com" I have tried many options but no luck. Can you please suggest the correction in scope and start_url statement – Jasmeen Oct 07 '21 at 09:39
  • @Jasmeen since your scope is "besproveninfo.com" therefore your url should start with "/besproveninfo.com". – aareeph Oct 18 '21 at 07:15
10

On Android you need to implement a TWA (Trusted Web Activities) to enable the full-screen mode. So I recommend you to use the PWABuilder to do that. The PWABuilder already returns you a assigned APK file and a assetlink.json that you will need upload to your server into a .well-known folder on the root of your host: https://www.your-domain/.well-known/assetlink.json> That way the Android display your PWA on full screen mode.

alvaropaco
  • 1,573
  • 18
  • 29
4

If I understand what you would like, I've found how to have proper display: fullscreen on android and iOS, this without any browser UI such as address bar. As said @aareeph set correctly the scope, then add this to header :

<meta content='yes' name='apple-mobile-web-app-capable'/>
<meta content='yes' name='mobile-web-app-capable'/>
Ardent Coder
  • 3,777
  • 9
  • 27
  • 53
Lyddark
  • 61
  • 2
4

TL;DR: See the last paragraph for the solution that ultimately solved it for me.

I have had the navbar on a PWA remain, even though I tried everything, so I thought I would share everything I did, what worked, and how I solved it finally, so you won't have to search for solutions online for hours like I had to.

Extending on @alvaropaco's answer, in the .zip file you get from PWABuilder, you must place the assetlink.json file in a folder named .well-known, directly under your domain. It should be accessible at https://www.your-domain.com/.well-known/assetlink.json, or the navbar will not become hidden. No exceptions. Read the README.html that came with your .apk:

Next steps for getting your PWA into the Google Play Store You've successfully generated a Google Play Store app package (.apk file)

for your PWA.

Your next steps:

  1. Deploy assetlinks.json to your server.
  2. Test your package on an Android device or Android emulator.
  3. Upload your apk file to the Google Play Store.

Each step is explained below.

1. Deploy assetlinks.json

Your zip file contains assetlinks.json. This is a digital asset links file that proves you own your PWA's domain. Upload this file to your server at https://example.com/.well-known/assetlinks.json. (Replace example.com with your PWA's URL.)

‍♂️ Heads up:

Digital asset links are required for your PWA to load without the browser address bar. If you're seeing a browser address bar in your app on Android, your assetlinks.json file is missing, inaccessible, or incorrect. See our asset links helper to fix this.

If you are not building you app with PWABuilder; maybe using bubblewrap instead, or something else, here are some sources to help you get started building an assetlinks.json file:

Sidenote:

When building my app with bubblewrap, I kept getting this annoying error that wouldn't let me continue because there was a problem installing Android SDK tools:

C:\Users\Me\Desktop\app>bubblewrap build
,-----.        ,--.  ,--.  ,--.
|  |) /_,--.,--|  |-.|  |-.|  |,---.,--.   ,--,--.--.,--,--.,---.
|  .-.  |  ||  | .-. | .-. |  | .-. |  |.'.|  |  .--' ,-.  | .-. |
|  '--' '  ''  | `-' | `-' |  \   --|   .'.   |  |  \ '-'  | '-' '
`------' `----' `---' `---'`--'`----'--'   '--`--'   `--`--|  |-'
                                                           `--'
Installing Android Build Tools. Please, read and accept the license agreement
build Installing Build Tools
Error: Could not find or load main class com.android.sdklib.tool.sdkmanager.SdkManagerCli


cli ERROR undefined
I posted a separate stack overflow answer related to this problem.

Verify assetlinks.json

To verify that assetlinks.json is correctly recognized on an Android device, run these steps: (you need to install adb and grep, first though):

Debugging Digital Asset Links

After you generated your signed APK. it can be installed into a test device, using adb:

adb install app-release.apk

If the verification step fails (if the address bar is still visible) it is possible to check for error messages using the Android Debug Bridge, from your OS’s terminal and with the test device connected.

adb logcat | grep -e OriginVerifier -e digital_asset_links

Now, make sure you app is closed completely (force stop it), and re-open it.

If it is failing you'll see Statement failure matching fingerprint. Verification failed. message. Therefore is important to review AndroidManifest.xml and build.gradle files and check if the configurations are matching with the assetlinks.json.

Otherwise Verification succeeded. message should appear.

source

What if assetlinks.json is verified but the navbar still persists?

I was having this problem, but I finally solved it with the help of this GitHub issues post. It turned out that I had the host parameter in twa-manifest.json (not manifest.json because I built it with bubblewrap - it has more flexibility than PWABuilder, though it only works for Android) set to https://example.com instead of www.example.com (note the www) where my site is actually hosted. So if you build it with PWABuilder, first go to your site in the browser, click on the address bar, copy the entire URL (Example: www.example.com and not https://www.example.com or https://example.com), and paste that into PWABuilder.

The address bar should be gone.

Solomon Lijo
  • 3
  • 2
marsnebulasoup
  • 2,530
  • 2
  • 16
  • 37