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!