How to Hide The Address Bar in a Progressive Web Application
When creating an interactive experience for a user there are many different factors relating to the user’s browsers viewport that should be considered. How a user views the application will naturally dictate the quality of experience that he/she has.
Situations commonly arise where a fullscreen application is required to fully immersive a user into the experience. A fullscreen mode has the capabilities to enhance a progressive web app and its content. Some PWA experiences may not even be fully realized without a full-screen option.
For applications attempting to convey these experiences, there should ideally be no indication that the user is viewing a Progressive Web Application through a browser.
In general, if a web app uses custom navigation buttons to control its experience then hiding the browser’s native navigation UI is essential.
Some interesting use cases for a full-screen PWA includes:
Multiple iPads showing an interactive experience for its visitors.
Think of museums, conferences, and marketing conventions.
Tech demos that include a lot of video-based material.
Restaurants displaying their menus on iPads.
Retail outlets using full-screen payment processors.
So, how exactly can you hide the address bar in a PWA?
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.
This is usually there by default with an Angular or React project. However, there is one small caveat for this process. In order for a user to fully realize a PWA’s full-screen experience they must install the application onto their device (iPad, iPhone, desktop).
This is a crucial step as the app.manifest file will only work when this has been done.
With this in mind, the following steps will install a Progressive Web App to your desktop:
From browser navigation – three dots at the right-hand corner) install the PWA locally – Install Progressive Beer
This option won’t be available if the site is not a true Progressive Web App.
Click install for the next prompt.
The application will now be available to run outside the confines of the browser.
The locally installed application will now follow the rules specified in the manifest.json file. A standard practice by frameworks such as React is for the manifest.json file is to be put into your dist folder at build time.
There is a wide range of configurable options here, however, in order to hide the address bar in Google, we are concerned with the display property. The display mode essentially decides what browser UI is shown for the user interacting with your web app.
There are multiple choices that can change the UI is displayed, including:
Let’s have a look at each of these modes, starting with the one that hides the address bar.
Fullscreen Display Mode
This is, of course, the mode used for an app to go full screen.
The entire display area available on the device is used by the app.
Typical browser elements like address bars and back/forward buttons are hidden.
If on an Android device, the status bar is also hidden.
Standalone Display Mode
This is the most common display value for a Progressive web app.
The application will feel more native and resemble a standalone application
Can have its own custom icon for the app launcher shortcut
The app can have different window
User-agent will also exclude UI elements for controlling navigating
The application will look and feel like a standalone application but will implement a minimal set of UI elements for controlling navigation.
On mobile and tablet devices, the web app runs in its own window separate from the browser.
The elements that are hidden will vary by browser.
The UI elements that are retained can have limited functionality e.g address bar is displayed but can not be typed into
The default standard browser experience.
The standard browsing experience is retained
Browser navigation UI elements will be shown.
So there we have it, the amount of customization for display modes can really help to define the experience of the application. There are undoubtedly many different creative applications that will benefit from having a full-screen mode.
It can enable progressive web applications to be perceived differently. There is almost a more cinematic feel displayed as the user is navigating through the experience.