Hide address bar in Progressive Web Applications

问题

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:

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).

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?

回答1:

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.

回答2:

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.

回答3:

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'/>

回答4:

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 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 is a guide on how to build an assetlinks.json file:

https://developers.google.com/web/android/trusted-web-activity/quick-start#creating-your-asset-link-file

Also see here:

https://github.com/pwa-builder/CloudAPK/blob/master/Asset-links.md

---

Sidenote:

When building my app with bubblewrap, I kept getting this annoying error 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 solved the problem by installing an earlier version of Android SDK tools as suggested by @krayanni in this post from a different repo.

I think latest version '6200805' has some issue, even I got the same problem.

Solution: Use the older sdkmanager version, please find below links for older version.

Windows no installer: https://dl.google.com/android/repository/sdk-tools-windows-4333796.zip

MacOSX: https://dl.google.com/android/repository/sdk-tools-darwin-4333796.zip

Linux: https://dl.google.com/android/repository/sdk-tools-linux-4333796.zip

EDIT: Apparently, if you unzip the files with 7zip instead of the default windows extractor, it should work fine. I haven't tried this though.

more info here

---

Verify assetlinks.json

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

Debugging Digital Asset Links

As the debug certificate is different from the release one, and the fingerprint for debug should not be listed on the assetlinks.json file, is important to check if your Digital Asset Link is linked and verified.

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 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

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 (I built it with bubblewrap because it has more flexibility than PWABuilder, though it only works for Android) set to https://example.com instead of https://www.example.com 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, and paste that into PWABuilder.

The address bar should be gone.

来源：https://stackoverflow.com/questions/51788623/hide-address-bar-in-progressive-web-applications