Setup Add to HomeScreen for your site.

20 February, 2016
Web

So these are great times for us. From the rise native apps and onset of web apps. The reach of mobile is huge. And now more and more are putting their efforts in setup in mobile friendly version and with presence in both native.

A screenshot of web app for major applications out ther

Altough it seems like only big companies have adopted it. Apart from flipkart, i don't see anyone seriously considered the possibilities of concentrating on building a mobile friendly site.

That said this is how the current state looks like.

This new ecosystem allows anyone to setup sticky mobile version for app/site where once installed on user's phone. The user doesn't need any installs

There are only few changes needed to do setup your "Add to HomeScreen" functionality. To setup you need to add few tags in your html head tag and add a manifest file in your static assets and icon file for you app icon.

The following things are needed:

  • A manifest File- configurations on how to load your web app
  • Icon File - Your app icon file
  • Few HTML Tags

< meta name="apple-mobile-web-app-capable" content="yes">
< meta name="mobile-web-app-capable" content="yes">
< link rel="manifest" href="/static/assets/manifest.json">

Create a new file manifest.json in path that you specified above. The content of the manifest.json as follow.

    Don't forget to
  • Change name and short name to your app
  • Path to your icon file

More details around meaning parameters coming soon. But this will allow you add to home screen and create a full screen experience for your web-app.
{
  "name": "app-name",
  "short_name":"app-name",
  "display": "standalone",
  "start_url": "/?src=homescreen",
  "background_color": "#F2F2F2",
  "theme_color": "#F2F2F2",
  "icons": [
    {
      "src": "\/static\/ico\/site.ico",
      "sizes": "36x36",
      "type": "image\/png",
      "density": "0.75"
    },
    {
      "src": "\/static\/ico\/site.ico",
      "sizes": "48x48",
      "type": "image\/png",
      "density": "1.0"
    },
    {
      "src": "\/static\/ico\/site.ico",
      "sizes": "72x72",
      "type": "image\/png",
      "density": "1.5"
    },
    {
      "src": "\/static\/ico\/site.ico",
      "sizes": "96x96",
      "type": "image\/png",
      "density": "2.0"
    },
    {
      "src": "\/static\/ico\/site.ico",
      "sizes": "144x144",
      "type": "image\/png",
      "density": "3.0"
    },
    {
      "src": "\/static\/ico\/site.ico",
      "sizes": "192x192",
      "type": "image\/png",
      "density": "4.0"
    }
  ]
}

So now you all have gone through this. Try this quick steps for your site. If you are an HTTPS you are now also send push notifications to user's device as well. Market it well. Also, "Add to home Screen from your options menu"


Read more about Add to homescreen functionality here. Go to Page
Thank you for taking the time to read this post. If you're considering using Digital Ocean, the hosting provider this blog is hosted on, please consider using this link to sign up.