News

Get a web app to emulate a mobile app on Android

Discover how to install a web app to your home screen so it behaves like a real app.

Web app main

The term app immediately brings to mind anything that resides on the Google Play store. It can be downloaded specifically for an Android device and will have its own icon once installed. But, there is a new face on the horizon in the shape of web apps. What are these? These are applications that are built using web technologies such as HTML5, CSS3 and Javascript.

A web app could, dare we say it, work as well on an Apple device as an Android device. The issue with web apps is that they reside at a URL and are accessed via a web browser. This in turn means that every time a web app is accessed all the typical browser elements are on show. Since Google Chrome 31, the Add to home screen option has enabled correctly formatted web apps to switch to app mode and act in the same style as a native app. Here we take you through how to enact this feature.

 

  1. app01

    Choose a web app

    The first step in the process is to select a web app to emulate the way a real app works. For this tutorial we are going to use the Penzu web app, an online journal application. If you have an alternative web app you wish to use feel free to use this instead.

  2. app02

    Get the latest browser

    Make sure that you have the latest version of Google Chrome installed or at least version 31. Without this version, or above, the Add to home screen feature won’t be there. Check your version via Settings>About Chrome. If needed, head to the Google Play store to get the latest update.

  3. app03

    Web URL

    If not already open, access the Google Chrome browser ready for use. Now head to the location of the web app being used. The Penzu app can be found at https://penzu.com. Note that whatever URL is used, this is the URL that the new ‘real’ app will open at.

  4. app04

    Name the app

    Tap the menu icon. Towards the bottom of the menu will be the Add to home screen option. Tap the option and a window pops up. By default, this will display the default name for the app. This will be the title of the webpage. Add a new title if desired.

  5. app05

    App icon

    After naming the app, tap Add and Android will switch to the default home screen. After a few seconds the icon for the selected web app will make an appearance onscreen. By default, the icon will be placed after all the current icons. Tap and drag to place it elsewhere.

  6. app06

    App mode

    With the new icon in place, tap and wait for the web app to load in its new full screen app mode. The new look app will resemble the original URL, but it will be lacking any elements of a browser window. You will now be able to use the web app as a full normal app.

  7. app07

    Task Switcher

    A web app in app mode is recognised exactly like an installed app. This means that web apps launched from the home screen will appear in the task switcher. They are not tagged up as a Chrome task but will be assigned the title Web App to make the distinction.

  8. app08

    Remove the app

    The app created from the web app is effectively a shortcut to a live URL. This means that the app is not installed like a traditional app. To remove the app all that is needed is to remove the icon from the home screen. Tap and hold down the icon and drag to Remove.

 

×