Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hide address bar in Progressive Web Applications

Tags:

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?

like image 929
Jose Hermosilla Rodrigo Avatar asked Aug 10 '18 14:08

Jose Hermosilla Rodrigo


People also ask

How to hide the address bar in a PWA?

Well, in order to hide the address bar in a PWA, you must first create a app.manifest file in the root of your JavaScript project. The web app manifest is a plain JSON file that indicates to the browser details about your web application and how it should perform when installed onto a user’s mobile device or desktop.

What elements are hidden in a progressive web app?

Typical browser elements like address bars and back/forward buttons are hidden. If on an Android device, the status bar is also hidden. This is the most common display value for a Progressive web app.

How do I install a progressive web app on a desktop?

Progressive Web Apps are easy to install with a new install button in Chrome’s address bar (omnibox). On desktop, there's typically no indication to a user that a Progressive Web App is installable, and if it is, the install flow is hidden within the three dot menu.

Why can't I see the browser address bar in my App?

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.


2 Answers

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.

like image 168
aareeph Avatar answered Sep 18 '22 14:09

aareeph


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.

like image 31
alvaropaco Avatar answered Sep 17 '22 14:09

alvaropaco