Home » Tutorials » Mobile Web Development » Build Full Screen Mobile Web App For Android Chrome

Build Full Screen Mobile Web App For Android Chrome

Build Full Screen Mobile Web App For Android Chrome

I would like to share you how to build a Full Screen Web App for Android devices. Full Screen Web App is useful to users, it has already designed to be full screen without browser chrome (such as URL address bar), & has an icon on the home screen, loads as a top-level, & without install required.

In this article, you’re going to learn step by step on how to set up your web app to have an app shortcut icon added to Android’s home screen, & have the app launch in full screen mode using Chrome for Android’s “Add to home screen” features.

If you want to set up Full Screen Web App for iOS devices (such as iPhone & iPad), please proceed to “Optimizing Full Screen Mobile Web App for iOS article”.

Tutorial Details

  • Difficulty: Beginner
  • Technology: Basic Knowledge of HTML & JSON
  • Supported Browser: Chrome for Android 39 & above

Step 1: Define Your Web App’s Settings

The first thing you need to do is to define your web app’s settings such as your app’s title, landing page, default orientation (portrait or landscape), & different size of icons depending on device’s screen density in a piece of JSON-based manifest.

{
  "short_name": "onlyWebPro",
  "name": "onlyWebPro - Online Web Development Tutorials",
  "icons": [
    {
      "src": "touch-icon-36.png",
      "sizes": "36x36",
      "type": "image/png",
      "density": 0.75
    },
    {
      "src": "touch-icon-48.png",
      "sizes": "48x48",
      "type": "image/png",
      "density": 1.0
    },
    {
      "src": "touch-icon-72.png",
      "sizes": "72x72",
      "type": "image/png",
      "density": 1.5
    },
    {
      "src": "touch-icon-96.png",
      "sizes": "96x96",
      "type": "image/png",
      "density": 2.0
    },
    {
      "src": "touch-icon-144.png",
      "sizes": "144x144",
      "type": "image/png",
      "density": 3.0
    },
    {
      "src": "touch-icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "density": 4.0
    }
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "orientation": "portrait"
}

Example above shows us the ability to control our web app appearance using manifest file, the following properties are included in the example above:

short_name

The short name of your web app.

name

The full name of your web app.

icons

An array allows you to specify different size of icon for different screen density of devices.

start_url

Your start page’s URL. It tells Chrome where to fetch the first render from the network.

orientation

The default orientation of the web app. There are 3 types of orientation you could specify for your web app:

  • portrait
  • landscape

display

The display mode of your web app. There are 3 types of display mode you could specify:

  • fullscreen: All of the available display area is used, leaving more space for the web app screen content. Ideally for web game.
  • standalone: hide browser’s user interface, delivers your web app in full screen, native-like, but it will still includes status bar.
  • borwser: delivers your web app as a normal site in a browser with all browser chrome. This is much useful if a back-button is needed in your web app.

Step 2: Set Up Splash Screen

Splash screen is very important for mobile app. It provides a better user experience when the mobile app loading from the network where it takes more than 1 second to get any content visible on the home page.

To have a splash screen in your web app, you can simply set a background color using the background_color property in your manifest file:

"background_color": "#1c1c1c"

A splash screen image is drawn from the icons array. Chrome chooses the appropriate image that is closest to 128dp for the device.

The splash screen will display immediately when the web app is launched & remain on the screen until the web app’s first render.

1dp is 1 physical pixel at a screen density of 160dpi.
128dp at 1x (160dpi) = 128px

Step 3: Link The Manifest To Your Web App

Once you have your manifest file ready, you need to link it to your web app:

<link rel="manifest" href="/manifest.json">

Preview

That’s it! Save your document, open up your Chrome for Android, then navigates to your document.

Lauch Chrome for Android Browser

Once your document is loaded, tap on the “3 vertical dots” icon located on right corner.

More Settings of Chrome

Press “Add to Home Screen”.

Add to home screen Chrome

Press ADD.

Confirm add to home screen

Jeng Jeng!! You should able to see your web app’s shortcut icon appear on your home screen now.

onlyWebPro web app on Android

Launch your web app & have fun!

Chrome web app splash screen configuration

Demo

The onlyWebPro’s official website has been embedded Add to Home Screen function. Try it out yourself!
1. Use your Android device’s scan QR code app to scan the following QR code.
2. Launch the URL with Chrome for Android
3. Once your document is loaded, tap on the “3 vertical dots” icon located on right corner.
4. Add to Home Screen.
5. Tap on the onlyWebPro launcher icon on your home screen and see how it works!

onlywebpro chrome web app qr code

Conclusion

Browsing on mobile devices has been growing dramatically in the past few years. By applying the Add To Home Screen features you’ve learned in this article you can ensure that you’re delivering the best mobile web experience to your mobile users.

Although you’ve just configure your web app launch in full screen mode using Chrome for Android’s “Add to home screen” feature, the ability to “Add to home screen” is still hidden behind a menu, meaning that your apps still aren’t as discoverable as they should be.

In the next article, we will discuss about increasing the chance of a user adding your web app to the home screen by displaying Web App Install Banners. Stay tuned!

More Mobile Web Development Tutorials:


Android, iOS Development Tutorials