Simple way to set up your site to have a mobile app

 You can easily set up your responsive website to a mobile like app by defining some simple meta tag in your HTML head. Chrome 39 + browser has an option that generates a shortcut of your site to your phone home screen. When you’ll click that shortcut or launch the app

your web app will open in full-screen mode.

There will no address bar,

There will be a splash screen,

There will no traditional browser actions like history or bookmark,

External link will try open an another browser instance like other general mobile app,

Launched from the home screen will appear in the task switcher separate from the browser,

Web apps will launch and stay in the designated orientation

When a user first visits your site though chrome mobile, they can add a shortcut your web page to your mobile home screen.

To set up your web app to mobile app, you need to add below meta tag in your HTML section

<meta name=”mobile-web-app-capable” content=”yes”>

For splash screen icon or home screen icon, you need to add one 192×192 Image using link tag in your HTML head.

<link rel=”icon” sizes=”192×192″ href=”your-site-logo.png”>

Your site title ie, <title> tag content will be your app title, hence, it will show to your home screen as well as splash screen.

To give a stylish user experience you can also use a hex color to set a background color of the browser.

<meta name=”theme-color” content=”#f4645f”>

Before:

After:

there are some best practice to follow, like use target=”_blank” for external links, It will be better if your title is static like your site name.

there are also some cons, it will not work on chrome for Ios mobiles, there are no API to detect that your site is running as app mode or browser mode.