Are you looking for way to launch your website as a web-app for mobile users? Yes it's possbile..

Recently, I am developing an ember.js application. We are using ember.js (using ember-cli) in our client application and in backend we are using ruby-on-rails.

Here we are designing our ember app for mobile users, developing it's UI more responsive for all mobile, tablet and desktop users.

Now along with that we want our users to use it like a web-application instead of just browsing it on mobile-browsers. So we did it in following:

For Android Users:

In your main page or index.html file (In ember-cli, app/index.html file)

  • inside tag, add following lines:
  • for ember-cli users

create your manifest.json file, it should be easily accessible in your index.html file and also store the app-icons which will be accessible in manifest.json file

for ember-cli users: Store your manifest.json file at public/assets/manifest.json and icons in public/assets/images/.. folder

{
  "short_name": "Application Name",
  "name": "Application Details",
  "icons": [
    {
      "src": "assets/images/app-icon-36.png",
      "sizes": "36x36",
      "type": "image/png",
      "density": "0.75"
    },
    {
      "src": "assets/images/app-icon-48.png",
      "sizes": "48x48",
      "type": "image/png",
      "density": "1.0"
    },
    {
      "src": "assets/images/app-icon-72.png",
      "sizes": "72x72",
      "type": "image/png",
      "density": "1.5"
    },
    {
      "src": "assets/images/app-icon-96.png",
      "sizes": "96x96",
      "type": "image/png",
      "density": "2.0"
    },
    {
      "src": "assets/images/app-icon-128.png",
      "sizes": "128x128",
      "type": "image/png",
      "density": "2.5"
    }
  ],
  "start_url": "/",
  "display": "fullscreen",
  "orientation": "portrait"
}

For ios users:

In your main page or index.html file (In ember-cli, app/index.html file)

  • inside tag, add following lines:

Please make sure to add the icons in the given pixel size and also icons' path should be easily available in manifest.json and index.html file

Now on mobile, you just need to select "Add to homescreen" option from your default browser. And it will launch your web-app!!

Reference links for android:

Reference links for ios: