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.

The use of a fullscreen PWA has a whole host of benefits, including the increased immersion, felt throughout the experience.  Thankfully, this is relatively straightforward to enable JavaScript developers. The only requirement is the use of a modern frontend framework.

So, how exactly can you 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.

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:

• Navigate to the desired PWA web address ( in my case Progressive Beer)
• 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:

• Standalone
• FullScreen
• Minimal-UI
• Browser

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.

{
    ...
    "display": "fullscreen",
    ...
}

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

{
    ...
    "display": "standalone",
    ...
}

• 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

Minimal UI

The application will look and feel like a standalone application but will implement a minimal set of UI elements for controlling navigation. 

{
    ...
    "display": "minimal-ui",
    ...
}

• 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

Browser

The default standard browser experience.

{
    ...
    "display": "browser",
    ...
}

• The standard browsing experience is retained
• Browser navigation UI elements will be shown.

Conclusion

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.