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?

Answer 1

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" />

Answer 2

Here's an updated version of how to do this for your web apps: https://web.dev/add-manifest/

Answer 3

Also for information it seems they are using jQueryMobile pretty heavily (jquerymobile.com) which I think can do a lot of all that for you.