Posted on by — Leave a comment

How To Make Your HTML5 App Downloadable With Web App Manifest

Downloadable HTML5 Apps and Web App Manifest

HTML5 has brought us the ability to add banners to our web apps that can trigger downloads to the home screen. Doing so makes the web app open up like a native downloaded app from the respective app store. In today’s tutorial I will show you how to add a web app manifest file to your web app so you can add this new functionality to your web applications.

Webmanifest.json

Webmanifest.json is a file that the browser uses to gather meta data about your application. In it you can set information such as author, description, icons and more. For the purpose of app installs the manifest file must have the following:

  • short_name
  • name
  • 192×192 png icon
  • start_url that loads
  • the site must have a registered service worker
  • the site must be served over https
  • background script with webworker

The benefits of using web app manifest is that you can add your web app to your home screen and it can be opened in a native like view. Another benefit is that your app has zero install time and can install on any device without having to pay Google or Apple developer fees. Your app has better performance as well since all of your files are local to the device. Lastly you can have an offline experience for your app (think web games, or news readers).

Web App opening from homescreen
Web App opening from homescreen

How To Implement

I am a big proponent of using tools so whenever I need to create a web app manifest I just head over to this site after plugging in your details you should end up with a file looking similar to this:

{
  "name": "This Is A Test",
  "short_name": "Test",
  "lang": "en-US",
  "start_url": "/",
  "display": "standalone",
  "icons": [
    {
      "src": "icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}
It is missing the description, and background scripts which you can simply add. For a more complete example here is my Twitter Scheduler manifest.json
{
 "name": "Twitter Scheduler",
 "short_name": "Twitter Scheduler",
 "start_url": "/home",
 "display": "standalone",
 "icons": [
 {
 "src": "/android-chrome-192x192.png",
 "sizes": "192x192",
 "type": "image/png"
 },
 {
 "src": "/android-chrome-512x512.png",
 "sizes": "512x512",
 "type": "image/png"
 }
 ],
 "theme_color": "#000000",
 "background_color": "#000000",
 "display": "fullscreen",
 "description": "The app let's you schedule your tweets!!",
 "background": {
 "scripts": ["background.js"]
 }
}

Now when someone visits the site at least twice within 5 minutes of each other a prompt will come up asking them if they want to add to homescreen. You can also manually add to homescreen yourself same experience. If you want more in depth explanations here is a great resource from Google.

Leave a Reply