How do they do this - Mobile Site Added to Homescreen Appears as Standalone App

Question

So I've only seen one website do this and I'm very curious to know how they do it. I'm using an iPhone 4 with iOS5 by the way.

Go to http://m.funnyordie.com/ (Will Ferrell's sketch comedy site) on mobile Safari, add it to the homescreen, and then click on the homescreen icon that was just added.

The mobile site shows up without any of the Safari buttons or address bar. It even shows up in the open app tray as an open stand-alone app (double-tab the home button to see what I mean when Funny or Die isn't in the foreground).

You can navigate the videos on the page and even search, but when you click one of the other tabs (Most Viewed, FoD Exclusives) it takes you to the Safari app for a new tab.

I've never seen anyone else do this and I'm very curious to know how they do this. Anyone know?

Solution

It's called a Web Clip and if you specify some meta data in your html you can have it appear on the home screen with an icon

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

To add an icon:

<link rel="apple-touch-icon" href="/custom_icon.png"/>

To have a startup image:

<link rel="apple-touch-startup-image" href="/startup.png">

To hide the navigation bar:

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

To change the status bar appearnace:

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

Comments

[Miles]

Thanks! I'm assuming that automatically gives it an app icon for the open app tray, even though I didn't see that explicity said in the docs.

[DHamrick]

Yes, the apple-touch-icon is what gives it the app icon in the open app tray

[Miles]

Well the combination of the icon and the web-capable line is what does it right? Because I've set an icon for pages before and that alone doesn't make it show up as an app in the open app tray.

[Miles]

Thanks, yea, you can tell by the look and feel of the site too.

[Scott Sword]

Thanks man, I had a backbone app and an angular app that I SWORE had the same meta data, but were performing differently. This totally answered my question and helped me identify what I was overlooking +1.

[Kenneth Li]

It's not working in iOS 13, we can only hide the toolbars by clicking the aA on the left hand side of the address bar.