IOS Devices add website to homescreen as web app not shortcut

Question

I am trying to find the correct way to code a similar site that would allow the user to add it to their homescreen. Then when opened it would open not as a shortcut to safari but as a web app of its own. You can see this in the fedex example below. You can see I have both safari and the web app open at one time. The web app has no address bar or safari navigation.

Please direct me to what this is called as I can not find information on how to achieve this on iOS

Answer 1

You need to follow Apple guide

I wanted to give here a brief but it's very long so please read the parts that interesting you.

You have there how to configure the icons, launch screen, title

About what you asked to hide safari controls just use this:

<meta name="apple-mobile-web-app-capable" content="yes">

And this is your way to check in runtime if the user now in standalone mode (so you won't ask him to download again)

window.navigator.standalone

Good luck!

Answer 2

As of iOS 11.3, you should use web app manifests.

Create a file called manifest.json and include the following:

{
   "display": "standalone"
}

Then, add it to your page like so:

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

There's a lot more that you can do with web app manifests. I suggest further reading here