Web App Manifest File— Make your web app Installable

User attention is the key to success. Whether you want to sell a product, service or share your crazy new idea with the world.

And what do I mean by user? I mean “we”, humans. And we all know where we spend most of our time. Yes, you guessed it right. It is that small little thing in your back pocket that lets you do multiple things in one shot. Whether it is taking a selfie, connecting to the world, buy a new dress or zillion other things you do in your day to day life.

So, it is very important to have a strong presence on mobile devices, whether you achieve it by native mobile apps(android/iOS) or by creating a PWA. Those of you don’t know, what PWA is? It stands for Progressive Web Apps. These are the web applications which are build using some latest web technologies or

as Alex Russell says

“PWA are websites that have taken all the right Vitamins”

So 1 such right vitamin is Web App Manifest File. It is a json text file which contains information about your web application and when combined with a Service Worker can install web app on your device.

If it doesn’t make sense to you, no problem! It didn’t made for me also when I first heard this :D

You can go through following three videos or live demo links(in caption) and check how the same web application behave on mobile devices with little changes:

1. With neither Manifest file nor Service Worker
https://no-manifest-bf191.firebaseapp.com/
2. With Manifest file but without Service Worker
https://manifest-with-no-sw.firebaseapp.com/
3. With both Manifest file and Service Worker
https://manifest-with-sw.firebaseapp.com/

So, now tell me frankly! Which experience you would love to give to your users? I like experience #3 and If I am not wrong, most of you would also choose number 3. So let’s learn next how we can achieve this.

A spoiler Alert — It is damn easy!

By now you would have guessed, we need 2 things to make our web app Installable.

  1. Web App Manifest file
  2. Service Worker

Let’s take it 1 by 1…

App Manifest File (5 steps including validation and testing)

  1. Create a manifest.json file as shown below in the same directory where your index.html is present.
{
"name": "Only Manifest",

"short_name: "only_manifest",
"description": "dummy application to demo manifest without SW",

"start_url": "/index.html",
"scope: ".",
"background_color": "#EEE",
"theme_color": "#4A148C",
"display": "standalone",
"orientation": "portrait-primary",
"dir: "ltr",
"lang": "en-US",
"related_applications: [
{
"platform": "play",
"url": "https://play.google.com/.../app_name",
"id": "com.example.app"
}
],
"icons": [
{
"src": "src/images/icons/app-icon-144x144.png",
"type": "image/png",
"sizes": "144x144"
},

.
. -> Other similar image objects
.
]
}

Here is a brief explanation of each property. For more details and option check this link

  • name — shows on splash screen.
  • short_name — shows on home screen below app icon as app name.
  • description — A general description of what web app does.
  • start_url — URL that loads first when application is launched by pressing app icon on home screen.
  • scope — pages you want to include in your PWA experience, “.” means everything from where I(web app manifest file) is placed. So better put in root directory along with index.html if you want to include full web app.
  • background_color — splash screen color.
  • theme_color — status bar color.
  • display — specifies display mode. ‘Standalone’ means app like i.e. without browser address bar. Other options : ‘fullscreen’, ‘standalone’, ‘minimal-ui’, ‘browser’.
  • orientation — specifies screen’s display orientation. ‘portrait-primary’ means strict to portrait mode and prohibits landscape mode. Other options : landscape, any, portrait etc.
  • dir — primary text direction. ‘ltr’(default) means left to right.
  • lang — primary application language. ‘en-US’(default).
  • related_applications — link to related native app(android app). Omit if native app not present.
  • icons — array of image objects which contains different sizes of icon you want to show on home screen. Recommended sizes : 48, 96, 144, 192, 256, 384, 512. Your device will choose the best icon automatically.

2. Next hurdle a person faces is from where to get icons? and how to get different sizes of that icon? Don’t worry! we got everything covered. I personally like following 2 places to get and create icons quickly for my project.

  • FlatIcon — They have wide range of vector icons for free.
  • Web App Manifest Generator — You can use this web app manifest generator to both create your manifest file and generate different sized icon. I like to use it for just creating icons as it does not contain all the manifest properties.

You can alternatively choose to create your own pixel perfect icons using any image-editing software like Photoshop, Illustrator, Sketch etc.

