0

I've encoutered something wierd.

IF you go into this link : http://www.pointer4u.co.il/ifleet and you add it to home screen, when you open the app it dosen't open up the browser and opens it up like a real native app, which i find is amazing for distribution of internal apps.

Now this web app (when added to home screen) not only hides the UI components but also presents a loading screen while loading it and not the regular browser loading display.

Another example you can find Here

How did they do that?

eric.itzhak
  • 15,752
  • 26
  • 89
  • 142
  • What is behind that link? It's tsking a long time to load on my ipad. – Robert Harvey Nov 07 '12 at 07:44
  • Can you explain what you mean by add it to homescreen? The only options I see (after translating the page) are login and save password. – DavidBriggs Nov 07 '12 at 07:45
  • Well it's a mobile web app. i've added another link to a blog post claiming he's mobile web app does the same. – eric.itzhak Nov 07 '12 at 07:45
  • 1
    Doean't the second link you posted answer your question? – Robert Harvey Nov 07 '12 at 07:46
  • @DavidBriggs I'm talking about the "Add to home screen" button you can find on iOs/Android which creates an icon on your home screen that links to the web page – eric.itzhak Nov 07 '12 at 07:46
  • @RobertHarvey No it just explains how to add it to home screen not how it works. You see it's not the same with other webpages, usually if you do that it opens up the browser at that same URL like favorites on PC browsers. – eric.itzhak Nov 07 '12 at 07:48
  • 1
    Well on Android 4.1 after adding a homescreen link it just looks like it's loading any regular webpage. i.e., Click a homescreen link, the progress slider thing below the address slides to the right and eventually the login page pops up. – DavidBriggs Nov 07 '12 at 08:18
  • Well thank you for that i havn't checked it on Android atm i know understand that it's a "hack" that makes it looks like native in iOS, i juse assumed initially that there's some information i don't know. – eric.itzhak Nov 07 '12 at 08:24

2 Answers2

2
  //this is the key for hiding Safari's Top Bar and bottom bar when launch from Home screen short cut. 
  //If this is no, following three lines has no effect.
  <meta name="apple-mobile-web-app-capable" content="yes" />

  <meta name="apple-mobile-web-app-status-bar-style" content="default" />
  <link rel="apple-touch-startup-image" href="URL_TO/320_460_loading.png" />
  <link rel="apple-touch-startup-image" sizes="640x960" href="URL_TO/640_920_loading.png" />
Cullen SUN
  • 3,517
  • 3
  • 32
  • 33
  • How about some explination? this seems to explain the loading part, but this seems diffrent from neilvillareals answer for the meta discription. – eric.itzhak Nov 07 '12 at 08:16
0

Copied from Steve Jorgensen's answer in Hiding Safari User Interface Components on iPhone:

window.top.scrollTo(0, 1);

Works on iPhone, but not in iPad. I have been successful hiding the browser components on iPad (so presumably everywhere) by using

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

and launching from a home-screen link. I am also using

<meta name="viewport" 
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

I have not tried seeing if the browser components are still hidden if I leave out the viewport properties.

Community
  • 1
  • 1
neilvillareal
  • 3,935
  • 1
  • 26
  • 27
  • The link i supplied not only hides the UI components but also presents a loading screen of an app and not regular browser loading. Could it be that they somehow set that as the background to simulate it? – eric.itzhak Nov 07 '12 at 07:55