Android tip: How to run your mobile website in “web app” mode

For our customers and their clients who use Android devices, Google has made a major improvement in the mobile version of the Chrome browser, specifically as it relates to adding a web app’s icon to the home screen.

Here’s a summary of the improvements:

  1. Adding to the home screen is much simpler.
  2. Your mobile web application will run in full screen mode when launched from the home screen. In other words, the address bar and other browser chrome are no longer present allowing you to enjoy a full screen, more native experience.
  3. Your mobile web application will show up as its own entry in the task manager.

These are major improvements that will significantly improve the Android user experience. Here’s how you can take advantage of them. I’ll be using our Village Properties mobile web app as an example in this tutorial, but the steps below are identical for any mobile web application or mobile website.

These steps will work for any Android device running the most recent Chrome mobile browser on Android 4.0 or later with a web app or website with the proper html tags in place as specified here

1. Delete your old home screen icon

If you haven’t already added your mobile web application (or mobile website) to the homescreen, you can skip to the next step. Otherwise, do the following to remove the existing icon from the home screen of your device.

Remove icon - Step 1 and 2

Remove icon - Step 3 and 4

Old icon removed

 

2. Add the mobile web application (mobile website) to your home screen

Adding the icon - Step 1 and 2

Adding the icon - step 3 and 4

Icon added

Note: If your home screen is full, it will appear on the next available space on one of your other home screen panels, so you may need to swipe left or right to find it.

 

3. Launch the mobile web application

Tap the icon that you’ve just added to your home screen. The mobile web application (or mobile website) will launch in web app mode and occupy the entire screen. The image below shows the difference between the two modes.

Side-by-side comparison of modes

 

4. Find the app in the task manager

Managing the app with the task manager

 

 

I’m impressed by the steps Google has taken to improve the mobile web experience on Android. With these recent feature additions, the gap between native and web continues to narrow. Now if Apple would only address the issues with their web app mode in Safari on iOS7, I’d be one happy camper!