3. Congrats! you have created your first web app manifest file. Now is the time to check if it is correct or not. Web Manifest Validator is here to help us for validating the manifest file.

4. Attach manifest file to index.html using the link tag. Put following code(example) in your head tag.

Syntax: <link rel="manifest" href="path_to_manifest/manifest.json">
Example: <link rel="manifest" href="/manifest.json">

5. Let’s see it in action…Open your application in chrome browser -> open dev tools(ctrl + shift + I) -> Application tab -> Manifest

Web App Manifest File
Hurray! First part is done, let’s move on to 2’nd

Register Service Worker (4 steps including both testing on desktop and mobile devices)

Service Worker lies at the heart of many PWA features like Offline caching, Background sync, Web push notifications and many more.

Let’s see how it can help us to add our web app to mobile homescreen.

  1. Create a Service Worker(a javascript) file in your root directory. You can name it anything. eg sw.js and put down the following code.
self.addEventListener('fetch', function(event){
});

This code is necessary as we have created a very basic service worker file which does nothing. A fetch event above fools browser that our application is offline capable.

In absence of above code, your service worker will get registered but web app install banner won’t show up. Instead you will see the following error message in your console…

“Site cannot be installed: the page does not work offline”

2. We have just created a service worker file, let’s register it. Put the following code in a .js file(not in above service worker file, some other file) which you are sure will be executed or inline in index.html between <script> tag. Earlier it runs, better it is.

if('serviceWorker' in navigator) {
navigator.serviceWorker
.register('../sw.js')
.then(function() {
console.log("Service Worker registered successfully");
})
.catch(function() {
console.log("Service worker registration failed")
});
}

Here in first line we check whether Service Worker is supported by your browser. If yes, then register it. Give path to your service worker file you created earlier in the register function.

You are done!

Technically, yes. We are done making our web app Installable but it is better to test it. Following are the 2 ways(desktop and device) to test if your service worker is registered successfully and your web app install banner appears.

3. Open your application in chrome browser -> open dev tools -> Application tab -> Service Workers

Service Worker Registered

4. To debug on actual android device, follow steps from official google documentation for remote debugging.

  • After above steps completed -> open dev tools -> Application tab -> Under Manifest -> click ‘Add to homescreen’ while connected to your device.
  • If everything goes well, you should see your first web app install banner.

Voila! Your web app is now Installable and joined the prestige space of native apps.

Now let’s get some dirty and discuss 2 important things we left out so far :

What are the requirements for Web App Install Banner?

And, What about the browser support?

Requirements

  • Include Web App Manifest file — done
  • Register Service Worker— done
  • Is served over HTTPS — I hope you can handle that.
  • Meets a site engagement heuristic defined by Chrome.

For more details, check google documentation.

Browser Support

  • Shipped — chrome, opera and chrome for android which collectively covers 60.89% of global market. Check this for more info.
  • In Dev — Edge, Firefox.
  • Under Consideration — safari.
So, should we forget about other browsers and don’t do anything about them?

Exactly not!

Remember the word progressive in Progressive Web Apps(PWA). It means if one thing doesn’t working in any browser, find an alternative, to give the best experience to users on that browser.

So as an extra bonus! Following are some meta and link tags for safari and Internet Explorer to get some native app like experiences. Include them in your head tag.

Properties for Safari

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="blue">
<meta name="apple-mobile-web-app-title" content="With Manifest">
<link rel="apple-touch-icon" href="/src/icons/apple-icon-152x152.png" sizes="152x152">
.
.
-> Other similar image links for different sizes
.

Properties for Internet Explorer

<meta name="msapplication-TitleImage" content="src/icons/icon-152x152.png">
<meta name="msapplication-TitleColor" content="#fff">
<meta name="theme-color" content="blue">

I guess now everyone is happy and can party together!

Thank you for reading this far and I hope this post would help someone who is trying to find out why, what and how of Web App Manifest file or making their web app Installable. Please let me know if you would like to read any future blog posts on other PWA features like Service Worker Caching, Background Sync, native device features like Camera/Geolocation etc. or anything related to web in comments below.

Also, don’t forget to give some claps if you like this post :)

Resources(used here)