Add To Home Screen.

Today, we are using a number of apps(Android or iOS) and they give effective functionality on your smartphone.
But there is a BIG ISSUE, which is that, you not able to install all app from play store or App store, when you want to visit that app.
This is a Big drawback for the native app of Android OS and iOS smartphones.

BUT, Don`t worry about that, because now we have such awesome technology for smartphone users, which is ADD TO HOME SCREEN == A2HS.

If you don`t know, what is A2HS, then see the example below.
EX: Suppose, your friend is mail you regard some tutorial or course material and they also tell you to install their app or visit web app(website).
Then what you do in that case? probably your first visit on the web app, because do you don`t want to install some anonymous app which you don`t know about it.
So, Finally, your first visit on their web app then analyze what that web app motto. after that you might be thinking to install there native Android or iOS app which is 50 or above MB app in your phone. but they did not occupy space only 50 MB when you install in your device, the device extracts the app during the installation of an app, and after that, they consume 200 or above space in your device.
So if too memory consumable for medium range smartphones like 1GB, 2GB, 3GB RAM.

Surprise here:
If I tell you that, you don`t have to gives such amount of memory as above to your device instead you just give 100KB - 300KB.
means which option, you select when you see that one app is consuming "200MB" or other one is only want to consume "200KB". surely you select second option 200KB.

Now, you think about how it's possible?
It's absolutely possible for my friends with the help or use of A2HS.

What is A2HS:
Its Add to Home Screen functionality which gives you native, reliable, fast, engaging experience or feeling app to your smartphone, they faster, less consuming than native apps.

Now continue above example, so your first visit on a web app and that web app is A2HS app.
In that case what you would do? surely you select A2HS app for your device instead of a native app, and it doesn`t matter your device have a lot of RAM like 8, 10 GB RAM but is a limited RAM and its overload one day.
There is also some smartphone user not have a high performance and high RAM phones.
So the A2HS app is useful for every user.

Now Its time to discuss that, How we use it in our web app?

First, you have to create your logo(web app logo) different size:

• 48x48
• 72x72
• 96x96
• 144x144
• 168x168
• 192x192
• 256x256
• 512x512

This above is a different size of your logo icon, 

why we use it? because we know that there are many devices like smartphones, tablet, phablet, laptop, desktop, TV(LED) so you see here that the screen size is gradually increasing then we must have a different size of a logo of suitable screen or display.

there is more code we have to add in "manifest.json" like file name, short_Name, theme color, display, background color: 

{
  "short_name": "Maps",
  "name": "Google Maps",
  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/maps/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/maps/",
  "theme_color": "#3367D6"
}

This above example by Google developers team.

Then after your last job is to add a below link between head tags in all HTML files.

<link rel="manifest" href="/manifest.json">

This how you easily create your A2HS app.

RESOURCES:

• Learn more.
• Watch video.