How to create a web app

Tutorials
#1

INTRODUCTION

A web app is a website that can turn into an online application. It opens from homescreen, displays a loading screen, has a specific rotation and hides the address bar.

#THE TUTORIAL

Create a file called manifest.json and add the following code into it 
{
  "short_name": "YOUR-WEB-APP-NAME",
  "name": "YOUR-WEB-APP-NAME",
  "icons": [
    {
      "src": "/path/to/your/logo.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "index.php or index.html",
  "display": "standalone",
  "orientation": "portrait"
}

Then, paste this code in the tags of each page you want web app to be capable.

<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=false;" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<link rel="manifest" href="/manifest.json">

#CONCLUSION

We have created a web app that opens from a phone’s homescreen, in portrait mode, and where the address bar is hidden.

#In the end

Hope you enjoyed this tutorial, and if it worked for you, give it a thumbs up by clicking the like button.
If you need any more help, you can create a new topic here, and we will be happy to help you!

3 Likes